Comparing picture against img with srcset + sizes attributes
HTML CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js/vendor
.bowerrc
.gitignore
README.md
index.html

README.md

responsiveImagesTagsCompared

We have a responsive website layout and we want to have flexible responsive images, optimized for the most common resolutions. Do we need to use the picture tag, or the img tag with its srcset and sizes attributes can do the job?

Here I'm trying to find out if the img tag used with its srcset and sizes attributes has some limitations compared to the picture tag in a full responsive, non full-width page layout.

The images layout

Images in this layout are as follows:

Viewport Width Images width Container width
0 to 767px 1/2 of container 100% with no padding
From 768px to 1023px 1/3 of container 100% with 30px padding
From 1024px to 1279px 1/4 of container 100% with 30px padding
From 1280px up 1/4 of container 1280px with 30px padding

The problem I thought it existed

When using the img tag with srcset and sizes, we can specify how wide your images will look at different media queries, but as I could found so few articles that explains it, I thought we could only specify the widths using the viewport width (vw) unit. But I was wrong...

The solution I found

Contrarily of what I thought, we can specify the img sizes using any length, using the vw unit in the simplest cases, and using the CSS calc() function in the most complex ones.

If you need a more extensive explication, please read srcset and sizes by Eric Portis, in my opinion the best article about using img with srcset and sizes.

Experiments about images sizes calculations has been done using this pen which uses media queries and CSS to specify img widths, and then this pen which specifies widths directly inside the img tag.

Applying it to the layout

Viewport Width Images width Container width Image width in CSS
0 to 767px 1/2 of container 100% with no padding 50vw
From 768px to 1023px 1/3 of container 100% with 30px padding calc(( 100vw - 60px ) / 3)
From 1024px to 1279px 1/4 of container 100% with 30px padding calc(( 100vw - 60px ) / 4)
From 1280px up 1/4 of container 1280px with 30px padding 305px :)

Calculating optimized image sizes based on spacing and device / orientation

We want our images to be optimized at most common resolutions, we need to:

  • Define which are the most common screen resolutions / densities
  • Decide which are the resolutions / densities that we want to optimize for
  • Calculate what the image sizes will be at these resolutions / densities
  • Scale our images to those image sizes
  • Markup the imgs in our HTML
    • List all the image sizes in the srcset attribute, using the w descriptor
    • List all the image widths in the sizes attribute, as defined in the table above

To define the screen resolutions and decide which ones to optimize for, we can use any tool like Google Analytics to get some information about our users and the devices they mostly use.

To see the calculations I made and get the image sizes to use, see this spreadsheet

To recap, the resulting image sizes are the following:

Device & orientation Screen width Img width (css px) Img height (css px) Screen density Img width (px) Img height (px)
iPhone 4/5/5s 320 160 186 2 320 372
iPhone 6 375 187 217 2 374 435
iPhone 5/5s landscape 568 284 330 2 568 660
iPhone 6 landscape 667 333 387 2 666 774
iPad / mini 768 236 274 2 472 549
iPad / mini landscape 1024 241 280 2 482 560
PC with 1280w up 1280 305 355 1 305 355
PC with 1280w and HiDPI 1280 305 355 2 610 709
PC with more than 1280w 1920 305 355 1 305 355

picture vs img

Picture markup:

<picture>
    <source media="(max-width: 320px)"
            srcset="http://placehold.it/320x372 2x">
    <source media="(max-width: 375px)"
            srcset="http://placehold.it/374x435 2x">
    <source media="(max-width: 568px)"
            srcset="http://placehold.it/568x660 2x">
    <source media="(max-width: 667px)"
            srcset="http://placehold.it/666x774 2x">
    <source media="(max-width: 768px)"
            srcset="http://placehold.it/472x549 2x">
    <source media="(max-width: 1024px)"
            srcset="http://placehold.it/241x280 1x, http://placehold.it/482x560 2x">
    <source media="(min-width: 1280px)"
            srcset="http://placehold.it/305x355 1x, http://placehold.it/610x709 2x">
    <img src="http://placehold.it/305x355" alt="A product image">
</picture>

Img markup:

<img src="http://placehold.it/305x355"
         srcset="http://placehold.it/241x280 241w, http://placehold.it/305x355 305w, http://placehold.it/320x372 320w, http://placehold.it/374x435 374w, http://placehold.it/472x549 472w, http://placehold.it/482x560 482w, http://placehold.it/568x660 578w, http://placehold.it/610x709 610w, http://placehold.it/666x774 666w"
         sizes="(min-width: 1280px) 305px, (min-width: 1024px) calc((100vw - 60px) / 4), (min-width: 768px) calc((100vw - 60px) / 3), 50vw"
         alt="A product image">

picture markup turns out to be more verbose, and we're still not supporting single density displays under 768px.

img markup is shorter and non repetitive, and lets the browser calculate what is the better image to use considering resolution AND pixel density.

Conclusion

img with srcset and sizes wins.

The reason is that you have to write much less code to support much more devices and screen densities. Given the ability to use CSS' calc() function in the length expression of the sizes attribute, we can do even complex calculations to define the right image to use even in complex layouts.

Note that picture and img are comparable only when all the images have the same ratio over multiple media queries. If the images ratio change to adapt images to devices ratios, the picture tag is the only way to go.

Cheers!