为 WordPress 站点启用全局 WebP 支持

它是什么？

WebP 是由 Google 开发的一种图片文件格式，以替代 JPEG、PNG 与 GIF。它支持有损及无损压缩，同时也支持动画和 Alpha 通道的透明化。它在2010年9月被 Google 发布，并在2018年4月被发布出它的第一个支持库。WikiPedia

好处

• 更小的文件体积
• 支持无损及有损压缩
• 支持动画
• 支持透明度调整
• 现代浏览器几乎完全支持 refer

安装插件

得益于 WordPress 的开放性，我们可以通过其内置的插件市场上安装特定的插件以实现功能。

插件名：WebP Express 作者：Bjørn Rosell 赞助：Buy me a Coffee

请在插件添加页面自行搜索安装，具体步骤不再阐述。

Rewrite 规则配置

若你使用 Apache 作为站点的前置程序，则不必往下阅读，你可以很方便的使用其自动生成的 .htaccess 作为 rewrite 规则。但注意，每次设置的变更都可能影响其规则内容，你需要重载最新的配置以使其生效。

针对 Nginx 的配置

以下是配置参数示例，请根据实际情况替换对应参数或路径。

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)Code language: PHP (php)

以上配置通过 正则表达式 匹配 URI 中包含的静态文件扩展名。若为 PNG、JPE?G 或 WebP，将进行额外的处理。请确认当前配置中没有冲突的配置，否则插件可能不会正常工作。以上配置引用自此文档。

在应用前，需要在插件中启用特定的选项（设置 -> WebP Express -> [Destination folder -> Mingled & File extension -> Append “.webp” ]）。

若站点正在使用 CDN

虽然目前现代浏览器大部分都支持 WebP 格式，但难免有用户使用老旧浏览器（如 IE ），上面的规则中已针对请求头中的 Accept 值进行判断兼容。但若你的站点目前正在使用 CDN 进行静态文件缓存，请检查提供商是否支持读取图片请求后返回头信息中的 Vary 键，以分别进行文件匹配。

进行取舍

Cloudflare 免费版不支持上述提到的功能，请参阅这里。于此，我们只能进行取舍，我们假设访客的浏览器都是知名（Chrome、Fireforx、Edge）的且为较新版。

删除基于 Accept 值的判断

location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  #add_header Vary Accept;
  #expires 365d;
  #if ($http_accept !~* "webp"){
  #  break;
  #}
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}Code language: PHP (php)

完成

大功告成！现在你可以应用编辑好的配置文件，尝试查看效果。