Different image Desktop VS Mobile

HTML-CSS
1

I am no HTML or CSS expert

I understand that the following HTML will allow a different image to display on smaller screens but I assume that in this case both images will be downloaded to the device, thus rather than decrease page load time it will increase load time.

Am I correct?

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Is there a way with HTML or CSS to cause the browser to only download one image (the one that is most appropriate for that screen size).

Thanks ColinK

2

Have you tested your assumption?

The MDN page on responsive images has live code examples.

If you open the browser developer tools, go to the network tab and filter for images, you can see how the browser handles it. For some of the examples you may have to switch between using device mode and not to see the difference (depending on device resolution).

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.