html picture元素

picture

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

要决定加载哪个 URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)">
    <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
    <source srcset="mdn-logo.svg" type="image/svg+xml">
    <source srcset="mdn-logo.webp" type="image/webp">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="">
</picture>

media 属性允许你提供一个用于给用户代理作为选择 <source> 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 false，那么这个 <source> 元素会被跳过。
type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

内容协商：

请求头accept：image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

响应头content-type：image/webp

<picture> 的常见使用场景：

艺术指导 (Art direction) —— 针对不同 media 条件裁剪或修改图像
遇到所有浏览器都不支持的特定格式时，提供不同的图像格式

如果要为高 DPI (Retina) 显示提供更高像素密度的图像版本，请在 <img> 元素上使用 srcset 。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要您编写明确的 media 条件。

在子 <img> 元素上而不是 <picture> 元素上，可以使用 object-position 属性调整元素框架内图像的位置，用 object-fit 属性控制图片如何调整大小来适应框架。

如下爱奇艺图片格式降级方案：

    <picture
      id="//pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg"
      class="video-item-preview-img"
    >
      <source
        alt=""
        title=""
        srcset="
          //pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg?caplist=jpg,webp,avif,
          //pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg?caplist=jpg,webp,avif 2x
        "
        type="image/avif"
      />
      <source
        alt=""
        title=""
        srcset="
          //pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg?caplist=jpg,webp,
          //pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg?caplist=jpg,webp 2x
        "
        type="image/webp"
      />
      <img
        src="//pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg"
        srcset="
          //pic1.iqiyipic.com/image/20221124/c1/e3/v_164824027_m_601_m6_260_360.jpg
        "
        alt="神奇动物在哪里3"
        title=""
        rseat="712211_dianying_image2"
        data-pb=""
        class="i71-img"
      />
    </picture>

页面性能优化其一是考虑图片优化，图片优化手段缩略图、压缩、base64、域名分散处理等，其中压缩就要考虑图片质量及压缩率问题，所以会考虑不同图片格式

WebP 可以对网络上的图片进行更加高性能的无损和有损压缩，可以更显著地压缩网页上照片的大小，使网站加载速度比以前更快。同时WebP也支持透明图层和多图片动图，它是透明PNG图片和GIF动图绝佳的替代方案。
AVIF (AV1 Image File Format，AV1图像文件格式)用于将AV1压缩的图片或图片序列存储为HEIF文件格式。像WebP一样，AVIF 也支持透明图片和多图片动图。因此也是PNG图片和GIF动图的替代方案。

在保证相同的图片质量的前提下，WebP的图片大小平均减少了27%；AVIF则在此基础上进一步减少了20%的大小，并且能够在较低的质量水平下，保证图片的视觉质量。

如果Accept Header中包含image/avif，这表示它支持AVIF格式。
如果Accept Header包含 image/ webp，这表示它支持 WebP 格式。

所以就压缩率而言，首选avif，其次webp，若是png、jpg、jpeg格式的图片首选jpg（压缩后体积更小），其次考虑图片压缩：降低质量或缩小尺寸。

apng：gif像素过渡不圆滑一般会有锯齿，apng也是做动图的新格式。

猜你喜欢