h5学习笔记：picture标签和webp组合

在日常网站的图片使用中，webp格式的优点要比同尺寸的jpg和png小一些，可以提升网站加载的速度。不过在大规模使用还是少见，主要还是兼容性的问题比较突出。前一段时间好奇查看了B站中的M站使用的图片格式，发现了B站采取picture标签呈现图片。什么是picture标签？我们查看一下文档的解释。

1. 什么是picture标签？

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

通过此标签可以在一定的情况下优先匹配指定方式。也就是说在浏览器支撑的情况下，会优先加载指定的图片。我们查看B站的图片的节点看如下的一段代码。

<picture>
<source type="image/webp" srcset="//i0.hdslb.com/bfs/archive/fdb6df296c9eac0804632354225f9fb2ff086138.png@480w_270h_1c.webp" onload="" class="pic"> 
<img src="//i0.hdslb.com/bfs/archive/fdb6df296c9eac0804632354225f9fb2ff086138.png@480w_270h_1c" alt="【全站首发】【原神x风物之诗琴】卡农" onload="" class="m-bfs-pic pic">
</picture>

该结构会在支撑的程度下优先加载webp格式，这样网站载入的速度就会加快一些。我们查看一下图片大小和尺寸就能发现其中的奥秘。

对比大小说明采用说明。
png的尺寸是480x270，大小是217Kb

webp的尺寸是480x270，大小是18.2kb

相比大小足足是12倍之多，由此可见这样是优势是多么明显。但webp格式不是万能药，并不是所有的图片都能压缩到10几倍，至少在一定程度下照顾了一些老的浏览器，同时在一些支持的浏览器提升了加载速度。这标签也发挥了一定作用和功效。
不过随着浏览器的升级和同步，这种格式会支持的更加广泛，或者会有更好格式取代webp出现。就比如前一段时间谷歌安卓12又支持了AVIF的图片格式，文章中提及到该格式要比jpg和png，webp更好的体验和效果。然而这个要普及就看看联盟推动的行业标准了。