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

Question

我正在尝试创建一个支持 WebP 的图片标签。

（如果屏幕尺寸超过 1024px，则加载 image-full，最大宽度为 1024px 时加载 image-1024，最大宽度为 768px 时加载 image-768，最大宽度为 500px 时加载 image-500）

我有这段代码，w3 验证器抱怨：当 srcset 属性具有任何带有宽度描述符的图像候选字符串时，尺寸属性也必须存在。

我如何在其中实现尺寸？我应该有更好/不同的方法吗？

<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 列表中引用的与所选插槽大小最匹配的图像

响应式图片详细教程

Answer 2

基于@varun的答案，您可以稍微简化代码：

• 改进：image/jpeg如果已经存在则不需要<img>- 浏览器自动回退
• 改进：合并多个<source>标签。
• 修复：添加标签的默认宽度100vw（sizes即未定义宽于 1024px 的视口）
• 修复：media标签用于艺术指导，而不是分辨率切换，请参阅Mozilla 的指南了解差异

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