how do I handle IMG srcset and widths together?

Lighthouse is yelling at me to add widths to my images where I use srcset, doesn't this negate srcset and constrain the width to the width attributes value in pixels? How are you supposed to use these together?
7 Replies
mätthew
mätthew8mo ago
<img src="image.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w" sizes="(max-width: 600px) 100vw, 50vw" width="100%">
<img src="image.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w" sizes="(max-width: 600px) 100vw, 50vw" width="100%">
maybe something along these lines so that its responsive?
syg
syg8mo ago
Hmm, can you do widths that way?
mätthew
mätthew8mo ago
i would assume so, theres a 300w and 600w so i believe its possible
syg
syg8mo ago
Hmm, I'll try it when I'm back at my computer, thanks
mätthew
mätthew8mo ago
np
syg
syg7mo ago
as I suspected, this fails the w3c html validator: Error: Bad value 100% for attribute width on element img: Expected a digit but saw % instead.
MarkBoots
MarkBoots7mo ago
srcset sizes are based on the screenwidth, not the images itself (just like a media-query) so you can give it a width on the element. and in css set the cover with the actual needed size