以下一代 WebP 格式提供图像 - HTML

WebP 是一种现代化的图像格式，由 Google 于 2010 年推出。它旨在减小图像文件的大小，同时保持较高的质量，从而提高网页的加载速度。本文将向程序员介绍如何在 HTML 中使用 WebP 格式的图像，并分享一些相关的技巧和最佳实践。

1. WebP 格式的优势

• 更小的文件大小：WebP 使用了先进的压缩算法，可以将图像文件的大小减小到 JPEG 或 PNG 的约 30% 至 80%。
• 高质量图像：尽管文件大小较小，WebP 仍能保持较高的图像质量，避免了传统图像格式的模糊或失真问题。
• 透明度支持：与 PNG 格式类似，WebP 也支持图像的透明度，使其成为替代 PNG 图像的理想选择。
• 动画支持：WebP 还可以创建动画图像，类似于 GIF 格式，但具有更小的文件大小和更高的图像质量。

2. 在 HTML 中使用 WebP 格式图像

为了在 HTML 中使用 WebP 格式的图像，您可以使用 <picture> 元素和 <source> 元素来提供图像的不同格式和源。下面是一个简单的示例：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="WebP Image">
</picture>

在上面的示例中，我们首先指定了一张 WebP 格式的图像（image.webp），然后指定了一张 JPEG 格式的图像（image.jpg）。如果浏览器支持 WebP 格式，它将加载 WebP 图像；否则，它将加载 JPEG 图像。<img> 元素中的 alt 属性指定了当图像无法加载时显示的替代文本。

3. 检测浏览器是否支持 WebP 格式

为了优化用户体验，您可以在网页中检测浏览器是否支持 WebP 格式，然后相应地加载图像。下面是一个使用 JavaScript 进行此检测的示例：

<script>
  var webP = new Image();
  webP.onload = webP.onerror = function() {
    if (webP.height == 2) {
      document.documentElement.classList.add('webp');
    } else {
      document.documentElement.classList.add('no-webp');
    }
  };
  webP.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IC4AAAADAQAE'+
             'QCCw7Q3AA/veAABAAElAAAAAAAAAACAAACaGgAAAAAAAAAAAAAAAAA'+
             'AAAAAABAAAAAAAAAAAAAAAAAAAAGQAABAAAAABkZGQAAAAAADw/eHBh'+
             'Y2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3pr'+
             'YzlkIj8+CjxpbnRlbnQgeSR0PSI4Mi4xMDA3IiB5PV'+
             'C0iMTEwLjg0NjkiIHg9IjEyMi4yMjg0Ij4K'+
             'CTwhLS0AAAAAAAAAAAB'+
             'AAAAAAAAAAAAAAAAAAAAAAAAAAAAP/+AIUECg4SFhoeIiYq'+
             'LkpaDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqqusra'+
             '6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMn'+
             'Ky8zNzs/Q0dLT1NXW19j'+
             'Z2uLj5OXm5+jp6v'+
             'r7OTz9PX29/j5+gEAAf'+
             'z9/v8AACAfAAAAAQAAAgEAAgAA+'+
             'AAAAP//AAAA//MzAAz/AAD'+
             '/AAAAfwAAAgAAAAAAAAB'+
             'AAAAAAAAAAAAAAAAAAAAAAD//wAA//8AALwAAC'},
</script>

在上述示例中，我们创建了一个新的 Image 对象，并将其 src 属性设置为有效的 WebP 图像数据。如果浏览器支持 WebP 格式，图像将成功加载并触发 onload 事件。我们那里通过检测图像的高度是否为 2 来确定加载是否成功。如果加载成功，我们在根元素的 classList 中添加 "webp" 类；否则，我们添加 "no-webp" 类。

通过在 CSS 文件中定义 .webp 类，您可以为支持 WebP 格式的浏览器提供特定的样式或图像。类似地，.no-webp 类可以用于处理不支持 WebP 格式的浏览器。

4. 总结

WebP 是一种先进的图像格式，通过减小图像文件的大小来提高网页的加载速度。通过使用 <picture> 元素和 <source> 元素，以及检测浏览器是否支持 WebP 格式，您可以在 HTML 中灵活地使用 WebP 格式的图像。

这里介绍的只是 WebP 的一小部分功能和应用，您可以深入学习和探索更多关于 WebP 的资料，并根据实际需求应用到自己的项目中。

参考资料：

• Google Developers - Using WebP Images
• Can I use... - WebP