picture srcset with webp - how to implement sizes?

user_1692094 0
Viewed 8957

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>
srcset webp html
2 Answers

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

user_42485740

Building on @varun's answer, you can simplify the code a bit:

  • improvement: image/jpeg not needed if it's already in <img> - browsers fall back automatically
  • improvement: combine multiple <source> tags.
  • fix: add default width of 100vw to sizes tag (i.e. viewports wider than 1024px not defined)
  • fix: media tag is for art direction, not for resolution switching, see Mozilla's guide on the difference
<picture>
    // load webp in different sizes if browser supports it
    <source type="image/webp"
        sizes=" (max-width: 500px) 500px,
                (max-width: 768px) 768px,
                (max-width: 1024px) 1024px,
                100vw"
        srcset="
          webp/image-500.webp 500w,
          webp/image-768.webp 768w,
          webp/image-1024.webp 1024w,
          webp/image-full.webp 1920w
        "
        >
    // fallback on original src.
    <img 
        srcset="siteimages/image-1024.jpg 1024w, 
            siteimages/image-768.jpg 768w,
            siteimages/image-500.jpg 500w"
        sizes=" (max-width: 500px) 500px,
                (max-width: 768px) 768px,
                (max-width: 1024px) 1024px,
                100vw"
        src="siteimages/image-full.jpg" 

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