picture srcset with webp - how to implement sizes?

Question

I'm trying to have a picture tag with WebP support.

( load image-full if the screensize is over 1024px, image-1024 for max-width 1024px, image-768 for max-width 768 px and image-500 for max-width 500px )

I've got this code, and w3 validator is complaining that: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.

How do I implement sizes into this? Is there a better/different way I should do this?

<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)" 
    srcset="webp/image-full.webp"
    type="image/webp">
<source media="(max-width: 1024px)"
    srcset="webp/image-1024.webp" 
    type="image/webp">
<source media="(max-width: 768px)" 
    srcset="webp/image-768.webp"
    type="image/webp">
<source media="(max-width: 500px)" 
    srcset="webp/image-500.webp"
    type="image/webp">

// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
    srcset="siteimages/image-full.jpg" 
    type="image/jpeg">
<source media="(max-width: 1024px)"
    srcset="siteimages/image-1024.jpg" 
    type="image/jpeg">
<source media="(max-width: 768px)"
    srcset="siteimages/image-768.jpg" 
    type="image/jpeg">
<source media="(max-width: 500px)"
    srcset="siteimages/image-500.jpg" 
    type="image/jpeg">

// fallback in different sizes, as well as regular src.
<img 
    srcset="siteimages/image-1024.jpg, 
        siteimages/image-768.jpg,
        siteimages/image-500.jpg"

    src="siteimages/image-full.jpg" 

    alt="image description"
    class="myimageclass">
</picture>

Answer 1

While providing multiple srcset in img tag browser needs both scrset and sizes attribute to help the browser pick the right one.

You can add update code like below and it should work without complaints -

<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)" 
    srcset="webp/image-full.webp"
    type="image/webp">
<source media="(max-width: 1024px)"
    srcset="webp/image-1024.webp" 
    type="image/webp">
<source media="(max-width: 768px)" 
    srcset="webp/image-768.webp"
    type="image/webp">
<source media="(max-width: 500px)" 
    srcset="webp/image-500.webp"
    type="image/webp">

// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
    srcset="siteimages/image-full.jpg" 
    type="image/jpeg">
<source media="(max-width: 1024px)"
    srcset="siteimages/image-1024.jpg" 
    type="image/jpeg">
<source media="(max-width: 768px)"
    srcset="siteimages/image-768.jpg" 
    type="image/jpeg">
<source media="(max-width: 500px)"
    srcset="siteimages/image-500.jpg" 
    type="image/jpeg">

// fallback in different sizes, as well as regular src.
<img 
    srcset="siteimages/image-1024.jpg 1024w, 
        siteimages/image-768.jpg 768w,
        siteimages/image-500.jpg 500w"

    sizes="(max-width: 1024px) 1024px,
            (max-width: 768px) 768px,
            (max-width: 500px) 500px"

    src="siteimages/image-full.jpg" 

    alt="image description"
    class="myimageclass">
</picture>

In short we are telling browser to load the image referenced in the srcset list that most closely matches the chosen slot size

Responsive Images Detailed Tutorial