[question] Mixing different formats in same srcset?

[SamuelMiller]

The example given on the webpage (https://npm.io/package/gulp-html-srcset/v/2.0.0), <img srcset="image.webp 1200w, image.jpg 1200w, image@720w.webp 720w, image@720w.jpg 720w">, uses different image formats in the same srcset and also doesn't include a default "src" for fallback. That's the first time I've seen that. The tutorials I have read would have written out that example using the picture element like in the following, in order to provide a fallback for browsers that don't support webp.

<picture>
<source type="image/webp" srcset="image.webp 1200w,  image@720w.webp" />
<img  src="image@720w.jpg" srcset="image@720w.jpg 720w,  image.jpg 1200w" >
</picture>

is <img srcset="image.webp 1200w, image.jpg 1200w, image@720w.webp 720w, image@720w.jpg 720w"> considered valid html? Will browsers that don't support webp just skip them? Thanks, Sam

[Maistho]

Hey, sorry for taking so long to reply!

I think you are correct and that the example is incorrect here, you probably need to use picture with multiple source elements instead, although I haven't tried it.

I'm no longer actively using this project since I found that I got way better image loading times using Gatsby. But if you're interested I'm open to accepting PRs on the main repo linked to in the readme.