1

First of all, before asking, I have read lots of articles about responsive images and srcset, so I am sure the codes with demo absolutely correct, but result does not as expect.

We can open MDN Demo for testing. And let's keep eyes on part of html code below:

<img srcset="elva-fairy-480w.jpg 480w,
              elva-fairy-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
            800px"
      src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

On my MacBookPro 2018 with internal monitor, Whatever the width I have set any, it always load elva-fairy-800w.jpg

If document width less than 600px, it should load elva-fairy-480w.jpg.

I have do lots of test about media queries, viewport meta edited, but nothing changed.

Above tests I just notice that srcset not working normally, but picture and another what I have made a new demo with css media queries works fine(In my demo, if width set < 600px, body font color changes to red)

At last, I send my demo to my friend, everything goes well, different between us is the computer, or monitor.

After that I connect a external monitor(1080p), amazing things happened, the result is ok!

So I am confused about, why macbookpro not work good, is it retina caused?

What make me surprised more is, I drag browser form external monitor to macbookpro monitor, with chrome devtool network pannel opened. We can see a new request of elva-fairy-800w.jpg.

I upload a video on youtube: srcset not work properly, you can see it in the video.

By the way, if I do tests with Emulated Devices also good.

So why macbookpro has srcset problem?

What I have read:

whidy
  • 953
  • 6
  • 16

2 Answers2

0

Is it retina caused? Yes, it is.

The most common pixel density for retina is 2x, meaning there are 2 times the number of pixels per inch. That's the reason why your MacBook loads the larger image. (c.f. https://www.listrak.com/blog/responsive-design-retina-images)

schmauch
  • 630
  • 1
  • 7
  • 10
  • Even though retina is 2x, I still wonder why about 2 point: 1. Why other media queries work well? 2. If I set < 300px, is it srcset should works fine? But actrually not. – whidy Mar 09 '22 at 08:25
  • 1. The retina display calculates with "logical" pixels, where one logical pixel = four physical pixels (it may be even more). So media queries are treated as if the pixel density corresponds to the logical pixels. 2. If the image is cached it will not be replaced by a smaller one / or your retina display has an bigger density than 2x. – schmauch Mar 09 '22 at 19:14
  • Still disunderstand about that. I've sent a image with my test here "[srcset research on MacBook Pro](https://imgur.com/a/SMxEEz4)", we can see in image that I set scaled resolution 1920px, and native resolution is 2880, [reference](https://support.apple.com/kb/SP776?viewlocale=en_US). So it 1.5X now, if webpage srcset media queries < 600px, after computed, when document scale to less than 450px, it should work, am I right? But what I uploaded image shows that even 150px, It load `elva-fairy-800w.jpg`, and I have always checked **disable cache**. – whidy Mar 10 '22 at 01:16
0

You didn't figure out the difference between logical pixels and css pixels. 2x graph should be used in this example. Try this:

<img
  srcset="elva-fairy-960w.jpg 960w, elva-fairy-1600w.jpg 1600w"
  sizes="(max-width: 600px) 480px, 800px"
  src="elva-fairy-1600w.jpg"
  alt="Elva dressed as a fairy"
>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Bearv5
  • 1
  • 3