使用 WebP 图片

Katie Hempenius
Katie Hempenius
X

为什么您应该关注？

WebP 图片比对应的 JPEG 和 PNG 图片要小，通常 缩小了 25–35% 的幅度。这样可以减小网页大小 提高性能。

  • YouTube 发现，改用 WebP 缩略图后，与原来相比，10% 网页加载速度更快。
  • Facebook 体验了 JPEG 文件的大小可缩减 25-35%，PNG 文件的大小可缩减 80%， 改用 WebP 后

WebP 可以很好地替代 JPEG、PNG 和 GIF 图片。此外， WebP 同时提供无损压缩和有损压缩。在无损压缩中，没有数据 会丢失有损压缩会减小文件大小， 降低图片质量

将图片转换为 WebP 格式

用户通常会使用以下方法之一来转换图片 WebP： cwebp 命令行工具 或 Imagemin WebP 插件 (npm 软件包）。 如果您的项目使用 build，Imagemin WebP 插件通常是最佳选择 脚本或构建工具（例如 Webpack 或 Gulp），而 CLI 则是不错的选择。 或者只需要转换一次图片的情况。

将图片转换为 WebP 格式时，可以选择设置各种 压缩设置，但对于大多数人来说，唯一需要做的就是 重要的是质量设置你可以指定质量级别，范围为 0 （最差）到 100（最佳）。这值得您试一试 适合在图片质量和文件大小之间 需求。

使用 cwebp

使用 cwebp 的默认压缩设置转换单个文件：

cwebp images/flower.jpg -o images/flower.webp

使用质量级别 50 转换单个文件：

cwebp -q 50 images/flower.jpg -o images/flower.webp

转换目录中的所有文件：

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

使用 Imagemin

Imagemin WebP 插件可以单独使用，也可以与您最喜欢的构建工具搭配使用 (Webpack/Gulp/Grunt/etc.).这通常需要向 build 脚本或配置文件来创建。 下面举例说明了如何为 Webpack、 Gulp 和 Grunt。

如果您未使用其中任何一种构建工具，则可以单独使用 Imagemin， Node 脚本此脚本将转换 images 目录中的文件， 将其保存在 compressed_images 目录中。

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

提供 WebP 图像

如果您的网站仅支持兼容的 WebP 格式 浏览器，您可以停止朗读。否则 为新版浏览器提供 WebP 格式，为旧版浏览器提供后备图片：

之前： html <img src="flower.jpg" alt="">

之后： html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

通过 <picture>、 <source>, 和 <img> 标记（包括它们之间的相对顺序）， 才能实现这个最终结果。

<picture>

<picture> 标记可为零个或多个 <source> 标记和一个 <img> 标记提供封装容器。

<source>

<source> 标记用于指定媒体资源。

浏览器会使用其支持的格式列在最前面的来源。如果浏览器不支持 <source> 标记中列出的任何格式，就会回退到加载 <img> 标记指定的图片。

<img>

<img> 标记使此代码能够在浏览器上正常运行 不支持 <picture> 标记的代码。 如果浏览器不支持 <picture> 标记，它会 并忽略其不支持的代码。因此，它只能“看到”该 <img src="flower.jpg" alt=""> 标记并加载该图片。

读取 HTTP Accept 标头

如果您拥有支持重写请求的应用后端或网络服务器，则可以读取 HTTP Accept 标头的值，该标头会公布支持哪些备选图片格式：

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

读取此请求标头并根据其内容重写响应有助于简化图片标记。如果来源众多，<picture> 标记可能会很长。以下是可以提供 WebP 替代内容的 Apache mod_rewrite 规则：

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

如果您采用这种方式，则需要设置 HTTP Vary 响应标头，以确保缓存能够了解图片可能会随不同内容类型一起提供：

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

上述重写规则将查找所请求的任何 JPEG 或 PNG 图片的 WebP 版本。如果找到 WebP 替代项，它将使用适当的 Content-Type 标头提供。这样，您就可以在自动 WebP 支持中使用类似于以下内容的图片标记：

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

验证 WebP 使用情况

Lighthouse 可用于验证您网站上的所有图片是否都得到投放 使用 WebP 编写代码运行 Lighthouse 性能评估（Lighthouse > 选项 > 性能），并查看在“新一代”模块中提供图片的效果 格式审核。Lighthouse 会列出未在该地区提供的所有图片， WebP。