CODEWITHSUNDEEP
javascriptcsshtmlimagesrcset
sjmartin
sjmartin

Reputation: 3962

How Does Image Srcset Really Work?

I created a quick example of what my experiences are so far.

  1. The 160px image is never loaded.
  2. When I change the width to 147px the 320px image is loaded.
  3. When I change the width to 227px the 640px image is loaded.
  4. When I change the width to 453px the 1280px image is loaded.

I would have thought that the 160px image would load until the width of the browser was greater than 160px, and the 320px image would load until the width of the browser was greater than 320px and so forth.

Why is that not the case?

Edit: Looks like stackoverflow is not a good place to test this example. You may have to copy paste the code into your own browser to replicate the different browser sizes. 

    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = "Current screen width: " + myWidth + "px";
    };
	<div id="dimensions"></div>
	<img src="http://imgur.com/z5X66tR"
	     srcset="http://imgur.com/z5X66tR.png 160w, 
	              http://imgur.com/kPOTVv7.png 320w, 
	              http://imgur.com/xj9RPrV.png 640w, 
	              http://imgur.com/PgJsD95.png 1280w">

Upvotes: 2

Views: 257

Answers (1)

Tab Atkins-Bittner
Tab Atkins-Bittner

Reputation: 18363

It sounds like you have a 2x screen, and your browser is flipping at the geometric mean of the sizes.

Recall that the w numbers are just the image's width in image pixels, not a command about the browser's window size or anything like that. Using the size from sizes (defaulting to 100vw), you can convert the w numbers to equivalent x numbers. For example, when your screen is 320px wide, your four sizes are equivalent to .5x, 1x, 2x, 4x. If you have a 2x screen (which is default for macs these days), the browser will then often prefer the 2x source, which is your 640w one.

This explains your transition numbers. The geometric mean of 320 and 640 is 452.5; you'll note that 227*2 is 454. Same for 640 and 1280 - the geometric mean is 905, and 453*2 is 906.

Upvotes: 3

Related Questions