CODEWITHSUNDEEP
htmlcssimagesrcset
patrickzdb
patrickzdb

Reputation: 1063

Understanding the maths of srcset and sizes

I forked and ammended a simple codepen this morning while I've been trying to understand the srcset and sizes markup and the maths behind how the image gets selected at certain break points. Here is the pen: http://codepen.io/patrickwc/pen/Ijuwq

Copied here:

html:

  <div class="container">

    <div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div>

  </div>

CSS:

  *, *:before, *:after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .container {
    margin: 0;
    padding: 0;
    background: red;
    list-style: none;
  }

      .container__item {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        padding: 0;
        width: 100%;
      }


  @media (min-width: 30em) {
    .container__item {
      width: 50%;
    }
  }

  @media (min-width: 62.5em) {
    .container__item {
      width: 25%;
    }
  }

It makes sense to me up until the 62.5em breakpoint. This is 1000px. Considering I have specified in the sizes attribute, that at (min-width: 62.5em) 25vw the picture should take up a quarter of the screen size, why is the 600 x 600 the first to load? 1000 / 4 = 250, so the 320 picture would do fine. I've read up on picturefill a lot and read some great posts by Eric Portis and Chris Coyier on the subject. I don't understand what I'm doing wrong, or if its just a weird bug?

Upvotes: 1

Views: 520

Answers (1)

Yoav Weiss
Yoav Weiss

Reputation: 2270

Your sizes value should start off at the narrowest breakpoint, and gradually move to the wider ones, so in your case it should be (min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw.

Otherwise, if you're on a retina screen, the screen's DPR is also taken into account when figuring out which image to pick.

Lastly, the math behind the picking algorithm is browser specific (i.e. it is not part of the spec), so it is not something you should rely on as a developer. It may change between browsers, between browser versions, and based on the user's conditions and preferences.

Upvotes: 3

Related Questions