'Why srcset not work normally on MacBookPro(or maybe retina monitor caused?)

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:

htmlcssresponsive-imagessrcsetwpfvisual-studiomsbuildblazorwebview2


Solution 1:[1]

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)

Solution 2:[2]

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"
>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 schmauch
Solution 2 Zach Jensz

Related Questions