admin
共享PronHub Web前端技术
学习PronHub和web前端！绘画技术实现了
学习PronHub和web前端！获取Fetch下载进度
文本已获得转载许可
在网站开发中，展示照片无疑使用img标签。
可你有了解过 <picture> 标签吗？日前，在P站的Web前端技术分享中，技术负责人对 <picture> 标签青睐有加，认为它减少了开发量。
作为前端工程师，必须紧跟技术前进的方向，一起来了解 <picture> 标签。
<picture>是什么
<picture> 是 HTML5 中的一个新元素，它通过包含零个或多个 <source> 元素和一个 <img> 元素，来为不同的场景提供图像。
也就是说，<picture>也是一个展示图片的标签，但是通过内嵌的标签，能实现更多功能。
它的典型代码结构如下：
picture 标签
单个 <picture> 表现为内联元素（inline）。根据规范说明，<picture> 期望内嵌 <source> 和 <img> 这两种标签。
source 标签
source 标签具有以下属性：
- srcset：定义要显示图像的 url，类似于 img 上的 src 属性
- media：接受有效的媒体查询，和 CSS 中的媒体查询语法一致
- sizes：接受宽度描述，类似 CSS 中的 width 定义，但实际上要灵活的多，不只是能定义 sizes="100vw"，还可以结合媒体查询定义一套范围 sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw)"
- type：定义 MIME 类型
当能匹配到 source 中的某项时，则 picture 会显示 source 的内容。
img 标签
<picture> 内的 <img> 标签是起到一个回调的作用。即当浏览器不能匹配 <source> 中的任何一项时候，则使用 <img> 内容显示。
<picture> 应用场景
作为前端，我们熟悉响应式设计，即根据不同的屏幕大小、分辨率、显示终端等，实现不同的布局方案。
可是，这里存在瑕疵。假如移动端和 PC 端实现了响应式设计，图片的尺寸会根据设备来改变。但是，图片内容其实还是同一个资源。
如果我们需要实现响应式地加载图片资源，即不同场景使用不同图片 ——
可能 PC 端使用高清图片，手机端为了节省浏览使用低清晰度图片，在以往就需要 JavaScript 的参与。
为了更好地实现响应式设计，HTML5 中的<picture>标签，可以通过 HTML 来实现实现不同的屏幕大小、分辨率、终端等加载不同的图片资源。
P站的技术分享特意提到这个标签，这足以证明他们通过这种响应式图片加载，能节省更多的流量来服务大众。
代码展示
在浏览器支持 webp 格式时候加载 webp 图片，否则使用 png 图片，已到达节省流量的目的：
页面尺寸大于等于 45em 时候使用 large.jpg，大于等于 32 em 时候使用 mid.jpg，都不匹配则使用 ：
结语
以上就是 <picture> 标签的技术分享，希望对大家有帮助。
至于P站是否真的应用了 <picture> 标签，奈何它的代码没有在 Github 开源，无法求证。但是，从 <picture> 所体现出来的能力，确实对图片的响应式加载有很大帮助。
你的点赞收藏转发，都是我创作的动力。