Published in

Responsive Images using Srcset, Sizes, and Picture

How to handle inline images has been a big challenge in responsive web design and we wanted to integrate a solution into our upcoming redesign. Thankfully, there are now solutions available that a majority of browsers support. The image srcset and sizes attribute along with the <picture> element give developers the ability to deliver the right picture for the visitor’s screen size and resolution. There is even a fallback image for unsupported browsers which makes these approaches perfectly acceptable to begin implementing today. Let us explore how to implement responsive images with scrset, sizes, and the <picture> element.

Srcset and Sizes Attribute

Most of the time, a website will only need to deliver a single image at different resolutions. This is a perfect use case for the image srcset attribute which can be used alone or in conjunction with the sizes attribute. The srcset attribute declares the available source images along with the image’s specific width or resolution. The sizes attribute declares the width of the rendered image on the page at specific breakpoints. A breakpoint is a media query condition under which the content of the site will change to provide the viewer with the best possible layout. Then the browser can use the srcset and sizes attributes to determine the best source image to download. Let’s look at how to use this.

In our example, begin with the <img> element. This will contain a source image in the src attribute that is used as a fallback image for older browsers that don’t support the srcset attribute. It is good practice to also include alternate text with the alt attribute for accessibility which describes the content of the image for the disabled. Here is the code.

<img
    src="balloon-small.jpg"
    alt="A red balloon">

Next, add the srcset attribute to let compatible browsers know that there are alternative source images available. Each source image is followed by either the desired pixel density or the image’s width. Then each source image and corresponding pixel density or width value is separated with a comma.

For pixel density, we use the 1x, 2x, 3x nomenclature after the source image for declaring the screen resolution condition at which each image should be downloaded by the browser. The code works like srcset="[image] [pixel density], [image] [pixel density], etc." and should look similar to the code below.

<img
    srcset="balloon-small.jpg 1x, balloon-medium.jpg 2x, balloon-large.jpg 3x"
    src="balloon-small.jpg"
    alt="A red balloon">

For image width, declare each source image’s width with a w for the pixel width instead of pixel density. Next, add the sizes attribute after srcset to tell the browser what the rendered size of the image should be on the page at a specific screen sizes. The sizes attribute accepts px (pixel), em (relative element), vw (viewport width), % (percent), and calc (calculation) values for the image width. Each media query breakpoint and associated image width are separated by a comma with the default image width last. The sizes attribute works like sizes="([media query]) [width], ([media query]) [width], etc., [default width]" and should look similar to the example below.

<img
    srcset="balloon-small.jpg 200w, balloon-medium 400w, balloon-large.jpg 800w"
    sizes="(min-width: 60em) 33vw, (min-width: 30em) 50vw, 100w"
    src="balloon-small.jpg"
    alt="A red balloon">

Picture Element

The <picture> element is used in cases where art direction is important for the image. That is to say, rather than changing only the resolution of an image, the proportions, content, or format of the image will also change based upon the screen size. This is useful in situations where cropping an image on smaller screens to direct focus towards the image’s subject is important. Another example would be to display the best image format that is compatible with the browser (i.e. SVG, PNG, or JPG).

Inside the <picture> element, each condition is grouped into a unique <source> element. Each <source> contains a media attribute for declaring the media query breakpoint, srcset for the set of source images available under that condition, and sizes for declaring the rendered width of the image on the page. Lastly, it is followed by a fallback image for unsupported browsers.

For changing the proportions of an image on smaller screens followed by increasing resolution on high density screens, here is sample code.

<picture>
    <source
        media="(min-width: 30em)"
        srcset="balloon-small.jpg 200w, balloon-medium.jpg 400w, balloon-large.jpg 800w"
        sizes="50w">
    <source
        srcset="balloon-cropped.jpg 1x, balloon-cropped-large.jpg 2x">
    <img
        src="balloon-small.jpg"
        alt="A red balloon">
</picture>

Here is sample code for displaying the best image format supported by the browser.

<picture>
    source type="image/svg" src="logo.svg">
    source type="image/png" src="logo.png">
    img src="logo.jpg" alt="Company logo">
</picture>

Responsive images are more important than ever due to the enormous variety of device screen sizes and internet connection speeds users have today. By implementing responsive images it is possible to improve page speed and reduce bandwidth for a more enjoyable online viewing experience.

Follow our blog via RSS or Email.

Privacy Policy We do not sell or share your information.

Ted is a graphic designer and front-end developer who specializes in branding, marketing, and website development.