CODEWITHSUNDEEP
htmlimageresponsive-designresponsive-imagessrcset
nickpish
nickpish

Reputation: 847

Responsive images: Srcset & sizes

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?

Upvotes: 2

Views: 2438

Answers (1)

Nilesh Modak
Nilesh Modak

Reputation: 361

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.

Upvotes: 1

Related Questions