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
sizes attributes can do the job?
Here I'm trying to find out if the
img tag used with its
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
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
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
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||
|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||
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
srcsetattribute, using the
- List all the image widths in the
sizesattribute, as defined in the table above
- List all the image sizes in the
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 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> <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 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.
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.
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.