Discussion on: Create responsive images with gulp-sharp-responsive

[Sam Miller]

Rather than specifying a media condition for each source, could the above html example be simplified to the following, letting the browser choose based on the widths given in the srcset element (see blogs.windows.com/msedgedev/2015/1...)? I haven't tested it, yet.

<picture>
<source type="image/avif" sizes=”100vw” srcset="/img/lion-sm.avif 640w, /img/lion-md.avif 768w, /img/lion-lg.avif 1024" />
<source type="image/webp" sizes=”100vw” srcset="/img/lion-sm.webp 640w, /img/lion-md.webp 768w, /img/lion-lg.webp 1024" />
<img sizes="100vw" src="/img/lion.jpeg" srcset="/img/lion-sm.jpeg 640w, /img/lion-md.jpeg 768w, /img/lion-lg.jpeg 1024" alt="lion" class="img-responsive">
</picture>