2

I'm implementing responsive images in a current project, and referenced this post on CSS-Tricks in which he uses the following example:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

I used this format in my own project, specifying only width alternates, and interestingly the W3C Validator is telling me:

When the srcset attribute has any image candidate string with a width descriptor, the 'sizes' attribute must also be present

I realize the spec is evolving, and this might be more of a validator issue, but I can't seem to find a clear answer as to whether this is in fact true. From what I've read, specifying the sources by width should be enough to assist the browser in making the best choice.

In my project, I have a Pinterest-style grid layout, with three columns of images resizing down to one via breakpoints; and I'm also wondering if my sizes markup is correct to this end:

<img src="img/tile-320.jpg"
     srcset="img/tile-480.jpg 480w, img/tile-720.jpg 720w"
     sizes="(min-width: 768px) 33.3vw, (min-width: 568px) 50vw, 100vw"
     alt="srcset test">

Thus, I have three image sizes, with the 320px version as the default/fallback, and after 768px, the grid has three columns; at 568px it has two, and otherwise the column/image can be assumed to fill the viewport width.

My questions, therefore are: (1) Is sizes actually required for the browser when specifying width-based alternate sources? (2) Is my markup using sizes correct in the above implementation?

nickpish
  • 839
  • 4
  • 24
  • 43
  • 2
    1. sizes is required. 2. your sizes is correct. But if you understand sizes it should be clear, that it is required. The width of the physical image alone doesn't help. The browser needs to know the width of the image inside of your layout too. sizes falls back to 100vw if no sizes is present. – alexander farkas Jul 26 '16 at 21:23
  • @alexanderfarkas got it, thanks, Alexander; that makes sense. I guess I figured, especially from the CSS-Tricks article and others I've seen, that the browser would "figure out" the image container and/or display size and choose the appropriate source based on those calculations. However, it certainly makes more sense that specifying sizing parameters would assist the browser. – nickpish Jul 26 '16 at 21:40
  • Possible duplicate of [How to use srcset and sizes for responsive images](https://stackoverflow.com/questions/35099471/how-to-use-srcset-and-sizes-for-responsive-images) – Peyman Mohamadpour Jul 02 '19 at 07:33

1 Answers1

1

Is sizes actually required for the browser when specifying width-based alternate sources?

It's not mandatory to specify sizes if you didn't specify browser will take default sizes="100vw"

Is my markup using sizes correct in the above implementation?

For me it looks good, the main use of sizes is to tell the browser how much should be the width of the image on a different resolution.

Machavity
  • 30,841
  • 27
  • 92
  • 100
Nilesh Modak
  • 361
  • 2
  • 7