SRCSET Strangeness!

[GuerrillaCode]

I am trying to understand how to do responsive images and have encountered something I don’t understand.

I am using bootstrap so I set this image rule to work on the same breakpoints.

<img src="img/slides/home/1_1000x554.png" alt="first image"
                             srcset="img/slides/home/1_300x166.png 300w, img/slides/home/1_600x332.png 600w, img/slides/home/1_1000x554.png 1000w"
                             sizes="(max-width: 767px) 300px, (max-width: 999px) 600px, (max-width: 1199px) 1000px">

Everything works great but I am confused how the browser interprets this for 2x.

At first I assumed this rule would be for 1x & 2x but on 2x it always selects the image from the next highest breakpoint (which is good as there is no way I can see to specify a 2x image when defining a size rule).

This made me think “Oh, those rules must be in image-pixel size size and not CSS-pixel size”. So I tried testing to see if the rules were kicking in at 50% of the rule size but that was not the case.

The rules always kick in as the right CSS pixel value, but the chrome dev tools device preview will always take the next highest breakpoint when 2x is set for the screen.

I’ve read 5 different lengthy articles on SRCSET and not a single one of them has addressed this point that I could determine.

Can anyone shed some light on this behaviour or point me to an explanation?

Thanks

[Shikkediel]

Hope I get your point, 2x etcetera are addressing the display pixel density of the physical screen. So it’s basically for high res devices.

[GuerrillaCode]

Yes that is correct.

My point is there is no specific markup for specifying screen width rule and the pixel density. It is one or the other but when you specify the screen width rules (in CSS pixels) the browser seems to adjust and take a larger breakpoints image to account for it but this isn’t documented anywhere.

[Author]

Posts