README

为支持WebP的浏览器自动生成WebP图片，而不是jpeg/png。

此插件可在Wordpress codex（此处）找到。但是，它在这里开发（GitHub上）。

新闻：我已经将供应商文件夹添加到存储库中。要从GitHub安装此插件，您可以简单地下载zip文件并将其解压到插件文件夹中

描述

超过90%的用户正在使用能够显示webp图像的浏览器。然而，在大多数网站上，它们提供jpeg图像，对于给定的质量，jpeg图像的大小通常是webp图像的两倍。多么浪费带宽啊！此插件旨在帮助解决这个问题。WordPress管理员只需付出很少的努力，就可以让他们的网站为支持它的浏览器提供自动生成的webp图像，同时仍然为不支持webp的浏览器提供jpeg和png文件。

图像转换器

此插件使用WebP Convert库将图像转换为webp。 WebP Convert能够使用多种方法转换图像。有“本地”转换方法：imagick、cwebp、vips、gd。如果这些方法在你的主机上都不起作用，则有云替代方案：ewww（付费）或连接到一个已安装WebP Express并启用了“网络服务”功能的Wordpress网站。

“向支持WebP的浏览器提供WebP”的部分。

此插件支持将WebP提供给支持它的浏览器的不同方式

通过将jpeg/png图像路由到相应的webp - 或者如果图像尚未转换，则路由到图像转换器。
通过更改HTML，将图像标签替换为picture标签。缺少的webp会在访问时自动生成。
通过更改HTML，替换图像URL，使其所有内容都指向webp。仅对支持webp的浏览器进行替换。同样，缺少的webp会在访问时自动生成。
与Cache Enabler结合使用时，可以像上面一样实现，但带有页面缓存。
您还可以向所有浏览器提供webp，并添加webpjsjavascript，它为不支持WebP原生的浏览器提供WebP支持。但是，请注意，javascript不支持srcset属性，这就是为什么我没有将该方法添加到插件中（目前还没有）。

此插件实现了此处描述的“WebP按需”解决方案，并基于许多开源库构建（所有由我维护）

WebPConvert：用于将图像转换为webp
WebP Convert Cloud Service：用于Web服务功能
DOM Util for WebP：用于更改HTML功能
Image MimeType Guesser：用于检测图像的MIME类型。
HTAccess Capability Tester：用于在给定目录中使用实时测试测试.htaccess功能。
WebP 转换文件管理器：用于浏览转换（计划功能：触发转换）。

优点

支持 WebP 的浏览器中图像加载时间更快。转换后的图像通常小于一半的尺寸（对于 jpeg），同时保持相同的质量。请注意，对于大多数网站，图像是等待时间最长的部分。
更好的用户体验（无论是从糟糕到一般，还是从良好到出色，这都是一个优点）。
在 Google 搜索中的排名更好（性能被 Google 考虑在内）。
降低带宽消耗——在互联网慢且昂贵的地区，这会产生巨大的差异（你知道，大约 80% 的世界人口生活在这些情况下）。
目前，大约 95% 的所有流量和大约 96% 的移动浏览流量都是通过支持 WebP 的浏览器完成的。请在 caniuse.com 上查看当前数据。
对环境也有好处！减少网络流量可以减少电力消耗，从而减少二氧化碳排放。

安装

将插件文件上传到 /wp-content/plugins/webp-express 目录，或者直接通过 WordPress 插件屏幕安装插件。
通过 WordPress 的“插件”屏幕激活插件
进行配置（插件在配置之前不执行任何操作）
验证其是否正常工作
（可选）批量转换所有图像，无论是在管理界面还是使用 WP CLI（命令：“webp-express”）

配置

您可以在 设置 > WebP Express 中配置插件。

操作模式

作为某种主开关，您可以选择以下操作模式之一

不同的图像响应：WebP Express 为图像创建重定向规则，因此对 jpeg 的请求将导致 webp，但只有当请求来自启用了 WebP 的浏览器时。如果已经存在 webp，则立即提供。否则，它将被转换然后提供。请注意，并非所有 CDN 都很好地处理不同的响应。

CDN 友好：在“CDN 友好”模式下，jpeg 总是以 jpeg 提供。而不是改变图像响应，WebP Express 改变 HTML 以使用 webp。

仅重定向：在“仅重定向”模式下，WebP Express 仅用于将 jpeg 和 png 重定向到同一文件夹中现有的 webp 图像。因此，在此模式下，WebP Express 不会执行任何转换。可能您正在使用另一个插件来执行此操作，或者您已离线转换图像并手动上传。

调整：这里您有所有可用的选项。

转换方法

WebP Express 提供了一系列方法来转换图像：执行 cwebp 二进制文件、Gd 扩展、Imagick 扩展、Vips 扩展、ewww 云转换器和远程 WebP Express 等。每种方法都需要 某些东西。在许多情况下，转换方法之一将是可用的。您可以快速识别哪些转换器正在工作——它们旁边有一个绿色图标。悬停在未工作的转换方法上会显示错误信息。

如果未提供任何转换方法，您有几个选项

您可以在另一个支持本地转换方法的网站上安装此插件，并通过“远程 WebP Express”转换方法连接到该网站
您可以购买 ewww 云转换器的密钥。他们不对 webp 转换收费，因此您只需支付一美元的启动费即可：）
您可以在另一个服务器上设置 webp-convert-cloud-service 并连接到该服务器。它是开源的。
您可以尝试满足 cwebp、Gd、Imagick、Gmagick 或 Vips 服务器要求。请查看此维基页面了解如何操作。

jpeg 的质量检测

如果您的服务器安装了 Imagick 扩展或能够执行 imagemagick 二进制文件，插件将能够检测 jpeg 的质量，并将此质量用于转换后的 webp。您可以通过在“转换”>“jpeg 选项”>“有损质量”的帮助图标上悬停来检查是否可以启用质量检测。帮助文本中的最后一行会告诉您。

与固定质量相比，自动质量具有优势，因为它确保每次转换都使用适当的质量。将低质量 jpeg 编码为高质量 webp 并不能神奇地提高视觉效果，使您的 webp 比原始图片看起来更好。但它会导致文件大小比原始 jpeg 转换为 webp 并使用相同质量设置的文件大得多。

如果您没有启用质量检测，可以尝试以下方法之一

在服务器上安装 Imagick（为此目的，不需要它编译了 WebP 支持）
在服务器上安装 imagemagick 并授予 PHP 使用“exec”函数的权限。
使用“远程 WebP Express”转换器连接到一个已启用了质量检测的网站
如果您的服务器上可用了 cwebp 转换器，您可以将其配置为以某种特定的减少为目标，而不是使用质量参数。将其设置为例如 50%，甚至 45%。

验证其是否正常工作（在“多种图像响应”模式下）

请确保至少有一种转换方法正常工作。它应该有一个绿色的勾选标记。
如果您尚未保存，请单击“保存设置”。这将将在相关目录中的 .htaccess 文件中放入重定向规则（通常在 uploads、themes 和 wp-content/webp-express/webp-images 中，具体取决于“范围”设置）
我假设您已检查 .htaccess 规则部分中的前两个复选框之一。否则，您不是使用“多种响应”，此时“CDN 友好”模式将更合适。
单击“实时测试”按钮，以查看启用的规则是否真的在正常工作。如果它们没有工作，可能是因为服务器需要一点时间来识别更改的规则。

实时测试非常彻底，我建议您使用它们而不是手动测试。但是，进行手动检查也无妨。

进行手动检查

请注意，当 WebP Express 提供多种图像响应时，图像 URL 仍然指向 jpg/png。但是，如果使用支持 webp 的浏览器访问 URL，则响应将是 webp 图像。因此，文件扩展名（文件名以“jpg”或“png”结尾）与文件类型之间存在不匹配。但幸运的是，浏览器不依赖于扩展名来确定文件类型，它只查看 Content-Type 响应头。

为了验证插件是否正常工作（无需点击测试按钮），请执行以下操作

在支持 webp 的浏览器中打开页面，例如 Google Chrome
右键单击页面并选择“检查”
单击“网络”选项卡
重新加载页面
在列表中找到 jpeg 或 png 图像。在“类型”列中，它应该显示“webp”

您还可以查看头信息。当 WebP Express 重定向到现有的 webp 时，将有一个“X-WebP-Express”头，其值为“直接重定向到现有 webp”。如果没有（并且您已检查“启用重定向到转换器”），您应该看到一个“WebP-Convert-Log”头（WebP-Express 使用 WebP Convert 进行转换）。

备注

注意：在.htaccess中创建的重定向规则指向一个PHP脚本。如果您不小心更改了插件的重定向URL路径，则必须更新这些规则。《.htaccess》还将wp-content路径（相对于文档根）传递给脚本，这样脚本就知道在哪里查找其配置以及在哪里存储转换后的图片。所以，如果您移动了wp-content文件夹，或者将Wordpress移动到子文件夹中，规则也需要更新。由于移动这些项目的情况很少见，WebP Express没有使用任何资源来监控这种情况。然而，当您访问设置页面时，它将进行检查。

注意：在删除插件之前，请先禁用它。禁用将处理删除.htaccess文件中的规则。有了这些规则，但转换器已消失，您的Google Chrome访客将看不到任何jpeg图像。

批量转换

您可以通过以下两种方式开始批量转换

在管理UI中。在设置屏幕上，有一个“批量转换”按钮
通过使用WP CLI（命令：“webp-express”）。

我目前正在开发一个文件管理器界面，这将成为第三种方式。

确保新图像被转换为WebP格式

有几种方法可以实现

在.htaccess规则部分启用对转换器的重定向。
启用“上传时转换”。请注意，这可能会影响定义了许多格式的主题的上传体验。
设置一个cron作业，定期执行wp webp-express convert。

WP CLI命令

WebP Express目前支持通过CLI进行转换和刷新webp图像的命令。您可以使用--help选项了解有关选项的信息：wp webp-express --help。显示可用命令wp webp-express --help。显示“转换”命令的可用选项。

一些示例：wp webp-express convert：为所有未转换的图像创建webp图像wp webp-express convert --reconvert：也将已转换的图像转换为webp格式wp webp-express convert themes：仅转换主题文件夹中的图像wp webp-express convert uploads/2021：仅转换上传文件夹中“2021”文件夹内的图像wp webp-express convert --only-png：仅转换PNG图像wp webp-express convert --quality=50：使用质量50（而不是设置屏幕中输入的质量）wp webp-express convert --converter=cwebp：特别使用cwebp转换器。

wp webp-express flushwebp：删除所有webp图像wp webp-express flushwebp --only-png：删除所有PNG图像的转换后的webp图像

概要：wp webp-express convert [<location>] [--reconvert] [--only-png] [--only-jpeg] [--quality=<number>] [--near-lossless=<number>] [--alpha-quality=<number>] [--encoding=<auto|lossy|lossless>] [--converter=<converter>] wp webp-express flushwebp [--only-png]

我正在考虑添加查看状态、查看转换统计信息、生成。htaccess文件和修改设置的命令。如果您需要这些或其他任何内容，请告诉我。

限制

该插件现在应在Microsoft IIS服务器上工作，但尚未经过彻底测试。

常见问题

如何验证插件是否正常工作？

请参阅“验证其是否正常工作部分”

没有转换方法正常工作

别担心 - 您有选择！

如果您控制另一个WordPress站点（其中本地转换方法确实正常工作），您可以在该站点上设置WebP Express，然后通过配置“远程WebP Express”转换方法来连接到它。
您还可以设置 ewww 转换方法。要使用它，您需要购买一个 API 密钥。它们不对 webp 转换收取积分，因此您只需支付一美元的启动费即可（除非它们更改了定价——我对那没有控制权）。您可以在以下链接购买 API 密钥：https://ewww.io/plans/
我编写了一个模板信件，您可以将其发送给您的网络托管商
您可以尝试使本地转换器之一生效。查看 webp-convert 维基上的此页面。还有一个测试/故障排除脚本，在处理这些内容时很有用。
最后，如果您可以访问另一个服务器并且熟悉使用 composer 安装项目，您可以安装webp-convert-cloud-service。它是开源的。

当然，您还可以选择使用另一个插件。我可以推荐 Optimole。如果您想尝试它并在此过程中支持我，请点击此链接。这是一个联盟链接，如果您决定注册，它将给我带来奖励。

它不起作用 - 尽管测试转换有效，它仍然提供 jpeg 图片。

实际上，您可能弄错了，所以首先，确保您没有犯一个非常常见的错误，即认为带有 URL example.com/image.jpg 的内容必须是 jpeg 图片。该插件在原始（未转换）图片相同的 URL 上提供 webp 图片，所以不要被外表欺骗！困惑吗？请看下一个常见问题解答项。

假设您已经检查了 内容类型 标头，并且它没有显示 "image/webp"，请确保以下内容：

您使用的是支持 webp 的浏览器进行测试（例如 Chrome）
您正在查看的图片 URL 不是指向另一个服务器（例如 gravatar.com）

假设所有这些都已经就绪，请查看响应标头，看是否有 X-WebP-Convert-Status 标头。如果没有，那么问题似乎是图像请求没有被传递给 WebP Express。这种情况的原因可能包括：

您正在使用 NGINX（或 Apache/Nginx 组合）。NGINX 需要特别注意，请查看那个常见问题解答项
您正在使用 WAMP。请查看那个常见问题解答项

我将在此常见问题解答项上写更多内容... 请继续关注。

如何在一个以 "jpg" 结尾的 URL 上提供 webp 图片？

这很简单。浏览器查看的是 内容类型 标头，而不是 URL，以确定它得到了什么。因此，尽管 example.com/image.jpg 中的资源是 webp 图片可能会让人困惑，但请放心，浏览器并没有困惑。因此，您必须检查 内容类型 响应标头，而不是 URL，以确定插件是否正常工作。请参阅 "如何验证插件是否工作？" 的常见问题解答项。

顺便说一句，我正在考虑添加一个选项，让插件将请求重定向到 webp 而不是立即提供。这将消除文件扩展名和内容类型标头之间的明显不匹配。然而，这样做的代价是每个图片都会有一个额外的请求，这意味着额外的时间和更差的表现。我相信您不会明智地使用该选项，所以我猜我不会实现它。但是，也许您有很好的理由使用它？如果您这样做，请告诉我！

Safari 中的空白图片？

WebP Express有三种方法将webp格式发送给支持webp的浏览器，同时仍然向不支持webp的浏览器发送原始文件。虽然方法1可以与其他任何方法结合使用，但如果方法1无法使用，通常只会选择方法1或其中之一。

这些方法可能会出错吗？是的，所有都可能。

方法1：多样化的图像响应

“多样化的图像响应”方法会在.htaccess中添加规则，将jpeg和png重定向到对应的webp文件（如果存在）。这些规则有一个条件，确保它们仅在支持webp图像的浏览器中触发（这是通过检查“accept”头信息来确定的）。

我选择“多样化的图像响应”方法，因为给定的图像URL的响应会变化（webp图像会以相同的URL作为jpeg/png提供服务）。

在方法1失败的情况下，通常是由于仅根据URL缓存图像的系统。为了防止这种情况发生，.htaccess规则添加了Vary:Accept响应头。然而，大多数CDN如果不进行配置，通常不会尊重该头信息。幸运的是，代理服务器很好地尊重它（尽管通常在accept头信息不匹配时丢弃缓存图像）。

方法1可能会出错的情况：

您正在使用CDN，并且它尚未设置以处理多样化的图像响应。如果已经发生这种情况，清除CDN缓存至关重要！有关CDN设置的更多信息，请查看本常见问题解答中的CDN部分。
您的服务器不支持在.htaccess中添加响应头。在Apache上，需要启用“mod_headers”模块。否则，至关重要的Vary:Accept响应头将不会设置在响应中。
您的服务器不支持SetEnv。然而，该模块非常常见。我在这里发布了使规则在没有SetEnv的情况下工作的可能解决方案这里。
您正在使用Nginx，并且尚未创建添加Vary:Accept头的规则。

我不认为会有其他错误。为了确保，请查看此测试页面。当使用Safari访问测试页面时，您应该看到两个带有“JPG”标签的图像。当使用支持webp的浏览器访问测试页面时，您应该看到两个带有“WEBP”标签的图像。如果您没有看到这些情况之一，请报告！（尚未有人经历过这种情况）。

从WebP Express 0.15.0版本开始，您可以使用“实时测试”按钮来检查不支持webp的浏览器是否获得原始文件，并且返回了Vary:Accept头信息。请注意，如果CDN不立即在所有节点上缓存新图像，它可能无法检测到CDN缓存问题。

方法2：修改HTML以使用picture标签

将IMG标签替换为具有两个源点的PICTURE标签。其中一个指向webp，并将“content-type”设置为“image/webp”。另一个指向原始文件。浏览器将选择支持webp的源，如果不支持则选择其他源。

方法2可能在不支持picture标签语法的旧浏览器上出错。然而，只需启用“在旧浏览器上动态加载picturefill.js”选项，它就会处理该问题。

方法3：修改HTML以在支持webp的浏览器中直接指向webp

在此解决方案中，HTML中的URL会根据支持webp的浏览器进行修改。实际上，此方法中整个页面的HTML都会发生变化。

如果您的网站使用页面缓存插件，并且该插件没有为支持webp的浏览器创建单独的webp缓存，则方法3可能会出错。《Cache Enabler》插件可以处理这个问题。我不相信有其他页面缓存插件会这样做。本常见问题解答中有一个FAQ部分描述了如何配置《Cache Enabler》与WebP Express协同工作。

请注意，Firefox 66 及以上版本在请求页面时，其发送的“accept”头部中不再包含“image/webp”。而幸运的是，Firefox 66 及以上版本在请求图片时仍然在其accept头部中包含“image/webp”。但是，使用方法3时，这并不会使它获得webp图片。

我使用NGINX或OpenResty

WebP Express在NGINX上运行良好，但界面在NGINX上还没有优化。当然，NGINX不会处理WebP Express生成的.htaccess文件。WebP Express可以在不进行重定向的情况下使用，因为它可以更改HTML以使用picture标签，该标签链接到webp替代方案。请参阅下面的“简单方法”。或者，您可以按照下面的“高级方法”部分进行操作，手动设置重定向。

简单方法（无重定向规则）

简单的解决方案是简单地使用“CDN友好”模式的插件，进行批量转换（处理现有图像的转换），激活“上传时转换”选项（处理媒体库中新的图像的转换）并启用更改HTML（在支持webp的浏览器上交付webp，同时在不支持webp的浏览器上交付原始jpeg/png）。

优点：非常容易设置。缺点：外部CSS中的图像和通过javascript动态添加的图像将不会作为webp提供。缺点：新主题图像将不会转换，直到您运行新的批量转换。

高级方法（创建NGINX重定向规则）

创建NGINX规则需要在NGINX配置文件中手动插入重定向规则（nginx.conf或位于/etc/nginx/sites-available的网站的配置文件）。如果您无法这样做，您必须满足上面描述的“简单方法”。

有两种不同的方法可以实现重定向。我推荐的是基于try_files指令的方法。如果这不适合您，您可以尝试基于rewrite指令的替代规则。规则将在下一两个部分中描述。

对于NGINX上的多站点，请参阅这里

替代规则（使用"rewrite"）

如果推荐的规则对你不起作用，你可以尝试这些替代规则。

我推荐上述的try_files方法而不是这些替代规则的原因是它稍微简单一些，并且应该表现得更好。这些替代规则并不比其他规则差。选择什么对你有用吧！

准备步骤：规则通过在URL后追加".webp"来查找现有的webp文件。因此，为了使它工作，你必须通过将General > File extension设置为Append ".webp"来配置WebP Express，使其以这种方式存储转换后的文件。此外，请确保WebP Express配置为"Destination"设置为"Mingled"。

# WebP Express rules
# --------------------
location ~* ^/wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;
}
location ~* ^/wp-content/.*\.webp$ {
    expires 365d;
    if ($whattodo = AB) {
        add_header Vary Accept;
    }
}
if ($http_accept ~* "webp"){
    set $whattodo A;
}
if (-f $request_filename.webp) {
    set $whattodo  "${whattodo}B";
}
if ($whattodo = AB) {
    rewrite ^(.*) $1.webp last;
}
if ($whattodo = A) {
    rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break;
}
# ------------------- (WebP Express rules ends here)

注意

请注意，在复制粘贴时可能会得到html编码字符。请确认在try_files块的最后一行中“wp-content”前面的 ampersand 没有编码。
请注意，这些规则通过将“.webp”追加到URL来查找现有的webp文件。因此，为了使其正常工作，您必须配置WebP Express以这种方式存储转换后的文件。
请注意，如果您没有启用png转换，应将“(png|jpe?g)”替换为“jpe?g”。
请注意，如果您已将wp-content移动到非标准位置，则必须相应地进行更改。请注意，然后您还必须更改脚本的“wp-content”参数。它期望从文档根到wp-content的相对路径，并且需要该路径，以便脚本可以找到配置文件。
请注意，有一种基于“rewrite”的permalinks hack，而不是基于try_files的通常解决方案。如果您正在使用该hack将缺失的文件重定向到index.php，您需要按照指定的方式修改它这里
我已经为缓存设置了过期语句。你可能需要修改或禁用它。
我没有对webp-on-demand.php请求设置任何过期时间。这不需要，因为脚本会根据你在WebP Express设置中设置的内容来设置这个。此外，尝试这样做将需要一个新的匹配webp-on-demand.php的位置块，这将覆盖处理PHP文件的位置块，并因此破坏功能。
现在没有必要在以"/wp-content"开头的行中添加"&$args"。它曾经存在是为了通过在URL后追加"?debug"来启用对单个图像的调试。但是，我已经从webp-on-demand.php中删除了这个功能。

可以将这些内容放在一个location指令中。然而，在location指令内部使用if指令被认为是一种邪恶的做法。[链接](https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/)。但在我们的情况下，它似乎可以工作。如果你希望这样做，请使用以下规则：

# WebP Express rules
# --------------------
location ~* ^/wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;

    if ($http_accept ~* "webp"){
        set $whattodo A;
    }
    if (-f $request_filename.webp) {
        set $whattodo  "${whattodo}B";
    }
    if ($whattodo = AB) {
        rewrite ^(.*) $1.webp last;
    }
    if ($whattodo = A) {
        rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content last;
    }
}

location ~* ^/wp-content/.*\.webp$ {
    expires 365d;
    if ($whattodo = AB) {
        add_header Vary Accept;
    }
}
# ------------------- (WebP Express rules ends here)

PS：如果你只想将图像重定向到脚本（而不是现有），则规则会变得简单得多。

# WebP Express rules
# --------------------
if ($http_accept ~* "webp"){
  rewrite ^/(.*).(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break;
}
# ------------------- (WebP Express rules ends here)

关于这个话题的讨论[这里](https://wordpresstheme.cn/support/topic/nginx-rewrite-rules-4/) 和 [这里](https://github.com/rosell-dk/webp-express/issues/166)

如果你需要将文件扩展名替换为".webp"而不是追加".webp"到它，这里有规则：[链接](https://www.keycdn.com/support/optimus/configuration-to-deliver-webp)

我正在Windows服务器上

好消息！多亏了一个自称lwxbr的人，它现在应该可以工作，至少在XAMPP 7.3.1和Windows 10上。[链接](https://github.com/rosell-dk/webp-express/pull/213)

我正在Litespeed服务器上

在Litespeed服务器上，您无需进行任何特殊设置即可使其工作。您应该能够在任何操作模式下使用WebP Express。为了获得最佳性能，我仍然建议使用LiteSpeed Cache插件进行页面缓存。

LiteSpeed Cache可以设置为为支持webp和不支持webp的浏览器维护独立的页面缓存。通过此功能，可以使用“修改HTML”选项并选择“替换图像URL”以及“仅在启用webp的浏览器中替换”模式。

配置和详细说明已由@ribeiroeder在此处分享。

我正在使用Jetpack

如果您安装了Jetpack并启用了“加快图像加载时间”，则Jetpack会修改HTML，使图像指向其CDN。

例如：<img src="https://example.com/wp-content/uploads/2018/09/architecture.jpg">

变为：<img src="https://i0.wp.com/example.com/wp-content/uploads/2018/09/architecture.jpg">

Jetpack会自动向支持webp的浏览器提供webp文件，使用与标准WebP Express配置相同的机制：如果“接受”头包含“image/webp”，则提供webp文件（保留原始文件扩展名，但设置“内容类型”头为“image/webp”），否则提供jpg文件。

由于图像不再指向您的原始服务器，WebP Express创建的.htaccess规则将不会产生影响。

因此，如果您使用Jetpack，您实际上并不需要WebP Express？好吧，同时启用“加快图像加载时间”与WebP Express是没有意义的。

但是，在某些情况下，使用WebP Express而不是Jetpack的“加快图像加载时间”功能是有理由的

Jetpack具有与不同图像响应操作模式相同的缺点：如果用户下载文件，则文件扩展名与图像类型之间将不匹配（文件称为“logo.jpg”，但实际上是webp图像）。我认为这不是一个大问题，但那些对此有顾虑的人，即使您有Jetpack，WebP Express可能仍然适合您。这是因为WebP Express可以设置为仅生成webp，而不执行内部重定向到webp（从版本0.10.0起将可行）。例如，您可以使用Cache Enabler插件，该插件能够为每个页面生成和缓存两个版本。一个用于接受webp的浏览器，一个用于不接受webp的浏览器。在webp启用浏览器的HTML中，图像直接指向webp文件。

Jetpack的优点

它是一个免费CDN，可以默认提供webp服务。
它还优化jpg和png（但请注意，由于现在webp广泛支持，只有大约1/5的用户可以获得这些）

Jetpack的缺点

如果您只想使用CDN，安装这个大插件是有些麻烦的。
它要求您在Wordpress.com上创建一个账户。

WebP Express的优点

您有权控制质量和元数据。
它是一个小型插件，并且已采取措施仅添加非常少的开销。
与Cache Enabler兼容良好。由于不将jpg重定向到webp，因此无需在CDN上进行任何特殊配置，也不会有误导性的文件扩展名问题，如果用户下载文件。

WebP Express的缺点

如果您使用CDN并将jpg重定向到webp，您必须配置CDN以转发“接受”头。并非所有CDN都支持此操作。

为什么我看不到将WebP质量设置为自动的选项？

如果您的系统能够检测到jpeg质量，则此选项将仅显示。为了使您的服务器具备此功能，请安装Imagick扩展（PECL >= 2.2.2）或启用exec()调用，然后安装Imagick或Gmagick。

如果您有Imagick、Imagick二进制或Remote WebP Express转换方法可用，但没有全局“自动”选项，您将在单个转换器的选项中找到自动选项。

注意：如果您发现即使上述要求齐全，也看不到一般“自动”选项，请检查此支持线程。

如何配置我的CDN（“多变图像响应”模式）？

在多变图像响应操作模式下，图像响应将根据浏览器是否支持webp而有所不同（浏览器通过Accept头信号）。一些CDN默认支持此功能，而其他则需要一些配置，还有些根本不支持。

为了与CDN合作，它需要

转发Accept头
尊重Vary:Accept响应头。

您还可以通过绕过图像缓存在某些CDN上使其“工作”。但我更建议您尝试CDN友好模式（见下一FAQ项）

某些CDN的状态

KeyCDN：不支持多变图像响应。我在这里添加了一个功能请求。如果您喜欢，可以给它一个+1！
Cloudflare：请参阅“我在Cloudflare”项
Cloudfront：可以工作，但需要配置以转发接受头。转到分发设置，找到行为选项卡，选择行为并点击编辑按钮。从转发头中选择白名单，然后添加“接受”头到白名单。

我将在列表中添加更多内容。欢迎您在此处提供帮助。

如何使其与CDN一起工作？（“CDN友好”模式）

在CDN友好模式下，没有多变图像响应的技巧，因此不需要在CDN上特别注意。

然而，还有其他陷阱。

问题是，除非您的整个网站都在CDN上，否则您可能正在使用一个插件来修改HTML，以便将您的静态资产指向CDN。如果您已启用WebP Express中的“修改HTML”，则意味着您现在对图像URL有两次修改！

这会怎么样？

嗯，如果WebP Express在将图像URL修改为指向CDN之后修改HTML，我们就有麻烦了。WebP Express不修改外部图像，但现在URL是外部的。

然而，如果WebP Express在其他插件之前修改HTML，一切都会正常工作。

因此，确保WebP Express首先出现非常重要。

好消息是WebP Express在我测试的所有插件中都是第一个出现的。

但如果它不是第一个出现怎么办？

首先，您在WebP Express中有一个选项可以在这两种之间选择

使用内容过滤钩子（the_content、the_excerpt等）
完整的页面（使用输出缓冲）

内容过滤钩子在输出缓冲之前处理内容。因此，如果输出缓冲对您来说不够早，请选择内容过滤钩子。

存在风险，你的CDN插件也可能使用内容过滤钩子。虽然我没有遇到过这种情况。但如果真的有，它们很可能会在WebP Express之前处理内容，因为我已经将这些钩子的优先级设置得相当高（10000）。背后的原因是我们想用相同的钩子替换可能插入的图片（例如，主题可能使用the_content过滤器来插入特色图片）。如果你遇到一个用于更改CDN URL的插件，它使用了内容过滤钩子，那么你可能运气不佳。告诉我，我可以修复它（即通过使其优先级可配置）。

以下是部分CDN插件及其处理HTML的时间

在输出缓冲中，首先开始输出缓冲的插件将最后处理输出。因此，WebP Express尽可能晚地开始，即在使用优先级10000的template_redirect钩子（优先级越高，越晚）。这比init钩子晚，而no hooks钩子又比它晚。

我在Cloudflare上

未配置的情况下，Cloudflare不会为jpeg和webp维护单独的缓存；所有浏览器都会得到jpeg。要使Cloudflare缓存不仅根据URL，还根据头部信息，你需要使用自定义缓存键页面规则，并添加头部内容来根据Accept请求头部创建单独的缓存。

但是，当前自定义缓存键规则需要企业级账户。如果你已经有了，你也可以选择使用从“专业”级别计划开始的优化功能。使用优化功能，你将不需要WebP Express。

为了让WebP Express在免费Cloudflare账户上工作，你有以下选择

你可以配置CDN不缓存jpeg图片，方法是在以下页面规则中添加：如果规则匹配：example.com/*.jpg，则设置：缓存级别为：绕过。
你可以设置另一个CDN（在另一个提供商处），你只需要用它来处理图片。你需要配置该CDN以转发Accept头部。你还需要安装一个指向该CDN的Wordpress插件。
你可以切换到“CDN友好”模式并使用HTML更改。

我在WP Engine上

从版本0.17.1开始，WebP Express与WP Engine兼容，并且在每次发布前都会进行此组合的测试。

你可以在“不同图像响应”模式和“CDN友好模式”下使用该插件。

要使重定向工作，你必须

获取此FAQ中“我在Nginx/OpenResty上”部分中找到的nginx配置。使用“try_files”变体。
联系帮助中心，并请他们插入该配置。
确保设置与该配置匹配。遵循“注意”部分中的“我在Nginx/OpenResty上”部分。

WebP Express稍微调整了“重定向到转换器”在WP Engine上的工作方式。该PHP脚本通常直接提供webp，并带有Vary:Accept头部。然而，这个头部被WP Engine上的缓存机制覆盖。作为一种解决方案，我修改了WP Engine脚本的响应。而不是提供服务，它服务一个指向自己的重定向。由于现在确实有一个对应的webp，因此这个重复请求不会重定向到PHP脚本，而是直接到webp。重定向的头部信息也是正确的。你可以点击“启用重定向到转换器？”旁边的“实时测试”按钮来验证这一点。

如果你（与这个标题相反！）实际上不在WP Engine上，但可能想要，我有一个联盟链接给你。这将给你3个月的免费服务，如果你决定留下，它也会给我带来奖励。这里是你需要的：当你在WP Engine上注册时，你可以获得3个月的免费服务。

WebP Express / ShortPixel 设置

以下是一个使用WebP Express与ShortPixel配合使用的配方，WebP Express生成webp图像，而ShortPixel仅用于在检测到与原始图像相同的文件夹中的webp图像时创建<picture>标签。

现在真的没有必要这样做，因为WebP Express现在可以替换img标签为picture标签（检查“更改HTML”选项）

您需要：1 x WebP Express 1 x ShortPixel

1. 设置WebP Express 如果您不想使用服务不同的图像

打开WebP Express选项
切换到CDN友好模式。
将文件扩展名设置为“设置为.webp”
确保已启用在请求时将不存在的webp文件转换为原始图像选项

如果您想让ShortPixel创建

打开WebP Express选项
切换到不同的图像响应模式。
将目标文件夹设置为“混合”
将文件扩展名设置为“设置为.webp”

2. 设置ShortPixel

按照常规方式安装ShortPixel
获取API密钥并在选项页上输入。
在高级中启用以下选项
- 此外，免费创建图像的WebP版本。
- 在前端交付图像的WebP版本
- 通过使用标签语法更改页面代码
由于使用ShortPixel可以免费转换的图像数量有限，因此您应该禁用以下选项（也在高级屏幕上）
- 自动优化前端添加的图像。
- 上传后自动优化媒体库项目（推荐）。

3. 访问页面 由于可能尚未生成webps，第一次访问时ShortPixel不会生成<picture>标签。然而，引用的图像会导致WebP Express 自动转换功能启动，并为该页面上的每个图像生成webp图像。

4. 再次访问页面 由于WebP Express已在原始图像相同的文件夹中生成webps，ShortPixel检测到这些图像，您应该看到引用webp的<picture>标签。

ShortPixel或Cache Enabler？ Cache Enabler与ShortPixel相比的优势在于HTML结构保持不变。使用ShortPixel，图像标签被包裹在<picture>标签结构中，这样做有破坏样式的风险。

此外，Cache Enabler 缓存 HTML。这对性能有利。然而，这也使您必须使用该插件进行缓存。使用ShortPixel，您可以继续使用您最喜欢的缓存插件。

如果您的HTML在CDN上缓存，Cache Enabler将不起作用，因为HTML会根据Accept头而变化，并且它不会使用Vary:Accept头来指示这一点。但是，您可以手动添加它。由于HTML对所有图像都相同，因此ShortPixel没有这个问题。

WebP Express / Cache Enabler 设置

WebP Express / Cache Enabler设置非常强大且非常CDN友好。Cache Enabler用于生成和缓存HTML的两个版本（一个用于启用webp的浏览器，一个用于禁用webp的浏览器）

这样做的原因可能是

您正在使用无法配置为在“不同的图像响应”模式下工作的CDN。
您可以调整CDN以在“不同的图像响应”模式下工作，但您必须使用整个Accept头作为密钥来执行此操作。这样做会增加缓存MISS的风险，因此您决定不这样做。
您认为当用户保存图像时，即使它是一个webp图像，其扩展名仍然是jpg，这是一个问题。

您需要：1 x WebP Express 1 x Cache Enabler

1. 设置WebP Express 如果您不想使用服务不同的图像

打开WebP Express选项
切换到CDN友好模式。
将文件扩展名设置为“设置为.webp”
启用 修改HTML 并选择 替换图像URL。这并非绝对必要，因为 Cache Enabler 也会修改HTML - 但有多个原因这样做。首先，Cache Enabler 替换的URL不如我们多。例如，WebP Express 还会替换内联样式中的背景URL。其次，Cache enabler 在边缘情况中存在一些问题。第三，WebP Express 可以配置为修改HTML以指向相应的webp图像，甚至在它们存在之前，这可以与 请求时转换不存在的webp文件 选项一起使用。这是智能的，因为这样你就不必担心 Cache Enabler 缓存引用原始图像的HTML，因为某些图像尚未转换。
如果你启用了 修改HTML，也请启用 引用尚未转换的webp 和 请求时转换不存在的webp文件
如果你没有启用 修改HTML，请启用 请求时转换不存在的webp文件到原始图像

如果你想让 Cache Enabler 创建

打开WebP Express选项
切换到不同的图像响应模式。
将目标文件夹设置为“混合”
将文件扩展名设置为“设置为.webp”
我建议你启用 修改HTML 并选择 替换图像URL。还请启用 引用尚未转换的webp 和 请求时转换不存在的webp文件。

2. 设置 Cache Enabler

打开选项
启用 为WebP图像支持创建附加的缓存版本 选项

3. 如果你没有启用修改HTML和引用尚未转换的webp：让 WebP Express 在温暖的地方增长，直到翻倍。它需要页面访问来执行转换。批量转换在路线图上，但在此之前，你需要访问所有相关页面。你可以手动操作，让访客操作（即：稍等片刻），或者，如果你使用的是linux，你可以使用 wget 来获取你的网站

wget -e robots=off -r -np -w 2 http://www.example.com

标志： -e robots=off 使 wget 忽略 robots.txt 中的规则 -np (no-parent) 使 wget 停留在边界内（不进入父文件夹） w 2 在每个请求之间等待两秒钟，以避免对服务器造成压力

4. 清除 Cache Enabler 缓存。 点击右上角的“清除缓存”按钮以清除 Cache Enabler 缓存。

5. 检查HTML 当访问带有图像的页面时，根据浏览器是否支持webp，浏览器将提供不同的HTML。

在支持webp的浏览器中，HTML可能看起来像这样： <img src="image.webp">，而在不支持webp的浏览器中，它看起来像这样： <img src="image.jpg">

6. 选项性地在 .htaccess 中添加 Cache Enabler 重写规则 Cache Enabler 在 .htaccess 中提供了一些重写规则，这些规则直接重定向到缓存文件，从而完全绕过PHP。他们的插件不会为你这样做，所以你必须手动操作以获得最佳性能。这些规则在“高级配置”部分中，请参阅此页。

它与懒加载图像兼容吗？

尚未发现不与 WebP Express 兼容的插件/框架。

懒加载最常见的方式是通过在图像上设置 data-src 属性，并让javascript使用该值来设置 src 属性。这种方法是可行的，因为从服务器端看，图像请求与其他任何图像请求无法区分。然而，可能存在一些神秘的懒加载实现会使用XHR请求来加载图像。在这种情况下，Accept 标头将不包含 'image/webp'，而是 '/'，即使浏览器支持webp，也会提供jpeg。

以下懒加载插件/框架已测试并支持 WebP Express

我仅在多种图像响应模式下测试了上述功能，但它也应该在CDN友好模式下工作。两个更改HTML选项都已被设计为与标准延迟加载属性一起工作。

我可以为某些图像设置例外吗？

有时您确实需要提供jpeg或png格式的图像。例如，如果您正在使用某些压缩设置演示jpeg的外观。

如果您想以原始格式（jpeg或png）提供图像，请执行以下操作之一：

将"?original"添加到图像URL中。
在同一文件夹中放置一个空文件。文件名必须与jpeg/png相同，并附加".do-not-convert"。

这样做将绕过重定向到webp，并防止更改HTML使用webp而不是原始格式。

绕过整个文件夹的重定向 要绕过整个文件夹的重定向，您可以将以下内容放入您的index.htaccess文件中：

RewriteRule ^wp-content/uploads/2021/06/ - [L]

PS：如果WebP Express已在该.htaccess中放置规则，则需要将规则放置在WebP Express插入的规则之上。

如果您有任何其他问题，请查看或评论此主题

更改HTML仅替换某些图像

如果您想知道为什么更改HTML中缺少某些图像，可能是以下原因之一：

WebP Express不转换外部图像，仅转换服务器上的图像。因此，更改HTML不会更改除非它们指向您的服务器或您在CDN主机名部分中添加的CDN。
WebP Express有一个“作用域”选项，例如可以设置为“上传和主题”。只有位于所选作用域内的图像会被替换为webp。
如果您选择了<picture>标签语法，只有使用<img>-标签插入的图像将被替换（CSS图像不会替换）。此外，<img>-标签必须有一个"src"属性或常用的数据属性用于延迟加载（例如“data-src”或“data-lazy-src”）。
如果您将“如何替换”选项设置为“使用内容过滤钩子”，则使用某些第三方插件/主题插入的图像可能不会被替换。要解决这个问题，请将该设置更改为“完整页面”。
图像可能是通过javascript插入的。WebP Express不会更改某些插件可能会插入的

更新失败且无法重新安装

0.17.0版本中包含文件名中带点的二进制文件，这导致更新时在少数系统上解包失败。此失败可能导致不完整的安装。由于缺少重要文件（例如主要插件文件），WordPress不再注册该插件（它未出现在列表中）。然而，该文件夹存在于文件系统中，再次尝试安装WebP Express将失败，因为WordPress会对此提出投诉。解决方案是手动删除“plugins”中的“webp-express”文件夹（通过ftp或文件管理器等插件），然后重新安装WebP Express。设置将保持不变。导致问题的文件名已在0.17.2中修复。

功能X何时推出？/ 路线图

没有时间表。我在时间允许的情况下前进。我目前正在花很多时间回答支持论坛中的问题。如果有人愿意在这里帮助回答问题，这将使我能够将时间用于开发。此外，捐款将使我能够拒绝客户的一些更无聊的请求，并加快这里的速度。

目前我正在关注文件管理器。我希望添加转换、批量转换、查看转换日志、查看统计数据等功能。

以下是其他正在进行的计划

排除某些文件和文件夹。
在多种图像响应模式下支持Save-Data头（向希望尽可能节省带宽的客户端发送额外的压缩图像）。
显示NGINX的规则。
使用此JavaScript库允许所有浏览器使用webp。不幸的是，该JavaScript库（目前）不支持srcset属性，因此我将此项目移到了优先级列表的较低位置。我们需要支持srcset才能使该功能有用。

当前里程碑、子任务及其进度可在此查看： https://github.com/rosell-dk/webp-express/milestones

如果您想影响优先级，当然可以。您可以在论坛中争论您的观点，或者您可以简单地让金钱说话。通过在ko-fi.com/rosell上捐赠哪怕是一杯咖啡的钱，您也可以留下一个愿望。当我在优先考虑新功能时，我会考虑这些愿望。

beta测试

我通常在发布之前创建一个预发布版。如果您在ko-fi上关注我，当预发布版可用时，您会收到通知。我通常在周五创建预发布版，并在周一将其标记为稳定。要下载预发布版，请访问高级页面，然后滚动到“请选择要下载的特定版本”。我不会为预发布版命名不同的名称。您将在这里看到下一个版本，在它以通常方式可用之前。

0.21.1版本中的更改

(发布日期：2021年10月27日)

修复了bug：文件管理器无法处理许多图像。现在它将按需加载树分支，而不是一次性加载整个树。
修复了bug：对于多站点，设置保存后的重定向不起作用（0.21.0版本中引入的bug）

有关更多信息，请参阅webp-express 0.21.1里程碑上的已关闭问题。

0.21.0版本中的更改

(发布日期：2021年10月25日)

添加了图像浏览器（在“媒体”标签中）。
将webp转换库更新到2.7.0。
ImageMagick现在支持“近似无损”选项（前提是Imagick >= 7.0.10-54）。
为ImageMagick添加了“try-common-system-paths”选项（默认：true）。感谢Henrik Alves添加此选项。
修复了bug：在读取失败时处理未捕获的致命异常。感谢意大利的Manuel D'Orso修复此问题。
修复了bug：未使用UTF8的文件名在批量转换中引起麻烦。感谢“mills4078”修复此问题。
修复了bug：在某些系统上保存设置后返回设置失败。感谢来自德国的Martin Rehberger（@kingkero）修复此问题。
修复了bug：Webp URL没有包含端口号（仅在网站不在默认端口上时相关）。感谢来自法国的Nicolas LIENART（@nicolnt）提供修复。

有关更多信息，请参阅webp-express 0.21.0里程碑和webp-convert 2.7.0里程碑上关闭的问题。

0.20.1版本中的更改

(发布日期：2021年6月20日)

修复了bug：删除了composer.lock。它在PHP 7.2上被锁定，导致一些网站出现服务器错误。

0.20.0版本中的更改

(发布日期：2021年6月17日)

添加了WP CLI支持。将“wp webp-express convert”添加到crontab以进行新图像的夜间转换！感谢来自斯里兰卡的Isuru Sampath Ratnayake初始化此功能。
添加了“sharp-yuv”（不是作为选项，而是始终开启）。几乎免费地提高了YUV->RGB颜色转换。了解更多信息请点击这里。由cwebp、vips、gmagick、graphicsmagick、imagick和imagemagick支持。
将cwebp二进制文件升级到1.2.0。
cwebp现在只在必要时验证提供的预编译二进制文件的哈希值。这减少了转换时间。
上传时的转换默认为关闭，因为在具有许多格式的主题中可能会影响上传体验。
错误修复：PNG的Alpha质量保存不正确。感谢来自英国的Chris Gibbs发现并修复此问题。
错误修复：wp-debug日志可能会因“未定义索引：HTTP_ACCEPT”而被填满。感谢@markusreis发现并修复此问题。

0.19.0版本中的更改

(发布日期：2020年11月13日)

新转换方法：ffmpeg
修复了在文件名中包含特殊字符时批量转换的问题。
防止了插件被包含两次时的问题（有人能解释一下这种情况可能发生吗？）

有关更多信息，请参阅github仓库中0.19.0里程碑的已关闭问题0.19.0里程碑

0.18.3版本中的更改

(发布日期：2020年11月5日)

错误修复：WebP Express使用实时测试来确定服务器对.htaccess文件的功能。这些结果用于警告，也用于优化.htaccess文件中的规则。然而，HTTP请求可能会因其他原因失败（例如超时）。此类失败应导致不确定的结果，但它被解释为功能不工作。
实时测试现在在HTTP请求失败时显示更多信息。
将“目标结构”的默认值更改为“图片根目录”，因为在以非传统方式定义DOCUMENT_ROOT的主机上，“文档根目录”不起作用。
可以通过向wp-config.php添加一行来更改RewriteCond中的"%{DOCUMENT_ROOT}"部分。这是一个Beta功能，如果没有人真正需要它，可能会被取消。
移除了PHP警告“常量WEBPEXPRESS_MIGRATION_VERSION已经定义”。
修复了捐赠链接。现在它指向https://ko-fi.com/rosell。

有关更多信息，请参阅github仓库中0.18.3里程碑的已关闭问题https://github.com/rosell-dk/webp-express/milestone/34?closed=1

支持WebP Express

桌上的面包并非免费，尽管这个插件是，并且始终是。我喜欢开发这个插件，支持你们，但我也需要面包。请让我能够继续在这个插件上投入精力。

请给我买杯咖啡
定期给我买咖啡并帮助确保我的咖啡供应不断。

目前通过Patreon支持此项目的个人/公司 - 感谢！

Max Kreminsky
Nodeflame
Mathieu Gollain-Dupont
Ruben Solvang

在过去30天内提供咖啡贡献的个人

提供额外慷慨咖啡量/终身支持的个人（>50$） - 感谢！

facepalmua / composer-wp-webp-coverter

维护者

详细信息