A responsive image is an image that adapts to different device characteristics. When done right, responsive images can improve the performance and user experience of a site.
This article explores how you can create responsive images in HTML using srcset and the picture element.
Why Should You Use Responsive Images?
When the software engineers were creating the web, they did not consider how browsers would handle responsive images. After all, users were only accessing the web from desktops or laptops. Of course, that is not true today.
According to Statista, over 90 percent of the global internet population go online using their mobile phone. Most of the web pages on the internet contain images and these images are one of the metrics used to measure web performance. To improve performance, you need to optimize your images by making them responsive.
How to Create Responsive Images in HTML
You can approach responsive images from two angles—either by serving the same image with different sizes or serving different images according to the display characteristics. You could use <picture> or <srcset>. These two options handle responsive images differently, but they all display one image from given alternatives depending on the rules set.
Using srcset
The standard <img> HTML only allows you to specify one image file. If you want to display a different image depending on the size of the device, then you should use srcset.
Syntax:
<img srcset="" src="" alt="">
srcset allows you to provide additional source files, and the browser will choose the image that seems optimal for that image size.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">
srcset is made of three parts: The image filename which specifies the path to the source image, a space, and the intrinsic or real width of the image.
Using srcset With sizes
The issue with using srcset is that you have no control of what image the browser will pick to display. Combining srcset with sizes solves this problem. sizes define a set of media conditions that hint at the image with the optimum size.
You can now rewrite the <img> tag above as follows.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">
sizes is made up of a media condition, in this example it's (max-width: 600px) which represents the viewport width, space, and the slot width (480px) specifying the space the image will fill if the media condition is true.
Here, the browser will first check the device width and compare it to the media condition. If the condition is true, it will check the slot width and load an image from srcset with the same width or the next bigger one.
Note that you are also including src which provides the image to fall back on browsers that don’t support srcset and sizes.
srcset also allows you to serve images at different resolutions using x-descriptors.
<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">
In this example, if the device has a resolution of two device pixels per CSS or more the browser will load the cute-cat-high1.jpg image.
Hardware and Software Pixels
The problem with this solution is that the images are only responsive in terms of the device’s pixel density. This is the ratio of the hardware pixels to the software or CSS pixels. A hardware pixel is the actual dot of light on the screen while the software pixel or CSS pixel is a unit of measurement. The pixel density determines the device's resolution.
When rendering responsive images, don’t only consider the resolution; the display size is also important. Otherwise, you might end up unnecessarily loading large images or images that are too pixilated.
<img srcset="cute-cat-high1-480w.jpg 1.5x,
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">
Using <picture>
<picture> is an HTML element that wraps several <source> elements containing different source files and an <img> element. While <img srcset="" sizes="" alt=""> makes images responsive by serving different sizes of the same image, <picture> allows you to actually change the image displayed.
Syntax:
<picture>
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>
Consider a situation where you have a large landscape image. The image displays and looks proportional on a desktop, but it shrinks significantly on mobile such that elements on the image become tiny. The non-responsive image contributes to a bad user experience. With <picture> you can tell your browser to switch to a close-up portrait image when on mobile.
<picture>
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>
Like in the first approach, <source> contains a media attribute that you can use to provide the media condition. For instance, the browser will display the “cute-cat-480w.jpg” if the viewport width is 639px or less. The srcset holds the image file path you want to display and src specifies the default image.
Fallback for WebP Image Format
Another thing that <picture> handles well is providing a fallback for modern image formats like WebP. WebP images have high performance, are small, and offer a fast web experience. You can therefore decide on using them on your sites. A challenge you might experience is that not all browsers support WebP images. With <picture>, you don't experience this issue as your browser can load an alternative image if it does not support WebP.
<picture>
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>
Why Create Responsive Images in HTML and Not in CSS?
CSS offers robust options for handling responsive images. So why not use it? The browser preloads images before it parses CSS. So before your site’s JavaScript detects the viewport width to make the appropriate changes to the images, already the original images have been preloaded. Due to this, it is better to handle responsive images using HTML.
Aim for the Best Possible Image Quality
You have seen how you can create responsive images in HTML using <picture> and <srcset> in this article. Serving responsive images usually involves considering the image size and the image resolution as they relate to the display size. If done wrongly, the image quality can suffer. Make sure to choose an image that provides optimum usability using the fewest resources.