Srcset attribute not working as expected on mobile and in mobile device view in Chrome dev tools

Question

Given the following:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<img
  src="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg"
  alt="Mars Curiosity Rover takes an excellent selfie."
  srcset="
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-large.jpg 1120w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg 720w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-small.jpg 400w"
  sizes="(max-width: 400px) 400px, (max-width: 720px) 720px, (max-width: 1120px) 1120px"
>
</body>
</html>

I'd expect the image chosen by the browser to be small, medium then large when viewed on devices with viewport widths 400px, 720px and 1120px respectively. This is indeed the behaviour when testing in a desktop browser (dragging the window, refreshing the page), however this isn't the case when viewing the page with a real mobile device (iOS 14+). I have also tested this using Chrome DevTools in the device toolbar. Instead, the largest image is loaded in all cases. I checked the viewport width in the console, pictured in the image below.

Image when viewed on mobile device and when using Chrome DevTools device toolbar.

Image when viewed in Chrome on desktop, simply resizing the window.

Is my understanding of srcset wrong? Could there be some issue elsewhere?

Tristanisginger · Answer 1 · 2021-08-16T16:35:36.903

0

You need to be wary of the pixel density ratio. Iphones have a retina display with a 2x pixel density ratio (so a 1200px image is used for a 600px width).

Checkout How to use srcset and sizes for responsive images

edited Aug 16 '21 at 16:35

answered Aug 16 '21 at 16:28

Tristanisginger

2,181
4
28
41

Thanks for the help, I'm getting somewhere now. It would seem that when using media queries in the ```sizes``` attribute, the media query refers to CSS pixels but the image slot width refers to device pixels. Eg. ```sizes="(max-width: 640px) 640px..."``` would mean look for an img with a w property of 640px on a 1x device, but look for an image with a w property of 1,920 on a 3x device. In my case this just loads the largest image at all times (1120w). Is that correct? – Nick Dawes Aug 16 '21 at 20:38

Srcset attribute not working as expected on mobile and in mobile device view in Chrome dev tools

1 Answers1