Using responsive images
March 2, 2022
It is important to have responsive images because they improve file sizes, user experience and loading times. Responsive images are great for users on small mobile devices. They don't waste bandwidth and shorted page load times, however, they require site builders to create multiple copies of an image that are optimized for different display sizes and resolutions.
But given the myriad of screen sizes, just how many different images will we need?
Using an online tool, the Responsive Image Breakpoints Generator, we can calculate responsive image breakpoints interactively and generate the required images. I used this tool to create all images needed for all screen sizes.
With this tool, I was able to create all the images for 320px wide and 1440px wide screens of the beautiful castle Neuschwanstein in Germany.
Schloß Neuschwanstein in Germany
I set the parameters so the difference in image size between two sizes is 20kB. This means that a user will never load an image with more than 20kB excessive size. The tool will then provide all images and the HTML markup to use. These 10 images will cover the range of screen sizes I specified and minimize the download for each device.
The HTML <img> tag tells the browser when to use what image.
<img src="castle_c_scale,w_1440.jpg"
sizes="(max-width: 1440px) 100vw, 1440px"
srcset="
castle_c_scale,w_320.jpg 320w,
castle_c_scale,w_645.jpg 645w,
castle_c_scale,w_803.jpg 803w,
castle_c_scale,w_943.jpg 943w,
castle_c_scale,w_1079.jpg 1079w,
castle_c_scale,w_1196.jpg 1196w,
castle_c_scale,w_1283.jpg 1283w,
castle_c_scale,w_1281.jpg 1281w,
castle_c_scale,w_1401.jpg 1401w,
castle_c_scale,w_1440.jpg 1440w
"
alt=""
>
All in all, this is a great tool. It calculates the images we need, creates the images, and provides the code so the browser can display them.
But wait! This is just for loading a jpg image. What if we want to use an optimized image format like webp for browsers that support it? File sizes of webp images can be dramatically less then jpg images.
In that case we have to use a <picture> tag like so:
<picture>
<source type="image/webp"
sizes="(max-width: 1440px) 100vw, 1440px"
srcset="
castle_c_scale,w_320.webp 320w,
castle_c_scale,w_645.webp 645w,
castle_c_scale,w_803.webp 803w,
castle_c_scale,w_943.webp 943w,
castle_c_scale,w_1079.webp 1079w,
castle_c_scale,w_1196.webp 1196w,
castle_c_scale,w_1283.webp 1283w,
castle_c_scale,w_1281.webp 1281w,
castle_c_scale,w_1401.webp 1401w,
castle_c_scale,w_1440.webp 1440w"
>
<img
src="castle_c_scale,w_1440.jpg"
sizes="(max-width: 1440px) 100vw, 1440px"
srcset="
castle_c_scale,w_320.jpg 320w,
castle_c_scale,w_645.jpg 645w,
castle_c_scale,w_803.jpg 803w,
castle_c_scale,w_943.jpg 943w,
castle_c_scale,w_1079.jpg 1079w,
castle_c_scale,w_1196.jpg 1196w,
castle_c_scale,w_1283.jpg 1283w,
castle_c_scale,w_1281.jpg 1281w,
castle_c_scale,w_1401.jpg 1401w,
castle_c_scale,w_1440.jpg 1440w"
alt=""
>
</picture>
This is the markup for one image, it has to be used for every image that is used on the website. In the above example you now have to create 20 different copies for each image on your website. That is insane.
You can see where this is going when you need to include yet another image format, for example jpeg-xr.
Just imagine having 50 images on your website.
There must be a better way to do this. In my next post Building a responsive/progressive image component, we'll see what that better way may look like.
In the meantime you may want to review these articles about responsive images: