简单优化，极致速度：掌握 WebP的使用要点

WebP 是什么?

网页使用的图片主流格式有JPG、PNG、GIF、SVG...等等，碍于图片品质与大小的关係，有时候图片档还是很难压缩，因此Google于2010年公布了WebP的这项图片格式。

WebP是一种图片档案格式，结合了失真与无失真压缩技术，旨在减小图片档案的大小、提升在网路上的传输效率，同时保持与JPG与PNG等格式相优的图片品质。

档案小:根据维基百科的资料显示，WebP的档案大小比PNG档少了45%，即使PNG档已经使用压缩工具进行压缩处理过，WebP仍可以减少28%的档案大小。可动态与透明化:可以拥有PNG的透明背景图片效果以及GIF的动态图片效果支援度:2024/1/19的Can I Use显示已经有 96.41% 的支援度，但是在较旧版的ios Safari 13.7还是没有支援

如何在使用 WebP 格式的同时，又能确保兼容性？

1.使用 <img> element时 : < picture > 和 < source >

推荐指数:⭐⭐⭐⭐⭐
原因:html WebP fallback最佳利器

picture element支援度:Can I Use)

<picture>的介绍可以看这篇
透过<picture>元素，您可以在<source>中使用 WebP 格式的图片。如果浏览器不支援，则会回退至最后的 <img>作为替代方案。

<picture>  <source srcset="https://www.gstatic.com/webp/gallery/1.sm.webp" type="image/webp">  <img src="https://www.gstatic.com/webp/gallery/1.jpg"></picture>

2.使用background-image时 : @supports

推荐指数:⭐⭐⭐⭐⭐
原因:@supports 的普及，它不仅在图片浏览器支援度判断方面更为广泛，甚至在其他判断情境中也得到了广泛应用

@supports支援度:Can I Use)

@supports 判断浏览器是否支援，若支援则使用新的 WebP 图片设定，若不支援则回退至原本的图片

<!-- html --><div class="backgroundImage supports"></div>

<!-- css -->/* Using the CSS nesting syntax */.backgroundImage {  width: 320px;  height: 214px;  display: block;  background-size: contain;  background-position: center;  background-repeat: no-repeat;  background-image: url("https://www.gstatic.com/webp/gallery/1.jpg");  &.supports {    @supports (      background-image: url("https://www.gstatic.com/webp/gallery/1.sm.webp")    ) {      background-image: url("https://www.gstatic.com/webp/gallery/1.sm.webp");    }  } }

3.使用background-image时 : image-set() 和 type()

推荐指数:⭐⭐⭐
原因:2023年较少看到image-set用法，且支援度较低

image-set()支援度:Can I Use)

使用 image-set 可以根据浏览器是否支援 WebP 图片，若支援则呈现 WebP，否则呈现设定的另一浏览器支援的格式。然而，考虑到浏览器可能不支援 image-set，建议在原始的图片背景设定中补充一个作为fallback的选项

<!-- html --><div class="backgroundImage supports"></div>

<!-- css -->/* Using the CSS nesting syntax */.backgroundImage {  width: 320px;  height: 214px;  display: block;  background-size: contain;  background-position: center;  background-repeat: no-repeat;  background-image: url("https://www.gstatic.com/webp/gallery/1.jpg");  &.imageSet {    background-image: image-set(      url("https://www.gstatic.com/webp/gallery/1.sm.webp") type("image/webp"),      url("https://www.gstatic.com/webp/gallery/1.jpg") type("image/jpeg")    );  }}

codepen範例

https://codepen.io/wasfzuig/pen/KKEqrOR

参考来源

https://www.reddit.com/r/webdev/comments/16ihafv/can_i_in_2023_finally_start_using_webp_images/https://ascend-agency.medium.com/using-webp-images-with-a-fallback-source-for-incompatible-browsers-193caf5b9a3chttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/picturehttps://developer.mozilla.org/en-US/docs/Web/CSS/@supportshttps://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set