4

Here's my HTML:

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>serset test</title>
</head>
<body>
  <img srcset="/img/about/icon-320.png 320w,
                      /img/about/icon-480.jpg 480w,
                      /img/buy/icon-640.png 640w,
                     /img/buy/icon-780.jpg 780w,
                     /img/buy/icon-1280.png 1280w"       
           src="/img/buy/fallback.png"
           alt="responsive image">
</body>
</html>

I tried on few devices and most of them load the icon-1280.png, only few loaded the icon-780.jpg, none of the devices that I tried loaded the smaller images, regardless of the screen resolution.

Even on chrome developer tools when I change to "low-end mobile" it still loads only the large images, even on small resolutions. I also tried with fiddler "Simulate modem speed" and it also didn't change anything.

I keep clearing my cache before each try so it's not a cache issue.

I want my site to load as fast as possible on mobile by serving only the required images by its screen size. What should I do and why is the img element with srcset still loads the large images regardless of the actual device resolution? (I know I could resort to <picture> but still want to give a shot with srcset as it's suppose to be to right tool for this job)

BornToCode
  • 9,495
  • 9
  • 66
  • 83
  • 1
    I think this has something to do with pixel density but not 100% sure, I had the same issue with this and ended up using js to output the appropriate image. So if you are using a retina phone or a phone with higher than 1 pixel density then the browser will choose the bigger image – Huangism Mar 26 '18 at 14:58
  • @Huangism - So if I understand this correctly the browser does this because a 1280px image would look better on 360px 'retina phone' device with 360px resolution screen than serving a 360px image. Is this even noticeable and worth the extra bandwidth?? – BornToCode Mar 26 '18 at 22:29
  • 1
    It is noticeable to some people, if you just glance at it, you might not notice. If you compare the retina vs non retina, you will notice. To the general public this might not be significant but you can't really stop the browser from doing that by using srcset only. This really sucks because if this worked differently it would of saved a lot of code – Huangism Mar 27 '18 at 13:07
  • @Huangism - Please post your comment as an answer and I'll select it as the accepted answer. – BornToCode Aug 06 '20 at 19:08
  • ok will do, only posting it since no one else has answered – Huangism Aug 06 '20 at 19:26

1 Answers1

2

The issue is due to pixel density of the device, if you are using a retina phone or a phone with higher than 1 pixel density then the browser will choose the bigger image. You would need to use js in combination with your markup to determine which image is best to be used.

On some sites like toyota.ca or lexus.ca you will notice the image is different for different screen size and changing your browser width, will trigger the change. You could grab code from those sites after unminifiying them. It is unfortunate that srcset by itself cannot do this job.

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • 1
    Just to add that sometimes this behavior is actually desired - most mobile devices today has a 2x density. So an image that is defined on a web page to be a 300 pixels size (by css) will appear better if its source is a 600 pixels file. If for some reason (e.g. bandwidth constraints) you want full control on the downloaded image size regardless of the browser optimizations for best appearance - use the `picture` element to force the browser to download a specific file by media query (and you don't have to resort to js manipulations for that). – BornToCode Aug 06 '20 at 20:00