Using Responsive Images in Web Development

Images on websites can be adapted to both screen resolution devices for correct display in mobile devices, as well as screens with a high DPI (for example, Retina monitors) for more detailed display.

There are several alternatives to implementing adaptive displays, they differ in terms of the complexity of implementation, cross-browser compatibility and the generated overload in the Internet connection. Let's analyze the most famous.

The most common method of implementing adaptive displays
In the most basic case, in order to implement adaptive displays, it is enough to use images of similar size, as well as the largest volume of the area they will capture, if we do not need adaptation to Retina monitors; or 2-3 times larger than this area, if adaptation to screens with a high DPI is needed.

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

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

Implementation of adaptive displays with JS processing in the frontend
With JS support, I can find out the size of the viewing area and DPI devices, but first, starting from this, make a request from the server for images that meet these characteristics. In this way, devices with small screens and / or with a normal DPI will not extract excessively large photos: this way, traffic is also saved, and the website loads faster.

The method is usually implemented with JavaScript support, which is undertaken when loading the page and that "substitutes" in the src attribute of the displays a link obtained from the initial hyperlink (usually insured in the data attribute of the img tag) with a line of addition to the characteristics in order to load the necessary information about the screen.

This method increases the size of the saved versions of the photo, is more difficult to implement (both backend and frontend), but also requires the indispensable presence of JS on the buyer's side.

In addition, in some cases, in addition to the screen resolution, you also need to take into account the speed of the connection to the Internet (for example, you do not need to transmit images in high resolution to an iPhone with a Retina screen, if this phone uses edge for the purpose of connecting to the Internet).

Implementation of adaptive displays with processing in the backend
The presence of the initial request of the buyer can "remember" the characteristics of his screen, and the presence of page generation can simultaneously replace the "correct" hyperlinks in the images. With the purpose of initialization, JS is also often necessary here, although in order to establish the device, you can also use the request names (data on the User Agent often make it possible to recognize the device). The implementation, built in the headers of requests, previously does not depend on JS and functions correctly in various browsers, despite the fact that in the configuration of the beloved series is more difficult.

Today is also a more reliable method of activity with adaptive images

The methods shown were used (and are still used) in a significant way because of this, that the standard supported options browsers did not give. Now everything without exception has become much more correct. In HTML5, the srcset and sizes attributes appeared near the displays, allowing you to put a number of hyperlinks in images, but also the picture tag appeared, which provided even more capabilities.

This does not work in Internet Explorer Eleven and in its most early versions, but in absolutely all current browsers, help is previously available, for this reason this method is considered preferable in the current study.