How to debug responsive images' srcset & sizes, like which media condition applies?

Question

So yet again I find myself pulling my hair over responsive images. The CMS gives me its srcset, I build a simples sizes attribute, I check the currentSrc by hover-fumbling over the attribute in Dev Tools– wrong Src! Go to 10, change a media condition maybe, save, reload, hover, repeat until it kinda works. Hope it will never fail for other images.

There must be a better way to do this? Considering that Firefox is still better than Chrom* at debugging Webfonts and that only today I have found Add device pixel ratio in Chrome's Dev Tools, I wonder if I'm overlooking something. I know of & have used placeholder images, but they can be a pain to set up and they can't tell me

• is the sizes attribute syntactically correct?
• how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
• and most importantly: which media condition matches the current viewport? Why?

EDIT: came up with this example, hope it helps:

<img
  src="foo.jpg"
  sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
  srcset="foo_a.jpg 300w, foo_b.jpg 768w" />

Viewport at 650px, device-pixel-ratio 1.
DevTools tells me:

currentSrc == "foo_b.jpg"

Why? Which condition is this? What does 33vw end up as? 650px*33/100? How does it relate to 300w? How is this closer to 768w?
Please note that I'm not really asking about these specific values, but a general workflow.

EDIT2: I am probably asking for a Dev Tools feature (or extension) that would tell me, in this case:

1. Viewport 650px
2. matches ((min-width: 600px) and (max-width: 1000px))
3. 650px @ DPR 1.0 = 650w
4. => 33vw = 650w*33/100 = 214.5w
5. closest src = foo_a.jpg 300w
6. BUT, I have foo_b.jpg in cache
7. pick foo_b.jpg

Answer 1

is the sizes attribute syntactically correct?

In your case no. Outer parens on ((min-width: 600px) and (max-width: 1000px)) appear to be extra.

how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?

If you know your device pixel ration (DPR), you can use that value to divide real image width (w value in srcset) to get pixel width that will image occupy on screen.

Browsers know this from srcset and sizes attributes you provided and take it into account when deciding which image to use.

and most importantly: which media condition matches the current viewport? Why?

Media queries in sizes attribute work exactly same as CSS media queries. So first valid media query, reading from left to right will be applied. Funny thing browser does (Chrome at least), if one query between set of commas is invalid it won't invalidate whole sizes attribute, just that query.

You can test this by applying those same set of media queries in CSS, like so (note I'm using Sass):

body {
   @media (max-width: 599px) {
      &:before { content: "max-width: 599px"; }
   }
   @media (min-width: 600px) and (max-width: 1000px) {
      &:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
   }   

In case of your second query, my linter reported invalid format until I removed outer parens. That's how I knew about your first point.

My test example: https://codepen.io/teodragovic/pen/eXjPoz
Good reference article: https://ericportis.com/posts/2014/srcset-sizes/