如何创建和提供WebP图像以加速您的网站

作为 Write for DOnations 计划的一部分，作者选择了 Apache Software Foundation 来接受捐赠。

介绍

WebP是谷歌在2010年基于VP8视频格式开发的一种开放图像格式。从那时起，使用 WebP 格式的网站和移动应用程序的数量快速增长。 Google Chrome 和 Opera 都原生支持 WebP 格式，由于这些浏览器的网络流量约为 74% of，如果这些网站使用 WebP 图像，用户可以更快地访问网站。还有计划在 Firefox 中实现 WebP。

WebP 格式支持有损和无损图像压缩，包括动画。与网络上使用的其他图像格式相比，它的主要优势是文件大小要小得多，这使得网页加载速度更快并减少了带宽使用。使用 WebP 图像可以导致页面速度大幅提高。如果您的应用程序或网站遇到性能问题或流量增加，转换图像可能有助于优化页面性能。

在本教程中，您将使用命令行工具 cwebp 将图像转换为 WebP 格式，创建将监视和转换特定目录中的图像的脚本。最后，您将探索两种向访问者提供 WebP 图像的方法。

先决条件

使用 WebP 图像不需要特定的发行版，但我们将演示如何在 Ubuntu 16.04 和 CentOS 7 上使用相关软件。要遵循本教程，您将需要：

使用非 root sudo 用户设置的服务器。要设置 Ubuntu 16.04 服务器，您可以按照我们的 Ubuntu 16.04 初始服务器设置指南。如果您想使用 CentOS，您可以使用我们的 CentOS 7 初始服务器设置教程设置 CentOS 7 服务器。
Apache 安装在您的服务器上。如果您使用的是 Ubuntu，您可以按照如何在 Ubuntu 16.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈的第一步。如果您使用的是 CentOS，那么您应该按照如何在 CentOS 7 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈的第一步。请务必调整防火墙设置以允许 HTTP 和 HTTPS 流量。
mod_rewrite 安装在您的服务器上。如果您使用的是 Ubuntu，您可以按照我们关于 How To Rewrite URLs with mod_rewrite for Apache on Ubuntu 16.04 的指南进行操作。在 CentOS 7 mod_rewrite 上默认安装并激活。

第 1 步 — 安装 cwebp 并准备图像目录

在本节中，我们将安装软件来转换图像并创建一个包含图像的目录作为测试措施。

在 Ubuntu 16.04 上，您可以通过键入以下命令安装 cwebp，这是一个将图像压缩为 .webp 格式的实用程序：

sudo apt-get update
sudo apt-get install webp

在 CentOS 7 上，键入：

sudo yum install libwebp-tools

要在 Apache Web 根目录（默认位于 /var/www/html）中创建一个名为 webp 的新图像目录，请键入：

sudo mkdir /var/www/html/webp

将此目录的所有权更改为您的非 root 用户 sammy：

sudo chown sammy: /var/www/html/webp

要测试命令，您可以使用 wget 下载免费的 JPEG 和 PNG 图像。该工具默认安装在 Ubuntu 16.04 上；如果您使用的是 CentOS 7，您可以通过键入以下命令进行安装：

sudo yum install wget

接下来，使用以下命令下载测试图像：

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

注意：这些图像可在知识共享 Attribution-ShareAlike license 和 Public Domain Deedication 下使用和重新分发。

下一步中的大部分工作将在 /var/www/html/webp 目录中，您可以通过键入以下内容移动到该目录：

cd /var/www/html/webp

准备好测试图像并安装 Apache Web 服务器 mod_rewrite 和 cwebp 后，您就可以继续转换图像了。

第 2 步 — 使用 cwebp 压缩图像文件

向站点访问者提供 .webp 图像需要 .webp 版本的图像文件。在此步骤中，您将使用 cwebp 将 JPEG 和 PNG 图像转换为 .webp 格式。该命令的 general 语法如下所示：

cwebp image.jpg -o image.webp

-o 选项指定 WebP 文件的路径。

由于您仍在 /var/www/html/webp 目录中，因此可以运行以下命令将 image1.jpg 转换为 image1.webp 和 image2.jpg 转换为 image2.webp：

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

将品质因数 -q 设置为 100 保留 100% of 的图像质量；如果未指定，则默认值为 75。

接下来，使用 ls 命令检查 JPEG 和 WebP 图像的大小。 -l 选项将显示长列表格式，其中包括文件的大小，-h 选项将确保 ls 打印人类可读的大小：

ls -lh image1.jpg image1.webp image2.jpg image2.webp

Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

ls 命令的输出显示 image1.jpg 的大小为 7.4M，而 image1.webp 的大小为 3.9M。 image2.jpg (16M) 和 image2.webp (7M) 也是如此。这些文件几乎是原始大小的一半！

要在压缩过程中保存完整的原始图像数据，您可以使用 -lossless 选项代替 -q。这是保持 PNG 图像质量的最佳选择。要转换从步骤 1 下载的 PNG 图像，请键入：

cwebp -lossless logo.png -o logo.webp

以下命令显示无损 WebP 图像大小 (60K) 大约是原始 PNG 图像 (116K) 大小的一半：

ls -lh logo.png logo.webp

Output-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

/var/www/html/webp 目录中转换后的 WebP 图像比它们的 JPEG 和 PNG 对应物大 50% s。实际上，压缩率可能因某些因素而异：原始图像的压缩率、文件格式、转换类型（有损或无损）、质量百分比和您的操作系统。随着您转换更多图像，您可能会看到与这些因素相关的转换率变化。

第 3 步 — 转换目录中的 JPEG 和 PNG 图像

编写脚本将通过消除手动转换的工作来简化转换过程。我们现在将编写一个转换脚本来查找 JPEG 文件并将它们转换为 90% 质量的 WebP 格式，同时还将 PNG 文件转换为无损 WebP 图像。

使用 nano 或您喜欢的编辑器，在用户的主目录中创建 webp-convert.sh 脚本：

nano ~/webp-convert.sh

脚本的第一行将如下所示：

~/webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

该行包含以下组件：

find：该命令将搜索指定目录中的文件。
$1：此位置参数指定图像目录的路径，取自命令行。最终，它使目录的位置更少依赖于脚本的位置。
-type f：此选项告诉 find 仅查找常规文件。
-iname：此测试将文件名与指定模式匹配。不区分大小写的 -iname 测试告诉 find 查找以 .jpg (*.jpg) 或 .jpeg ([X128X ])。
-o：此逻辑运算符指示 find 命令列出与第一个 -iname 测试 (-iname "*.jpg") 或第二个匹配的文件（-iname "*.jpeg"）。
()：这些测试周围的括号，以及 -and 运算符，确保第一个测试（即 -type f) 总是被执行。

脚本的第二行将使用 -exec 参数将图像转换为 WebP。此参数的一般语法为 -exec command {} \;。字符串 {} 被命令迭代的每个文件替换，而 ; 告诉 find 命令在哪里结束：

~/webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c 'commands' {} \;

在这种情况下，-exec 参数将需要多个命令来搜索和转换图像：

bash：此命令将执行一个小脚本，如果文件不存在，该脚本将生成文件的 .webp 版本。由于 -c 选项，此脚本将作为字符串传递给 bash。
'commands'：此占位符是生成文件的 .webp 版本的脚本。

'commands' 里面的脚本会做以下事情：

创建一个 webp_path 变量。
测试文件的.webp版本是否存在。
如果文件不存在，则制作该文件。

较小的脚本如下所示：

~/webp-convert.sh

...
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;

这个较小的脚本中的元素包括：

webp_path：此变量将使用 sed 和来自 bash 命令的匹配文件名生成，由位置参数 $0 表示。此处的 字符串 (<<<) 会将这个名称传递给 sed。
if [ ! -f "$webp_path" ]：此测试将使用逻辑 not 运算符 (!) 确定名为 "$webp_path" 的文件是否已经存在。
cwebp：如果文件不存在，此命令将使用 -q 选项创建文件，以免打印输出。

用这个较小的脚本代替 'commands' 占位符，转换 JPEG 图像的完整脚本现在如下所示：

~/webp-convert.sh

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

要将 PNG 图像转换为 WebP，我们将采用相同的方法，但有两个不同之处：首先，find 命令中的 -iname 模式将是 "*.png"。其次，转换命令将使用 -lossless 选项而不是质量 -q 选项。

完成的脚本如下所示：

~/webp-convert.sh

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then 
  cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

保存文件并退出编辑器。

接下来，让我们使用 /var/www/html/webp 目录中的文件来实践 webp-convert.sh 脚本。通过运行以下命令确保脚本文件是可执行的：

chmod a+x ~/webp-convert.sh

在图像目录上运行脚本：

./webp-convert.sh /var/www/html/webp

没啥事儿！那是因为我们已经在步骤 2 中转换了这些图像。展望未来，当我们添加新文件或删除 .webp 版本时，webp-convert 脚本将转换图像。要查看它是如何工作的，请删除我们在步骤 2 中创建的 .webp 文件：

rm /var/www/html/webp/*.webp

删除所有 .webp 图像后，再次运行脚本以确保其正常工作：

./webp-convert.sh /var/www/html/webp

ls 命令将确认脚本已成功转换图像：

ls -lh /var/www/html/webp

Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

此步骤中的脚本是在您的站点中使用 WebP 图像的基础，因为您将需要 WebP 格式的所有图像的工作版本来提供给访问者。下一步将介绍如何自动转换新图像。

第 4 步 — 观看目录中的图像文件

在这一步中，我们将创建一个新脚本来观察我们的图像目录的更改并自动转换新创建的图像。

创建一个监视我们的图像目录的脚本可以解决 webp-convert.sh 脚本编写时的某些问题。例如，此脚本不会识别我们是否重命名了图像。如果我们有一个名为 foo.jpg 的图像，运行 webp-convert.sh，重命名该文件 bar.jpg，然后再次运行 webp-convert.sh，我们将得到重复的 [ X139X] 文件（foo.webp 和 bar.webp）。为了解决这个问题，并避免手动运行脚本，我们将 watchers 添加到另一个脚本中。观察者监视指定文件或目录的更改并运行命令以响应这些更改。

inotifywait 命令将在我们的脚本中设置观察者。该命令是 inotify-tools 软件包的一部分，该软件包是一组命令行工具，为 inotify 内核子系统提供了一个简单的接口。要在 Ubuntu 16.04 上安装它，请键入：

sudo apt-get install inotify-tools

在 CentOS 7 中，EPEL 存储库中提供了 inotify-tools 软件包。使用以下命令安装 EPEL 存储库和 inotify-tools 包：

sudo yum install epel-release
sudo yum install inotify-tools

接下来，使用 nano 在用户的主目录中创建 webp-watchers.sh 脚本：

nano ~/webp-watchers.sh

脚本中的第一行将如下所示：

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

此行包括以下元素：

inotifywait：此命令监视某个目录的更改。
-q：此选项将告诉 inotifywait 保持安静并且不会产生大量输出。
-m：这个选项将告诉inotifywait无限期地运行并且在接收到单个事件后不退出。
-r：此选项将递归设置观察者，观察指定目录及其所有子目录。
--format：此选项告诉 inotifywait 使用事件名称后跟文件路径来监视更改。我们要监控的事件是close_write（文件创建并完全写入磁盘时触发）、moved_from和moved_to（文件移动时触发）、和 delete（删除文件时触发）。
$1：此位置参数保存更改文件的路径。

接下来，让我们添加一个 grep 命令来确定我们的文件是 JPEG 还是 PNG 图像。 -i 选项将告诉 grep 忽略大小写，-E 将指定 grep 应该使用扩展正则表达式，并且 --line-buffered 将告诉grep 将匹配的行传递给 while 循环：

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

接下来，我们将使用 read 命令构建一个 while 循环。 read 将处理 inotifywait 检测到的事件，将其分配给名为 $operation 的变量，并将处理后的文件路径分配给名为 $path 的变量：

~/webp-watchers.sh

...
| while read operation path; do
  # commands
done;

让我们将此循环与脚本的其余部分结合起来：

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  # commands
done;

while 循环检查事件后，循环内的命令将根据结果执行以下操作：

如果创建了新的图像文件或将其移动到目标目录，则创建一个新的 WebP 文件。
如果关联的图像文件已从目标目录中删除或移动，则删除 WebP 文件。

循环内有三个主要部分。一个名为 webp_path 的变量将保存主题图像的 .webp 版本的路径：

~/webp-watchers.sh

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

接下来，脚本将测试发生了哪个事件：

~/webp-watchers.sh

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
  # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
  # commands to be executed if a new file is created
fi;

如果文件已被移动或删除，脚本将检查 .webp 版本是否存在。如果是，脚本将使用 rm 将其删除：

~/webp-watchers.sh

...
if [ -f "$webp_path" ]; then
  $(rm -f "$webp_path");
fi;

对于新创建的文件，压缩将发生如下：

如果匹配的文件是 PNG 图像，脚本将使用无损压缩。
如果不是，脚本将使用带有 -quality 选项的有损压缩。

让我们将执行此工作的 cwebp 命令添加到脚本中：

~/webp-watchers.sh

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
  $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
  $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

完整的 webp-watchers.sh 文件将如下所示：

~/webp-watchers.sh

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
  if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
    if [ -f "$webp_path" ]; then
      $(rm -f "$webp_path");
    fi;
  elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
     if [ $(grep -i '\.png$' <<< "$path") ]; then
       $(cwebp -quiet -lossless "$path" -o "$webp_path");
     else
       $(cwebp -quiet -q 90 "$path" -o "$webp_path");
     fi;
  fi;
done;

保存并关闭文件。不要忘记使其可执行：

chmod a+x ~/webp-watchers.sh

让我们在后台的 /var/www/html/webp 目录上运行这个脚本，使用 &。让我们也将标准输出和标准错误重定向到 ~/output.log，以便将输出存储在一个随时可用的位置：

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

至此，您已将 /var/www/html/webp 中的 JPEG 和 PNG 文件转换为 WebP 格式，并使用 webp-watchers.sh 脚本设置观察者来完成这项工作。现在是时候探索向您的网站访问者提供 WebP 图像的选项了。

第 5 步 — 使用 HTML 元素向访问者提供 WebP 图像

在这一步中，我们将解释如何使用 HTML 元素提供 WebP 图像。此时，/var/www/html/webp 目录中应该有每个测试 JPEG 和 PNG 图像的 .webp 版本。我们现在可以使用 HTML5 元素 (<picture>) 或 mod_rewrite Apache 模块将它们提供给支持浏览器。我们将在这一步中使用 HTML 元素。

<picture> 元素允许您在网页中直接包含图像并定义多个图像源。如果您的浏览器支持 WebP 格式，它将下载文件的 .webp 版本而不是原始版本，从而使网页的服务速度更快。值得一提的是，<picture> 元素在支持 WebP 格式的现代浏览器中得到了很好的支持。

<picture> 元素是一个容器，其中包含指向特定文件的 <source> 和 <img> 元素。如果我们用<source>指向一张.webp图片，浏览器会看能不能处理；否则，它将回退到 <img> 元素的 src 属性中指定的图像文件。

让我们使用 /var/www/html/webp 目录中的 logo.png 文件，我们将其转换为 logo.webp，以 <source> 为例。我们可以使用以下 HTML 代码向任何支持 WebP 格式的浏览器显示 logo.webp，向任何不支持 WebP 或 <picture> 元素的浏览器显示 logo.png。

创建一个位于 /var/www/html/webp/picture.html 的 HTML 文件：

nano /var/www/html/webp/picture.html

将以下代码添加到网页以使用 <picture> 元素向支持的浏览器显示 logo.webp：

/var/www/html/webp/picture.html

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

保存并关闭文件。

要测试一切是否正常，请导航至 http://your_server_ip/webp/picture.html。您应该会看到测试 PNG 图像。

既然您知道如何直接从 HTML 代码提供 .webp 图像，让我们看看如何使用 Apache 的 mod_rewrite 模块自动执行此过程。

第 6 步 — 使用 mod_rewrite 提供 WebP 图像

如果我们想优化我们网站的速度，但是页面很多或者编辑 HTML 代码的时间太少，那么 Apache 的 mod_rewrite 模块可以帮助我们自动化服务 .webp 的过程图像到支持的浏览器。

首先，使用以下命令在 /var/www/html/webp 目录中创建一个 .htaccess 文件：

nano /var/www/html/webp/.htaccess

ifModule 指令将测试 mod_rewrite 是否可用；如果是，可以使用RewriteEngine On激活。将这些指令添加到 .htaccess：

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
  RewriteEngine On 
  # further directives
</IfModule>

Web 服务器将进行多次测试以确定何时向用户提供 .webp 图像。当浏览器发出请求时，它包含一个标头以向服务器指示浏览器能够处理什么。在 WebP 的情况下，浏览器将发送一个包含 image/webp 的 Accept 标头。我们将检查浏览器是否使用 RewriteCond 发送了该标头，它指定了为了执行 RewriteRule 应该匹配的标准：

/var/www/html/webp/.htaccess

...
RewriteCond %{HTTP_ACCEPT} image/webp

除 JPEG 和 PNG 图像外，所有内容都应被过滤掉。再次使用 RewriteCond，添加一个正则表达式（类似于我们在前面部分中使用的）来匹配请求的 URI：

/var/www/html/webp/.htaccess

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

(?i) 修饰符将使匹配不区分大小写。

要检查文件的 .webp 版本是否存在，请再次使用 RewriteCond，如下所示：

/var/www/html/webp/.htaccess

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

最后，如果满足所有先前的条件，RewriteRule 会将请求的 JPEG 或 PNG 文件重定向到其关联的 WebP 文件。请注意，这将使用 -R 标志 重定向 ，而不是重写 URI。重写和重定向之间的区别在于服务器将在不告诉浏览器的情况下提供重写的 URI。例如，URI 将显示文件扩展名是 .png，但它实际上是 .webp 文件。将 RewriteRule 添加到文件中：

/var/www/html/webp/.htaccess

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

至此，.htaccess文件中的mod_rewrite部分就完成了。但是如果在你的服务器和客户端之间有一个中间缓存服务器会发生什么呢？它可能会为最终用户提供错误的版本。这就是为什么值得检查 mod_headers 是否已启用，以便发送 Vary: Accept 标头。 Vary 标头向缓存服务器（如代理服务器）指示文档的内容类型根据请求文档的浏览器的功能而有所不同。此外，将根据请求中的 Accept 标头生成响应。具有不同 Accept 标头的请求可能会得到不同的响应。此标头很重要，因为它可以防止将缓存的 WebP 图像提供给不支持的浏览器：

/var/www/html/webp/.htaccess

...
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

最后，在 .htaccess 文件的末尾，使用 AddType 指令将 .webp 图像的 MIME 类型设置为 image/webp。这将使用正确的 MIME 类型提供图像：

/var/www/html/webp/.htaccess

...
AddType image/webp .webp

这是我们的 .htaccess 文件的最终版本：

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

注意：如果存在的话，你可以将这个.htaccess与另一个.htaccess文件合并。例如，如果您使用 WordPress，则应复制此 .htaccess 文件并将其粘贴到现有文件的 top 处。

让我们将我们在这一步中所做的事情付诸实践。如果您已按照前面步骤中的说明进行操作，则 /var/www/html/webp 中应该有 logo.png 和 logo.webp 图像。让我们使用一个简单的 <img> 标签在我们的网页中包含 logo.png。创建一个新的 HTML 文件来测试设置：

nano /var/www/html/webp/img.html

在文件中输入以下 HTML 代码：

/var/www/html/webp/img.html

<img src="logo.png" alt="Site Logo">

保存并关闭文件。

当您使用 Chrome 通过访问 http://your_server_ip/webp/img.html 访问网页时，您会注意到提供的图像是 .webp 版本（尝试在新选项卡中打开图像）。如果您使用 Firefox，您将自动获得 .png 图像。

结论

在本教程中，我们介绍了使用 WebP 图像的基本技术。我们已经解释了如何使用 cwebp 来转换文件，以及将这些图像提供给用户的两个选项：HTML5 的 <picture> 元素和 Apache 的 mod_rewrite。

为了自定义本教程中的脚本，您可以查看其中一些资源：

要了解更多关于 WebP 格式的特性以及如何使用转换工具，请参阅 WebP 文档。
要查看有关 <picture> 元素用法的更多详细信息，请参阅 MDN 上的文档。
要完全了解如何使用 mod_rewrite，请参阅其文档。

为您的图像使用 WebP 格式将大大减少文件大小。这可以降低带宽使用并加快页面加载速度，尤其是在您的网站使用大量图像的情况下。