Last Updated:

Using Responsive Images in Web Development

Responsive Images in Web Development

Images on sites can be adapted both to the screen resolution of the device for correct display on mobile devices, and to screens with high DPI (for example, for Retina displays) for a more detailed display.

There are several options for implementing adaptive images, they differ in the complexity of implementation, cross-browser compatibility and the load created on the Internet connection. Consider the most common.

The easiest way to implement adaptive images

In the simplest case, to implement the adaptability of images, it is enough to use images that are either the same size as the maximum size of the area that they will occupy, if we do not need adaptation for Retina displays; or two to three times the size of this area if you need to adapt to screens with high DPI.

The images themselves in this case are proportionally scaled by CSS tools downwards.

The disadvantage of this method is the high amount of traffic required to load a page with a large number of full-color images, while images with a small number of colors are usually quite compact even in high resolution.

Implement responsive images with JS processing on the frontend

With the help of JS, we can find out the size of the viewing area and the DPI of the device, and on the basis of this we can request images from the server that correspond to these parameters. Thus, devices with small screens and / or with standard DPI will not receive excessively large photos: so traffic is saved, and the site loads faster.

The method is usually implemented using a JavaScript event, which is triggered when the page is loaded and which "substitutes" in the src-attribute of the images a link obtained from the original link (usually stored in the data attribute of the img tag) by adding to the parameters for loading the necessary data about the screen.

This method slightly increases the volume of stored versions of photos, is more difficult to implement (both backend and front-end), and also requires the mandatory presence of JS on the client side.

Also, in some cases, in addition to the screen resolution, it is also worth considering the speed of the Internet connection (for example, you should not transfer high-resolution images to an iPhone with a Retina display if this smartphone uses edge to connect to the Internet).

Implement adaptive images with backend processing

At the first request of the client, you can "remember" the parameters of his screen and when generating pages, immediately substitute the "correct" links to the images. JS is also often required for initialization, although request headers can also be used to identify the device (User Agent information often allows you to identify the device). The implementation, built on request headers, is completely independent of JS and works correctly in any browsers, although in configuration it is somewhat more complicated.

The modern and most correct way to work with adaptive images

The methods described above were used (and are still used) largely due to the fact that the browsers did not provide a normal supported alternative. Now things are much better. In HTML5, images have srcset and sizes attributes that allow you to set multiple links to images, and a picture tag has appeared, which gave even more features.

This doesn't work in Internet Explorer 11 and earlier versions, but all modern browsers already have support, so this method is preferable in modern development.