Responsive images

When developing a website with responsive design, you also need to include responsive images. Images that can change and adapt to the parameters of the device screen.

HTML version

Simple way with <img>

Here's a simple way to make an image responsive with HTML — use the <img> element and set the width as a percentage for <img> in CSS.

The image width adapts to the width of the container.

Live example #1

<img src="https://ucarecdn.com/:uuid/-/resize/1000x/">

<style>
   img {
       width: 100%;
       height: auto;
   }
</style>

Tip: Use Chrome DevTools, device mode and network tab to see how the image changes for this and ensuing examples.

In this example, the original image size is 4928x3280px and file size is 1.85 MB. When we obtain the smaller version of the image using Uploadcare CDN resize operator, the image width is reduced to 1000px and file size is reduced to 125 KB only.

HiDPI screen support with srcset attribute

Set the version of the image for HiDPI screens with the srcset attribute of the <img> element and the x descriptor.

Live example #2

<img 
    src="https://ucarecdn.com/:uuid/-/resize/1000x/1.jpg" 
    srcset="https://ucarecdn.com/:uuid/-/resize/2000x/-/quality/lightest/1.jpg 2x">

For devices with pixel ratio equal to 2 you need a double size image.

Tip: use the quality operator to reduce the quality of an image. High quality is not necessary, but you can get an file with smaller size.

On devices with a pixel ratio equal to 2, we can get a version of the image that is 2000px wide and that weighs 200 KB.

That's pretty good, but still too big for loading onto mobile devices. For example, for the iPhone 5, an image width of 640px is enough because the screen width is 320px and the DRP is 2.

Our 640px picture weighs only 59.5 KB.

Variable widths with srcset and sizes

To load an image that fits certain screen parameters, use the w descriptor in srcset as well as the sizes attribute.

Live example #3

<img src="https://ucarecdn.com/:uuid/-/resize/1000x/fallback.jpg" 
     srcset="https://ucarecdn.com/:uuid/-/resize/320x/320.jpg 320w, 
             https://ucarecdn.com/:uuid/-/resize/450x/450.jpg 450w, 
             https://ucarecdn.com/:uuid/-/resize/640x/640.jpg 640w, 
             https://ucarecdn.com/:uuid/-/resize/750x/750.jpg 750w, 
             https://ucarecdn.com/:uuid/-/resize/800x/800.jpg 800w, 
             https://ucarecdn.com/:uuid/-/resize/900x/900.jpg 900w, 
             https://ucarecdn.com/:uuid/-/resize/1000x/-/quality/lighter/1000.jpg 1000w, 
             https://ucarecdn.com/:uuid/-/resize/1200x/-/quality/lighter/1200.jpg 1200w, 
             https://ucarecdn.com/:uuid/-/resize/1500x/-/quality/lighter/1500.jpg 1500w, 
             https://ucarecdn.com/:uuid/-/resize/1600x/-/quality/lighter/1600.jpg 16000w, 
             https://ucarecdn.com/:uuid/-/resize/2000x/-/quality/lightest/2000.jpg 2000w" 
     sizes="(min-width: 1000px) 50vw, 100vw">

We tell the browser that image https://ucarecdn.com/:uuid/-/resize/320x/320.jpg has a width of 320px, image https://ucarecdn.com/:uuid/-/resize/640x/640.jpg is 640px wide, and so on. The browser will select an image depending on the viewport as well as the device pixel ratio.

In sizes we can set information about what part of the viewport image will be occupied.

sizes="(min-width: 1000px) 50vw, 100vw"

On screens with a width of 1000px, an image takes 50% of the width. In other cases, i.e. smaller screens, it will occupy the entire width.

More power with <picture>

The <picture> element is a new HTML element, and it extends the <img> element. It contains multiple <source> elements that have an srcset attribute and can have sizes and media attributes. The media attribute allows you to specify media queries like in CSS. The browser will select the most suitable source.

Let's see how we can use it.

We have a wide image, and in prevision examples, it looks on smartphones like it does on a desktop.

But what we want to see is a tall and thin image in a portrait orientation on smartphones.

We pick <img> code from the prevision example and add a <picture> container with one <source> element.

Live example #4

<picture>   
    <source 
        srcset="https://ucarecdn.com/:uuid/-/scale_crop/320x569/center/320-569.jpg 320w, 
                https://ucarecdn.com/:uuid/-/scale_crop/640x1138/center/-/quality/lightest/640-1138.jpg 640w, 
                https://ucarecdn.com/:uuid/-/scale_crop/450x800/center/450-800.jpg 450w, 
                https://ucarecdn.com/:uuid/-/scale_crop/900x1600/center/-/quality/lightest/900-1600.jpg 900w"
        sizes="100vw"
        media="(max-width: 450px) and (orientation: portrait)">
  
    <img src="https://ucarecdn.com/:uuid/-/resize/1000x/fallback.jpg" 
        srcset="https://ucarecdn.com/:uuid/-/resize/320x/320.jpg 320w, 
                https://ucarecdn.com/:uuid/-/resize/450x/450.jpg 450w, 
                https://ucarecdn.com/:uuid/-/resize/640x/640.jpg 640w, 
                https://ucarecdn.com/:uuid/-/resize/750x/750.jpg 750w, 
                https://ucarecdn.com/:uuid/-/resize/800x/800.jpg 800w, 
                https://ucarecdn.com/:uuid/-/resize/900x/900.jpg 900w, 
                https://ucarecdn.com/:uuid/-/resize/1000x/-/quality/lighter/1000.jpg 1000w, 
                https://ucarecdn.com/:uuid/-/resize/1200x/-/quality/lighter/1200.jpg 1200w, 
                https://ucarecdn.com/:uuid/-/resize/1500x/-/quality/lighter/1500.jpg 1500w, 
                https://ucarecdn.com/:uuid/-/resize/1600x/-/quality/lighter/1600.jpg 16000w, 
                https://ucarecdn.com/:uuid/-/resize/2000x/-/quality/lightest/2000.jpg 2000w" 
        sizes="(min-width: 1000px) 50vw, 100vw">
</picture>

This <source> element says in the media attribute that if screen has a width of less than 450px and the orientation is a portrait, the browser must select the image from the srcset attribute of <source>.

Tip: Use the scale_crop operator or the crop operator from Uploadcare Image CDN to get a custom part of an image.

Art direction

Art direction is the focus of the main subject of the image. It is important for smaller screens. On the large screen we can show the full image, but on a smaller screen we want to show just the main part of the image.

In our example, we want show just the head of a chameleon on smartphones.

Get the prevision example and just change the scale_crop operator to the crop operator with the resize operator.

Live example #5

<picture>   
    <source 
        srcset="https://ucarecdn.com/:uuid/-/crop/2048x1365/1345,670/-/resize/320x/320.jpg 320w, 
                https://ucarecdn.com/:uuid/-/crop/2048x1365/1345,670/-/resize/640x/640.jpg 640w, 
                https://ucarecdn.com/:uuid/-/crop/2048x1365/1345,670/-/resize/450x/450.jpg 450w, 
                https://ucarecdn.com/:uuid/-/crop/2048x1365/1345,670/-/resize/900x/900.jpg 900w"
        sizes="100vw"
        media="(max-width: 450px) and (orientation: portrait)">
    
    <img src="https://ucarecdn.com/:uuid/-/resize/1000x/fallback.jpg" 
        srcset="https://ucarecdn.com/:uuid/-/resize/320x/-/quality/lighter/320.jpg 320w, 
                https://ucarecdn.com/:uuid/-/resize/450x/-/quality/lighter/450.jpg 450w, 
                https://ucarecdn.com/:uuid/-/resize/640x/-/quality/lighter/640.jpg 640w, 
                https://ucarecdn.com/:uuid/-/resize/750x/-/quality/lighter/750.jpg 750w, 
                https://ucarecdn.com/:uuid/-/resize/800x/-/quality/lighter/800.jpg 800w, 
                https://ucarecdn.com/:uuid/-/resize/900x/-/quality/lighter/900.jpg 900w, 
                https://ucarecdn.com/:uuid/-/resize/1000x/-/quality/lighter/1000.jpg 1000w, 
                https://ucarecdn.com/:uuid/-/resize/1200x/-/quality/lighter/1200.jpg 1200w, 
                https://ucarecdn.com/:uuid/-/resize/1500x/-/quality/lighter/1500.jpg 1500w, 
                https://ucarecdn.com/:uuid/-/resize/1600x/-/quality/lighter/1600.jpg 16000w, 
                https://ucarecdn.com/:uuid/-/resize/2000x/-/quality/lightest/2000.jpg 2000w" 
        sizes="(min-width: 1000px) 50vw, 100vw">
</picture>

Tip: Use the crop operator from Uploadcare Image CDN to get the main part of an image and use the resize operator after.

https://ucarecdn.com/:uuid/-/crop/1800x1200/1090,1220/-/resize/900x/

Breakpoints

The w descriptor in srcset and the sizes attribute is handy; the browser will select the suitable image. But if we have few breakpoints in our responsive design and want to set images that suitable for them? We can use few <source> elements with media attributes.

Live example #6

<picture> 
    <source 
        srcset="https://ucarecdn.com/:uuid/-/resize/1000x/1000.jpg 1000w, 
                https://ucarecdn.com/:uuid/-/resize/2000x/-/quality/lightest/2000.jpg 2000w"
        sizes="(min-width: 1000px) 60vw, 100vw"
        media="(min-width: 750px)">  
    
    <source 
        srcset="https://ucarecdn.com/:uuid/-/resize/750x/750.jpg 1x, 
                https://ucarecdn.com/:uuid/-/resize/1500x/-/quality/lightest/1500.jpg 2x"
        media="(min-width: 450px)">
    
    <source 
        srcset="https://ucarecdn.com/:uuid/-/resize/450x/450.jpg 1x, 
                https://ucarecdn.com/:uuid/-/resize/900x/-/quality/lightest/900.jpg 2x" 
        media="(orientation: landscape)">
    
    <source 
        srcset="https://ucarecdn.com/:uuid/-/scale_crop/450x800/center/450-800.jpg 1x, 
                https://ucarecdn.com/:uuid/-/scale_crop/900x1600/center/-/quality/lightest/900-1600.jpg 2x"
        media="(orientation: portrait)">
    
    <img src="https://ucarecdn.com/:uuid/-/resize/1000x/fallback.jpg">
</picture>

CSS version

background-image

Responsive images may not be a part of HTML content. It can be just a decoration or background view for content. In this case, developers use the background-image property in CSS.

We can set different versions of an image with breakpoints using CSS media queries.

See the Pen [Responsive Images Example #7: CSS background image](http://codepen.io/uploadcare/pen/LNBYLd/) by uploadcare ([@uploadcare](http://codepen.io/uploadcare)) on [CodePen](http://codepen.io).

We set versions for HiDPI screens with the image-set() CSS function. By using this function, we can insert multiple images that will be set for normal and HiDPI screens.

background-image: image-set(
    url("https://ucarecdn.com/:uuid/-/scale_crop/450x800/center/1.jpg") 1x, 
    url("https://ucarecdn.com/:uuid/-/scale_crop/900x1600/center/-/quality/lightest/2.jpg") 2x
);

Sass version for background-image

We wrote a Sass function for getting a URL of an image, uploaded to Uploadcare.

See the Pen [Responsive Images Example #8: CSS background image, Sass version](http://codepen.io/uploadcare/pen/NNBWvW/) by uploadcare ([@uploadcare](http://codepen.io/uploadcare)) on [CodePen](http://codepen.io).

Conclusion

Modern HTML and CSS standards offer ready-made solutions in order to tell a browser which image to load for the current screen. A browser can load a large version of an image for large screens and a smaller version of image for smartphones to save internet traffic by using srcset and <picture>.

You must prepare a few versions of an image. This can be difficult and time-consuming, but Uploadcare Image CDN will help. You can just upload an image file and use CDN operators for on-the-fly image processing.

There is one other problem: a lot of code. In our example, for <picture>, we have nine versions of an image and 4 <source> elements. 17 lines of code (without comments) to load one image! In a real project, you can have even more code.

If you want a simple solution for responsive image generation with an <img> element, a srcset attribute, a <picture> element or CSS, please help us by filling out this form: https://uploadcare.typeform.com/to/fqvRb3.

Read more about responsive image by standards

If you haven't found what you were looking for in these docs, try looking in our Knowledge Base.