Can I use different file types in srcset?

Question

I'm trying to combine .jpg and .webp, but it doesn't work for me..

<img src="flower.jpg" srcset="flower.webp 480w, flower.jpg 1080w" sizes="50vw">

Answer 1

The only requirement for the image URL in a srcset attribute is that the URL is valid and points to an image. The image types do not have to be the same. See the WHATWG standard or the MDN docs for more information.

However, if you are including multiple image types for performance reasons (serving better-compressed images while providing fallbacks for older browsers), the <picture> tag would be the way to go.

<picture>
  <source srcset="flower.webp" type="image/webp">
  <img src="flower.jpg" alt="[something that describes the image]">
</picture>

You can also provide different image widths with the srcset and sizes attributes on the <source> tag.