1

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?

patrickzdb
  • 928
  • 1
  • 10
  • 26

1 Answers1

3

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.

Yoav Weiss
  • 2,220
  • 4
  • 17
  • 22
  • Makes sense, mobile-first 'an-all. Cheers! – patrickzdb Nov 07 '14 at 15:46
  • Or not. That's more like reverse mobile-first... It's friday, I'm tired! – patrickzdb Nov 07 '14 at 16:04
  • 1
    The reasoning is not "mobile first" or "desktop first" (both work), but the fact that the algorithm picks the first matching MQ. So if you start off at the wider MQ, it'll match even though you intended a narrower one down the line to match. – Yoav Weiss Nov 08 '14 at 06:56
  • What happens when you have a rule like `(min-width: 1424px) 434.67px` so you are specifying an exact size of the picture, in combination with vw rules... I'll ask a new question maybe (not 100% on the rules) – patrickzdb Aug 02 '16 at 16:20