Implementing Adaptive Images

Images on websites can be adapted to both the screen resolution of the device for correct display on mobile devices and for high DPI screens for more detailed display. There are several options for implementing adaptive images, which are used by experts web agency WebiProg, to create websites on various platforms.

The easiest way to implement adaptive images.

In the simplest case, it is sufficient to use images that are either of the same size as the area they will occupy, or several times larger than this area, if adaptation to high DPI screens is required. The images in this case are proportionally scaled by means of CSS.

The disadvantage of this method is the high volume of traffic necessary to load a page with a lot of full-color images (images with a small number of colors are usually compact enough even in high resolution).

A flexible way to implement adaptive images with processing on the frontend.

Using JS, we can find out the size of the viewport and the DPI of the device, and based on this, request images from the server that correspond to these parameters. Thus, devices with small screens and / or standard DPI will not get excessively large photos: so traffic is saved, and the website is loaded faster.

The method is usually implemented using a JavaScript event that is triggered when the page loads and that "substitutes" for the src attribute of images with a link obtained from the source link (usually stored in the data attribute of the tag "img") by adding to the parameters for loading the necessary screen data.

This method somewhat increases the amount of stored versions of photos, it is more difficult to implement (both the backend and the frontend), 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 connection to the Internet.

A flexible way to use adaptive images with processing on the backend.

At the first request of the client it is possible to "remember" the parameters of its screen and when generating pages immediately substitute "correct" links to images. For initialization, JS is often required here, although you can use the request headers to define the device. The implementation, built on the request headers, is completely independent of JS and works correctly in all browsers, although in the configuration it is somewhat more complicated.