Images are not responsive in nature: each image has a set size. However we can make the images respond to viewport size in a few ways.
Most Basic Approach
Simply set a max-width of 100% for all images. Place your images within a figure or other element and size the containing element as desired. The image will fill the space unless the image is smaller than the allowed size. This is a simple but inefficient approach as the full image will be downloaded no matter how small the space to be filled.
Setting max-width: 100% is also a good basic practice as it prevents smaller images from being enlarged to the point of poor quality.
Lazy Loading
Most current browsers now support the loading attribute for the image element. This defers image downloading and rendering until just before the image becomes visible within the viewport; in other words, this decreases perceived load time!
The loading attribute has three possible values: auto, lazy, and eager. Auto is the default and has no impact. Lazy defers downloading until the last moment, while eager requests that the image be downloaded immediately.
<img src="filename.jpg" loading="lazy" alt="fake image">
Important Note: In the following approaches, always specify the smallest, lowest-resolution image first. This will be the image used on older browsers that do not understand srcset.
Using the Srcset Attribute
Some devices have much higher resolution displays than others. If you want to display an image at the same size on all devices (height and width) but would like to provide higher and lower resolution images as appropriate, use the srcset with x attribute. Essentially this provides a set of images at various resolutions. The x attribute is used to indicate which file is a normal resolution, which is twice the resolution, etc.
Example
<img src="images/160_120.jpg" width=160px srcset="images/160_120.jpg 1x, images/320_240.jpg 2x, images/640_480.jpg 3x">
Using the Srcset Attribute and Screen Size
Many times, a designer wishes to display an image at different sizes as the viewport / screen size increases. This is probably the most common reason for using responsive images. In this case, create multiple versions of the image in different sizes. Within the HTML, use srcset with the w attribute. You also need to include the sizes option.
Remember that vw stands for viewport width. The sizes attribute tells the browser how much space will be used for the image; the w attribute provides the size of the image (just assume it's a pixel measurement; that's not quite accurate but good enough for most uses). The browser will select the image that fits best.
Examples
<img src="images/160_120.jpg" sizes="50vw" srcset="images/320_240.jpg 320w, images/640_480.jpg 640w, images/800_600.jpg 800w">
This example displays an image half the size of the viewport; however, the file that most closely matches the size required will be selected.
<img src="images/160_120.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/320_240.jpg 320w, images/640_480.jpg 640w, images/800_600.jpg 800w">
This is a more complex example. An image will be displayed at 100% of the viewport if the viewport is less than 40em in size. If the viewport exceeds 40em, the image will be displayed at 50% of the viewport. The file most closely matching the size required will be selected.
Art Direction with the Picture Element
Sometimes a designer wishes to change images completely as the viewport / screen size changes. For example, the designer may wish to show a close-up image on a smaller screen but a wider view on a larger screen. In this case, use the picture element. The picture element will contain a number of other statements (rather like media queries) to select the appropriate image.
The picture element provides greater control for the designer.
Example
<picture>
<source media="(min-width: 1600px)" srcset="AlleySpringMilllarge.jpg">
<source media="(min-width: 800px)" srcset="AlleySpringMillmedium.jpg">
<source media="(min-width: 400px)" srcset="AlleySpringMillsmall.jpg">
<img src="AlleySpringMillsmall.jpg" alt="fallback">
</picture>
The picture element also allows the designer to provide alternate image formats as needed.
