说好的WebP优雅降级，你真的做到位了吗？

前端

2023-04-30 22:17:18

WebP：缩小图片尺寸，提升网站速度和质量

什么是 WebP？

WebP 是一种先进的图片格式，专为提高网站加载速度和图片质量而设计。它由 Google 开发，比传统的图片格式（例如 JPEG）小 20% 到 80%。这意味着更小的图片文件可以更快地传输，从而缩短页面加载时间。

WebP 的优势

体积小： WebP 的体积比 JPEG 小得多，从而提高了网站的加载速度。
质量高： WebP 的质量与 JPEG 相当，甚至在某些情况下更好，可满足高画质的需求。
支持透明度： WebP 支持透明度，适用于设计需要透明背景的图片。
渐进加载： WebP 支持渐进加载，使图片逐步加载，减少用户的等待时间。

浏览器支持

绝大多数主流浏览器都支持 WebP 格式，包括 Chrome、Firefox、Safari、Edge 和 Opera。因此，您的图片可以在广泛的设备和浏览器中得到良好的显示。

实现优雅降级

优雅降级是指在浏览器不支持 WebP 格式时使用其他兼容性更好的图片格式，例如 JPEG 或 PNG，以确保图片可以正常显示。有几种方法可以实现 WebP 的优雅降级：

浏览器嗅探： 检测用户的浏览器类型并根据支持情况加载图片。
标签： 包含多个元素，每个元素指定一个图片格式，浏览器根据其支持情况选择加载。
JavaScript： 使用 JavaScript 检测浏览器是否支持 WebP，并动态加载相应的图片格式。

代码示例：

使用标签实现优雅降级：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.png" alt="图片">
</picture>

使用 JavaScript 实现优雅降级：

function isWebPSupported() {
  return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
}

if (isWebPSupported()) {
  document.getElementById('image').src = 'image.webp';
} else {
  document.getElementById('image').src = 'image.jpg';
}