All geek questions in one place

Why does srcset not work?

So, I have this code:

<html> <head> </head> <body> <img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt=""> </html>

In accordance with the code, another image must be loaded for different sizes of viewports. however, when I run this code on my phone, it still shows large.jpg even for 320w (viewport width) a small one has to be loaded.

+2
source share
1 answer

In accordance with the code, another image must be loaded for different sizes of viewports.

You misunderstood how [srcset] works. [srcset] allows you to offer a number of different sources for the device to be used, and provide the device with the ability to select an image that may be optimal for the device.

The goal is to save bandwidth, so devices usually download the largest image that would fit comfortably on their screens, although there are many other nuances that come into play that I'm not going to enter here.

Which devices will not switch between different images when using a different breakpoint. This is the job of the <picture> element.

+5
source

Source: https://habr.com/ru/post/1275955/

More articles:


All Articles