2

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>

According to the code, there should be a diffrent image be loaded for diffrent viewport sizes. however when I run this code on my phone, it still shows the large.jpg even for 320w (viewport width) the small one should be loaded.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
Herrsocke
  • 272
  • 4
  • 13
  • 1
    I think the issue is if you start off with the large image, you will never see the small image (as it is more efficient for the browser to resize the large image than to make a new request for the small image). Open an icognito tab and then make it small and paste this url in: https://jsfiddle.net/tjmuwkj4/ then expand your window, you will see the image changes properly – Pete Jan 11 '17 at 15:36
  • wow you are right! thanks alot – Herrsocke Jan 11 '17 at 15:48

1 Answers1

7

According to the code, there should be a diffrent image be loaded for diffrent viewport sizes.

You've misunderstood how [srcset] works. [srcset] allows you to suggest a series of different sources for a device to use and give the device the option to pick an image that's likely to be optimal for the device.

The purpose is to save bandwidth, so devices typically download the largest image that would reasonably fit on their screens, although there are a lot of other nuances that come in to play that I'm not going to get into here.

What devices are not going to do is switch between the various images when a different breakpoint would apply. This is the job of the <picture> element.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • so in which case the small image would be downloaded? – Herrsocke Jan 11 '17 at 15:34
  • 1
    @Herrsocke, are you on a cell network or is it slow in general? Is your browser screen small enough that the small size is appropriate? Is your pixel density at 1:1? Is your device landscape width narrow enough that you won't need the larger image? All of these factors are up to the browser. That's the point of `srcset`. You provide multiple options and the browser can pick automatically to save on data transfer. – zzzzBov Jan 11 '17 at 15:41
  • one more thing is unclear for me. this: and this: produce difftrent image sizes. – Herrsocke Jan 11 '17 at 15:53
  • while testing responsive images you need to keep this points in mind mention in this article http://nilesh2git.com/Blog/2017/06/10/responsive-image-lessons/#comments – Nilesh Modak Jun 17 '17 at 13:35