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也是做动图的新格式。