What the Hell! Can anyone help me with scrset and sizes in HTML?

#discuss #help

I'm trying to figure out how srcset and sizes work in HTML, but I'm not able to understand why a specific image instead of another one is chosen. Can anyone help me? I don't know any other place to ask.

Top comments (9)

Tiago Rinaldi • Aug 24 '19

I don't know if you're being serious or not.

The best example is responsive images, you can see an example at MDN Docs

The idea is... you have a set of sources (in this case, images in different sizes) that you control with CSS (media queries).

But let's use the example from MDN:

<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Notice the different images in the set of src?
Well, that's your srcset!

In this example the author is using the CSS queries within the <img> tag with the attribute sizes.

Let's transform it into a tiny CSS:

img {
  width: 800px;
}

@media screen and (max-width: 480px) {
  img {
    width: 440px;
  }
}

@media screen and (max-width: 320px) {
  img {
    width: 280px;
  }
}

I'm using img as a selector.

Another thing, you might ask:
"Why is the author setting the size to 280px and the image has a width of 320px"? That's - IMO - a way to avoid distortion (I can imagine some others explanations, but that's is the most simple).

Anyway, take a few minutes to read the link I sent you and search the web for "responsive image srcset example" and you'll get some way better explanation that I just gave you!
(I'm on mobile and kinda in a hurry, but feel free to hit me up!)

I hope I cleared the path a little.

Franco Scarpa • Aug 25 '19

I'm serious. For example:

  <img srcset="rufy1.jpg 850w, rufy2.jpg 900w"
       sizes="(max-width: 600px) 680px, (max-width: 2900px) 799px"
       src="rufy1.jpg"
       alt="One Piece">

Why rufy2.jpg is shown when the viewport is 1200 pixels wide?

Tiago Rinaldi • Aug 25 '19 • Edited

You're not matching the size of the srcset with the max-width you want in sizes. In your code to show rufy1 the viewport should be at least 850w, otherwise the browser will follow the second rule.

With your srcsetyou want rufy1 when the viewport has a max width of 600px and rufy2 when the viewpoert has a max width of 2900px. In order to accomplish it:

  <img srcset="https://dummyimage.com/320x320/000/fff&text=rufy1 850w, https://dummyimage.com/800x800/000/fff&text=rufy2 900w"
       sizes="(max-width: 850px) 680px, (max-width: 900px) 799px"
       src="rufy1.jpg" 
       alt="One Piece">

Basically, the value (not the image, the number) from srcset will be yout rule to the media-query.

With your rules for max-width the first image would have a width: 680px and the second one a max-width: 799px. rufy2is being shown because 1200px is higher than the first rule max-width: 600px.

EDIT:
If you want a fallback image in case none of the rules are met, you can use this new approach:

<picture>
  <source media="(max-width:600px)" srcset="https://dummyimage.com/450x450/000000/fff&amp;text=rufy1">
  <source media="(min-width: 1000px)" srcset="https://dummyimage.com/800x800/000000/fff&amp;text=rufy2">
  <img src="https://dummyimage.com/1000x1000/d00e00/fff&amp;text=rufyFallback" alt="Fallback value">
</picture>

With this syntax you are specifying each source to a rule, notice the media and srcset attributes inside each <source>, and in case none of the rules apply, it falls back to the <img>

Here's an example

Franco Scarpa • Aug 25 '19 • Edited

Ok, but the width of the slot when the viewport is 1200px is written to be 799px, and 850w is closer to 799px than 900w, so I think that rufy1.jpg should be shown. I wasn't able to understand, Tiago. Sorry, but can you help me with one more snippet?

  <img srcset="rufy.jpg 850w, zoro.jpg 910w, jinbe.png 1100w"
       sizes="(min-width: 1100px) 1100px, (min-width: 910px) 910px, (min-width: 850px) 850px"
       src="rufy.jpg"
       alt="One Piece">

Why is jinbe.png always shown when I resize the browser window?

Tiago Rinaldi • Aug 25 '19 • Edited

What is the expected output in this example? It seems like you're struggling with CSS and precedence.

It sounds trivial but that is what CSS (Cascading Style Sheets) is, I can't stress enough to read about it.
With these rules you're saying:

When the browser is 1100px or wider, use jimble.png
When the browser is 910px or wider, use zoro.png
When the browser is 850px or wider, use rufy.png

Confusing, isn't? I'd recommend read an article on responsive design, as you can see it can become a pain.

In any case, I copied and paste your code into a pen just changing to dummy images and it seems to be working? Can you try it?

Let's review the queries: