使用 webP 图像可以更快地加载网页

您是否想过为什么您的网站加载速度如此之慢？这可能是因为您使用的图片太大。常见的图片类型包括 PNG、JPG、SVG 和 GIF。现在是时候拥抱现代图片格式了！例如：
JPEG 2000、JPEG XR 和 WebP。本文将重点介绍 WebP 图片格式。

什么是 WEBP？

WebP 是 Google 于 2010 年开发的一种强大的图像压缩技术。它专注于使用先进的优化技术来缩减文件大小，并支持透明度甚至动画效果。WebP 格式可以将您的图片压缩到比 JPG 图片小两倍，这无疑会加快图片加载速度，从而提升网站性能。请看这张图片

此 png 图像大小为 482.1KB，
jpeg 格式大小为 55.4KB
转换为 webP 后，大小变为 43KB，质量仍然保持不变

如何使用 WEBP

首先，你需要将图片转换为 WebP 格式。
任何常见的文件格式都可以转换为 WebP 格式，并且保持其原始质量（无损压缩）。互联网上有很多在线图片格式化工具（例如这个和这个）。
然而，尽管 WebP 格式很棒，但并非所有浏览器都支持。点击此处查看 WebP 的支持情况。
这不是什么大问题，因为我们仍然可以使用这种格式，并且通过回退机制，在不支持的浏览器上不会损坏图片！

使用带有回退功能的 webP

HTML 有两个图像媒体元素（img和picture）。
使用picture元素，你可以加载零到多个源元素和一个img元素。这是如何实现的？浏览器会考虑每个图片的 URL 。元素，并从中选择最佳匹配。如果浏览器都不支持这两个元素，或者浏览器根本不支持该元素，则选择标签中的图像。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

如果浏览器不支持webP图片格式，则加载JPG图片。

为了避免笨拙（我觉得这代码行数太多了，哈哈），你可以创建一个组件来实现这个功能。使用 ReactJS，

const ImageWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};

所以，每当你想在代码中添加图片时，都可以轻松导入ImageWithFallback组件并将其用作图片标签。保持代码整洁 :)

<ImageWithFallback
  src="/images/my-image.webp"
  fallback="/images/my-image.png"
  alt="My beautiful portrait"
/>

总之，您的网站速度是一个非常重要的因素，使用 webP 图像格式可以帮助您实现更快的加载速度和同等良好的质量。