How to optimize images on your site for different screens and devices
Top

Images are one of the important parts of information on the site.According to the HTTP Archive, on average it fills up to 64% of the web-page, but most developers forget about optimization..

Most users wish that images would show clearly on large screens and on screens with high pixel density . It increases the average size of image ile. And it is obstacle for realize fast adaptive designs, that made it “unworkable”.

Let’s talk about it!

Most of us are interested in the possibility of displaying the correct image size and quality on different screen resolutions. It is one of the most important stages in optimization, which will help increase the load page speed and will optimize expenditure of traffic. Let’s consider some variants of realize.

Tag (for details see Picture Example)

Tag with attributes srcset and sizes (see SRCSET Example)

Background-image (see Background Example)

This method is based on one principle: replace image in defined points. In our case it is 414px, 767px, 980px and 1280px. But keep in mind that the quantity of points may change depending on the design and may not be applied to all images on the web-page.

Let’s consider an example based on the following design:

  • desktop design – 1800px;
  • tablet design – 767px;
  • mobile design – 480px.

responsive images example

As the width of the desktop version equals 1800px, the image size 1800px (762 kb). On this basis use the same image for tablet and for mobile illogically and not optimally. In order to do this, the image needs to be replaced to a smaller screen width <= 1280px. In our case, it’s necessary to squeeze the image from 1800px to 1280px (475kb).

For screens <= 980px tablet-images it’s necessary to decrease to 980px (333kb):

responsive images example

And for screens <= 414px the mobile image should be use squeezed to 414px (116kb):

responsive images example

As we can see sizes of image files are different at times. If we used four different images instead of one we would reduce expenditure of traffic by 1.6, 2.3 and 6.5 times on various devices from initial traffic. It will be lead to a decrease in the load time of the web-page.

But it’s not a necessary requirement for all images on the web-page. For example, small images in content, as it has an initial width equal to 542px (94kb).

responsive images example

For fast orientation use the following:

responsive images example

Conclusion

Don’t forget to optimize images when creating responsive designs!

up

Please turn your device