使用 WebP 图片

Katie Hempenius
Katie Hempenius

为什么您应该关注?

WebP 图片比 JPEG 和 PNG 图片小,通常文件大小会缩减 25-35%。这有助于缩减页面大小并提高性能。

  • YouTube 发现,改用 WebP 缩略图后,网页加载速度提高了 10%
  • 当 Facebook 改用 WebP 后,JPEG 文件的文件大小缩减了 25-35%,PNG 文件的文件大小缩减了 80%。

WebP 是 JPEG、PNG 和 GIF 图片的绝佳替代品。此外,WebP 还提供无损和有损压缩。在无损压缩中,不会丢失任何数据。有损压缩可缩减文件大小,但可能会降低图片质量。

将图片转换为 WebP 格式

用户通常使用以下方法之一将图片转换为 WebP:cwebp 命令行工具Imagemin WebP 插件 (npm 软件包)。如果您的项目使用构建脚本或构建工具(例如 Webpack 或 Gulp),Imagemin WebP 插件通常是最佳选择;对于简单的项目或只需转换一次图片的情况,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 等)搭配使用。这通常需要向构建脚本或构建工具的配置文件中添加大约 10 行代码。下面的示例展示了如何针对 WebpackGulpGrunt 执行此操作。

如果您不使用上述任一构建工具,可以将 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 标头

如果您的应用后端或 Web 服务器允许您重写请求,您可以读取 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 格式提供的图片。