如何创建和提供 WebP 图像以加快网站速度

作者选择了 Apache 软件基金会作为 写给捐款计划的一部分接受捐款。

介绍

[WebP] (https://developers.google.com/speed/webp)是谷歌于2010年基于VP8视频格式开发的开放式图像格式. 此后,使用WebP格式的网站和移动应用程序数量快速增长. Google Chrome和Opera均在本土支持WebP格式,由于这些浏览器约占网络流量的74%,如果这些网站使用WebP图像,用户可以更快地访问网站. 还有一些在Firefox中实施WebP的计划.

WebP格式支持失落和无损图像压缩,包括动画. 它比网络上使用的其他图像格式的主要优势在于它的文件尺寸要小得多,这使得网页加载速度快并减少了带宽使用. 使用WebP图像可以导致页面速度的[可大小增 (https://blog.chromium.org/2014/03/webp-improves-while-rolling-out-across.html). 如果您的应用程序或网站遇到性能问题或流量增加,转换您的图像可能有助于优化页面性能.

在本教程中,您将使用命令行工具cwebp将图像转换为WebP格式,创建脚本,将观看并转换图像到特定目录中。

前提条件

使用 WebP 图像不需要特定的分布,但我们将展示如何在 Ubuntu 16.04 和 CentOS 7 上使用相关软件。

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

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

在Ubuntu 16.04上,您可以通过键入以下方式安装cwebp,一个将图像压缩到.webp格式的实用程序:

1sudo apt-get update
2sudo apt-get install webp

在 CentOS 7 上,类型:

1sudo yum install libwebp-tools

要在Apache Web 根中创建一个名为):

1sudo mkdir /var/www/html/webp

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

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

要测试命令,您可以使用wget下载免费的JPEG和PNG图像,此工具默认安装在Ubuntu 16.04上;如果您正在使用CentOS 7,您可以通过键入来安装它:

1sudo yum install wget

接下来,使用以下命令下载测试图像:

1wget -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
2wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
3wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

<$>[注意] 注意 :这些图像可在Creative Commons [Attribution-ShareAlike 许可证]下使用和再分发(https://creativecommons.org/licenses/by-sa/4.0/deed.en)和 Public Domain Dedication。

您在下一步的大部分工作将位于 /var/www/html/webp 目录中,您可以通过键入移动到:

1cd /var/www/html/webp

有了测试图像,并安装了Apache Web 服务器mod_rewrite和cwebp,您已经准备好转换图像。

步骤 2 — 用 cwebp 压缩图像文件

向网站访问者提供 .webp 图像需要 .webp 图像文件版本. 在此步骤中,您将使用 cwebp 将 JPEG 和 PNG 图像转换为 .webp 格式。

1cwebp image.jpg -o image.webp

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

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

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

将质量因子 -q 设置为 100 会保留 100% 的图像质量;如果不指定,默认值为 75。

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

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

1[secondary_label Output]
2-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
3-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
4-rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg
5-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

ls命令的输出显示image1.jpg的大小为7.4M,而image1.webp的大小为3.9M。

要在压缩过程中保存完整的原始图像数据,您可以使用不损失选项而不是-q。 这是维持 PNG 图像质量的最佳选项。

1cwebp -lossless logo.png -o logo.webp

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

1ls -lh logo.png logo.webp

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

在 /var/www/html/webp 目录中转换的 WebP 图像大约比其 JPEG 和 PNG 对象小 50%。在实践中,压缩率可能因某些因素而异:原始图像的压缩率,文件格式,转换类型(丢失或无损),质量百分比和您的操作系统。当您转换更多的图像时,您可能会看到与这些因素相关的转换率的变化。

步骤 3 — 在目录中转换 JPEG 和 PNG 图像

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

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

1nano ~/webp-convert.sh

剧本的第一行将是这样的:

1[label ~/webp-convert.sh]
2find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

该线有以下组成部分:

  • [`发现' (https://andsky.com/tech/tutorials/how-to-use-find-and-locate-to-search-for-files-on-a-linux-vps): 此命令将在指定的目录中搜索文件 。
  • 联合国 ` 1':此位置参数指定了从命令行取自的图像目录的路径。 最终,它使得目录的位置较少依赖于脚本的位置.
  • " 类型f " : 此选项告诉 查找 只查找普通文件 。
  • 姓名 ' : 此测试将文件名匹配到指定的模式 。 案件不敏感-取名 ' 测试显示查找 ' 任何以.jpg' (.jpg')或.jpeg' (`.jpeg')结尾的文件名。
  • **联合国 -o ' : 此逻辑运算符指示) ** 或** 第二个(-iname ' * .jpeg'')。
  • ()':这些试验周围的括号,连同-和'操作员,确保始终执行第一个试验(即`-类型f')。 .

脚本的第二行将将图像转换为 WebP 使用 -exec 参数. 该参数的通用语法是 -exec 命令 {} \;. 字符串 {} 被命令迭代的每个文件所取代,而 ; 表示 find 命令结束的地方:

1[label ~/webp-convert.sh]
2find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
3-exec bash -c 'commands' {} \;

在这种情况下,exec参数需要多个命令来搜索和转换图像:

  • bash:这个命令将执行一个小脚本,如果它不存在的话将成为文件的 .webp 版本. 这个脚本将通过 -c 选项作为字符串被传输到 bash。

命令中的脚本将执行以下操作:

  • 创建一个 webp_path 变量 * 测试文件的 .webp 版本是否存在 * 创建文件如果它不存在。

最小的剧本看起来像这样:

1[label ~/webp-convert.sh]
2...
3webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
4if [ ! -f "$webp_path" ]; then 
5  cwebp -quiet -q 90 "$0" -o "$webp_path";
6fi;

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

  • webp-path: 此变量将使用[sed](https://andsky.com/tech/tutorials/the-basics-of-using-the-sed-stream-editor-to-manipulate-text-in-linux)和由bash'命令的匹配文件名生成,其表示单位是位置参数0'。 a_ here string_ (\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  • 如果[!-f "$webp_path"]: 这个测试将确定一个名为 ) 。
  • 网络': 如果文件不存在, 此命令会创建文件, 使用 q` 选项, 以免打印输出 。 .

有了这个更小的脚本,而不是命令位置,转换JPEG图像的完整脚本现在将看起来像这样:

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

要将 PNG 图像转换为 WebP,我们将采取相同的方法,有两种差异:首先,在找到命令中的iname模式将是* .png。

完成的剧本看起来像这样:

 1[label ~/webp-convert.sh]
 2#!/bin/bash
 3
 4# converting JPEG images
 5find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
 6-exec bash -c '
 7webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
 8if [ ! -f "$webp_path" ]; then 
 9  cwebp -quiet -q 90 "$0" -o "$webp_path";
10fi;' {} \;
11
12# converting PNG images
13find $1 -type f -and -iname "*.png" \
14-exec bash -c '
15webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
16if [ ! -f "$webp_path" ]; then 
17  cwebp -quiet -lossless "$0" -o "$webp_path";
18fi;' {} \;

保存文件并离开编辑器。

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

1chmod a+x ~/webp-convert.sh

在图像目录中运行脚本:

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

没有发生什么! 这是因为我们已经在步骤 2 转换了这些图像,前进,当我们添加新文件或删除.webp 版本时,webp 转换脚本将转换图像。

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

删除所有.webp 图像后,重新运行脚本,以确保它工作:

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

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

1ls -lh /var/www/html/webp

1[secondary_label Output]
2-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
3-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
4-rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg
5-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
6-rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png
7-rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 logo.webp

本步骤中的脚本是您网站中使用 WebP 图像的基础,因为您将需要 WebP 格式的所有图像的工作版本,以便为访问者提供服务。

步骤 4 — 在目录中查看图像文件

在此步骤中,我们将创建一个新的脚本,以查看我们的图像目录的更改,并自动转换新创建的图像。

创建一个可监视我们图像目录的脚本,可以用所写的)。 为了解决这个问题,并避免手动运行脚本,我们将在另一个脚本中添加_watchers_. 观察者观看指定的文件或目录进行修改,并针对这些修改运行命令.

inotifywait命令将在我们的脚本中设置观察员,该命令是inotify-tools包的一部分,这是一组命令行工具,为无tify内核子系统提供一个简单的界面。

1sudo apt-get install inotify-tools

在 CentOS 7 中,在 EPEL 存储库中可使用inotify-tools包,使用以下命令安装 EPEL 存储和inotify-tools包:

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

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

1nano ~/webp-watchers.sh

剧本中的第一行将看起来像这样:

1[label ~/webp-watchers.sh]
2inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

此行包括以下元素:

  • `激发等待': 此命令监视对某个目录的更改 。
  • 联合国 -q ': 这个选项将告诉inotifywait`安静,不产生大量产出。
  • 联合国 -m': 这个选项将告诉inotify Wait`在接到单一事件后无限期地运行,而不是退出。
  • 联合国 `-r': 此选项将循环设置监视器, 监视指定的目录及其所有子目录 。
  • 格式': 此选项告诉)、移动-从'和移动-到'(在移动文件时触发)和删除'(在删除文件时触发)。
  • 联合国 ` 1' : 此位置参数为已更改文件的路径 。 .

接下来,让我们添加一个grep命令来确定我们的文件是否是JPEG或PNG图像。-i选项会告诉grep忽略案例,-E会指定grep应该使用扩展的正规表达式,--line-buffered会告诉grep将匹配的线路传递到while循环:

1[label ~/webp-watchers.sh]
2inotifywait -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

接下来,我们将用读命令构建一个同时循环。读将处理inotifywait检测到的事件,将其分配给一个名为$操作的变量,并将处理的文件路径分配给一个名为$path的变量:

1[label ~/webp-watchers.sh]
2...
3| while read operation path; do
4  # commands
5done;

让我们将这个循环与我们的剧本的其余部分结合起来:

1[label ~/webp-watchers.sh]
2inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
3| grep -i -E '\.(jpe?g|png)$' --line-buffered \
4| while read operation path; do
5  # commands
6done;

在而循环检查了事件后,循环中的命令将根据结果执行以下操作:

  • 如果创建或移动到目标目录时创建一个新的 WebP 文件 * 如果相关的图像文件已删除或从目标目录中移动,请删除 WebP 文件。

循环内部有三个主要部分.一个名为webp_path的变量将持有对象图像的.webp版本的路径:

1[label ~/webp-watchers.sh]
2...
3webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

接下来,脚本将测试发生了哪个事件:

1[label ~/webp-watchers.sh]
2...
3if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
4  # commands to be executed if the file is moved or deleted
5elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
6  # commands to be executed if a new file is created
7fi;

如果该文件已被移动或删除,脚本将检查是否存在.webp版本. 如果是,脚本将使用rm删除它:

1[label ~/webp-watchers.sh]
2...
3if [ -f "$webp_path" ]; then
4  $(rm -f "$webp_path");
5fi;

对于新创建的文件,压缩将如下:

  • 如果匹配的文件是PNG图像,则脚本将使用无损压缩。

让我们在脚本中添加cwebp命令,这些命令将完成此工作:

1[label ~/webp-watchers.sh]
2...
3if [ $(grep -i '\.png$' <<< "$path") ]; then
4  $(cwebp -quiet -lossless "$path" -o "$webp_path");
5else
6  $(cwebp -quiet -q 90 "$path" -o "$webp_path");
7fi;

完整的「webp-watchers.sh」文件将看起来如下:

 1[label ~/webp-watchers.sh]
 2#!/bin/bash
 3echo "Setting up watches.";
 4
 5# watch for any created, moved, or deleted image files
 6inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
 7| grep -i -E '\.(jpe?g|png)$' --line-buffered \
 8| while read operation path; do
 9  webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
10  if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
11    if [ -f "$webp_path" ]; then
12      $(rm -f "$webp_path");
13    fi;
14  elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
15     if [ $(grep -i '\.png$' <<< "$path") ]; then
16       $(cwebp -quiet -lossless "$path" -o "$webp_path");
17     else
18       $(cwebp -quiet -q 90 "$path" -o "$webp_path");
19     fi;
20  fi;
21done;

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

1chmod a+x ~/webp-watchers.sh

让我们在背景中运行这个脚本 /var/www/html/webp 目录,使用 &. 让我们还将标准输出和标准错误重定向到 ~/output.log,以便在可用位置存储输出:

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

此时,您已将 /var/www/html/webp 中的 JPEG 和 PNG 文件转换为 WebP 格式,并设置观察器以使用 webp-watchers.sh 脚本来完成此工作。

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

在此步骤中,我们将解释如何用 HTML 元素服务 WebP 图像. 在此时刻,我们可以在 /var/www/html/webp 目录中测试每个 JPEG 和 PNG 图像的 .webp 版本. 我们现在可以为使用 HTML5 元素 (`') 或 Apache 模块的浏览器提供支持。

如果您的浏览器支持 WebP 格式,它将下载文件的 .webp 版本,而不是原始的版本,导致网页的服务更快。

<image>元素是一个包含<source>和<img>元素的容器,指向特定的文件。如果我们使用<source>指向.webp图像,浏览器会看到它是否可以处理它;否则,它会回到<img>元素中的src属性中指定的图像文件。

让我们从我们的 /var/www/html/webp 目录中使用 logo.png 文件,我们将其转换为 logo.webp,作为一个例子,我们可以使用以下 HTML 代码向任何支持 WebP 格式的浏览器显示 logo.webp 和 logo.png 向任何不支持 WebP 或 ` 元素的浏览器。

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

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

将下列代码添加到网页中,以在使用<图片>元素的支持浏览器中显示logo.webp:

1[label /var/www/html/webp/picture.html]
2<picture>
3  <source srcset="logo.webp" type="image/webp">
4  <img src="logo.png" alt="Site Logo">
5</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 文件:

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

ifModule指令将测试是否有mod_rewrite;如果有,则可以通过使用RewriteEngine On激活。

1[label /var/www/html/webp/.htaccess]
2<ifModule mod_rewrite.c>
3  RewriteEngine On 
4  # further directives
5</IfModule>

网页服务器将进行几个测试,以确定何时向用户提供.webp图像。当浏览器提出请求时,它包括一个标题,向服务器显示浏览器能够处理什么。在WebP的情况下,浏览器将发送一个包含image/webp的Accept标题。我们将检查浏览器是否使用RewriteCond发送了该标题,该标题规定了要执行RewriteRule的标准:

1[label /var/www/html/webp/.htaccess]
2...
3RewriteCond %{HTTP_ACCEPT} image/webp

除了 JPEG 和 PNG 图像外,一切都应该被过滤。 再次使用),以匹配所请求的 URI:

1[label /var/www/html/webp/.htaccess]
2...
3RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

(?i)修改器将使匹配案例不敏感。

若要檢查檔案的「.webp」版本是否存在,請再次使用「RewriteCond」如下:

1[label /var/www/html/webp/.htaccess]
2...
3RewriteCond %{DOCUMENT_ROOT}%1.webp -f

最后,如果所有之前的条件都满足了,‘RewriteRule’ 会将所请求的 JPEG 或 PNG 文件重定向到其相关的 WebP 文件中。 请注意,这将使用‘-R’ 旗帜 redirect,而不是 rewrite URI。 重定向和重定向之间的区别在于,服务器将为重新编写的 URI 提供服务,而不会告诉浏览器。 例如, URI 会显示文件扩展为 .png,但实际上它将是一个 .webp 文件。 添加 RewriteRule 到文件:

1[label /var/www/html/webp/.htaccess]
2...
3RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

此时,.htaccess'文件中的mod_rew'部分已经完成。 但是,如果在您的服务器和客户端之间有一个中间缓存服务器会怎样? 它可以向最终用户提供错误的版本。 因此,有必要检查是否启用了 " mod_headers " ,以便发送 " Vary:接受 " 信头。 " Vary " 标题向缓存服务器(类似于代理服务器)表示,文档的内容类型因请求文档的浏览器的能力而异。 此外,将根据请求中的 " 接受 " 标题生成答复。 附有不同 " 接受 " 标题的请求可能会得到不同的答复。 此标题很重要, 因为它防止缓存的 WebP 图像被服务到非支持浏览器 :

1[label /var/www/html/webp/.htaccess]
2...
3<IfModule mod_headers.c>
4  Header append Vary Accept env=REDIRECT_accept
5</IfModule>

最后,在.htaccess 文件的末尾,将.webp 图像的 MIME 类型设置为 'image/webp' 使用 'AddType' 指令。

1[label /var/www/html/webp/.htaccess]
2...
3AddType image/webp .webp

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

 1[label /var/www/html/webp/.htaccess]
 2<ifModule mod_rewrite.c>
 3  RewriteEngine On 
 4  RewriteCond %{HTTP_ACCEPT} image/webp
 5  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
 6  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
 7  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
 8</IfModule>
 9
10<IfModule mod_headers.c>
11  Header append Vary Accept env=REDIRECT_accept
12</IfModule>
13
14AddType image/webp .webp

<$>[注] 注 :您可以将这个 .htaccess 与另一个 .htaccess 文件合并,如果它存在,例如,如果您正在使用 WordPress,您应该复制这个 .htaccess 文件并粘贴到现有文件的** 顶部。

让我们把我们在这个步骤中所做的做法应用到实践中。如果您遵循了前面的步骤中的指示,那么您应该在 /var/www/html/webp 中有 logo.png 和 logo.webp 图像。让我们使用一个简单的 <img> 标签将 logo.png 包含在我们的网页中。 创建一个新的 HTML 文件来测试设置:

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

请在文件中输入以下HTML代码:

1[label /var/www/html/webp/img.html]
2<img src="logo.png" alt="Site Logo">

保存并关闭文件。

当您使用 Chrome 访问网页时,您将注意到所提供的图像是.webp 版本(尝试在新标签中打开图像)。

结论

我们解释了如何使用cwebp来转换文件,以及为用户提供这些图像的两种选项:HTML5的<picture>元素和Apache的mod_rewrite。

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

  • 有关 WebP 格式的功能以及如何使用转换工具的更多信息,请参阅 WebP 文档。 * 有关使用元素的更多细节,请参阅其 MDN 文档。 * 要全面了解如何使用mod_rewrite,请参阅其 文档。

使用 WebP 格式为您的图像将大大减少文件大小,这可以降低带宽使用率,并使页面加载更快,特别是如果您的网站使用大量图像。

Published At
Categories with 技术
Tagged with
comments powered by Disqus