html - 带有 webp 的图片 srcset - 如何实现尺寸？

Question

我正在尝试使用支持 WebP 的图片标签。

(如果屏幕大小超过 1024px，则加载 image-full，最大宽度 1024px 加载 image-1024，最大宽度 768 px 加载 image-768，最大宽度 500px 加载 image-500)

我有这个代码，w3 验证器提示说:当 srcset 属性有任何带有宽度描述符的图像候选字符串时，sizes 属性也必须存在。

我如何在其中实现尺寸？有没有更好/不同的方式我应该这样做？

<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

同时提供多个srcset在 img标签浏览器同时需要 scrset和 sizes属性来帮助浏览器选择正确的。

您可以添加如下更新代码，它应该可以正常工作 -

<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>

简而言之，我们告诉浏览器加载 srcset 列表中引用的最匹配所选插槽大小的图像

Responsive Images Detailed Tutorial