WordPress自适应WebP格式图片加速方法-Nginx,WP插件和CDN三种方式

WordPress使用WebP格式图片可以有效地加快网页的打开速度，尤其是对于图片量比较大且每天的访问量多的网站来说，使用WebP格式的图片不仅可以加快网页的打开速度，还可以节省CDN流量费用，不管是对用户还是对于站长来说都是一件好事。

从 WordPress 5.8 起，只要主机的图片处理库支持 WebP，媒体库就能直接上传 WebP 并生成相应尺寸。已有 JPEG、PNG 不会因为升级 WordPress 就自动改格式，老站想让同一个图片 URL 按浏览器能力返回不同格式，还要看 Nginx、插件或 CDN 的配置。

那就是：浏览器自适应。让同一 URL 按请求头 Accept 返回 WebP 或原图。两种响应如果经过同一个 CDN 或代理缓存，还要确认缓存能区分它们。

这篇文章就来分享一下Wordpress启用WebP格式图片三种方法：Nginx配置、WordPress插件法和CDN自适应方法。更多的关于Wordpress加速的教程这里还有：

PS：2026年11月4日更新，补上 WordPress 原生 WebP 支持和 Nginx 回退、CDN 缓存的核验方法，更新了插件和 PHP 图片库说明。

PS：更新记录.

1、国外有非常多的免费CDN加速服务，参考：国外十大CDN加速服务-适合网站全球CDN加速,防DDos攻击,企业个人建站使用。2021.5.9
2、Wordpress优化加速是一个系统工程，需要全方位地对WP的速度进行优化才可以达到秒开的效果：WordPress优化专题汇总-实用的WordPress性能和速度优化教程总结。2021.3.28
3、利用FFmpeg可以直接在本地将图片转换为WebP格式的图片，方便快捷：免费开源的视频音频格式转换和压缩软件FFmpeg-快速转换格式和压缩视频。2020.12.18

一、Nginx配置WebP自适应

1.1 Nginx规则配置

假设你的网站图片在相同的路径下已经有了WebP格式的副本，例如：/wp-content/uploads/2019/08/webp_07.png，同样也有：wp-content/uploads/2019/08/webp_07.png.webp。

我们要实现的功能就是让Nginx自动判断，根据浏览器是否支持WebP来自动推送相应格式的图片，如果不存在WebP格式副本，那么自动默认推荐原图片。

下面是单独的 Nginx 示例，合并到现有配置时只取需要的部分。示例匹配 /images/；WordPress 图片一般在 /wp-content/uploads/，需要按实际目录改匹配和站点根目录。

http {
 
  ##
  # Basic Settings
  ##
 
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;
 
  # IMPORTANT!!! Make sure that mime.types below lists WebP like that:
  # image/webp webp;
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
 
  gzip on;
  gzip_disable "msie6";
 
  ##
  # Conditional variables
  ##
  #本部分添加到你的Http段
  map $http_accept $webp_suffix {
    default   "";
    "~*image/webp"  ".webp";
  }
 
  ##
  # Minimal server
  ##
  
  server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;
 
    root /usr/share/nginx/html;
    index index.html;
 
    # Make site accessible from http://localhost/ or whatever you like
    server_name localhost;
   #本部分添加到你的Server段
    location ~* ^/images/.+\.(png|jpe?g)$ {
      root /home/www-data;
      add_header Vary Accept;
      try_files $uri$webp_suffix $uri =404;
    }
  }
}

1.2 Nginx规则说明

Only three parts are important: mime.types should list webp, we should define a variable depending on Accept header, and we should use it in try_files.

mime.types

nginx uses a file to list mappings from file extensions to MIME types. Usually it is called mime.types, and included externally. Make sure that it lists webp:

image/webp  webp;

map

map defines a variable that depends on values of other variables (see ngx_http_map_module（http://nginx.org/en/docs/http/ngx_http_map_module.html） for details). This module is included in nginx by default, you don’t need to recompile anything.

map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}

This http-level snippet defines a variable called $webp_suffix, which depends on $http_accept (our HTTP Accept header). If the header contains "webp" substring (using a case-insensitive regular expression), than our variable will be set to ".webp", otherwise it will be an empty string.

In our case, it means that adding our variable does not affect serving other non-image files.

try_files

This is a workhorse of the solution:

try_files $uri$webp_suffix $uri =404;

This location-level directive checks files conditionally breaking on success:

Checks a file + a possible ".webp" suffix, and serves it, if it is found.
Checks a file as it was requested, and serves it, if it is found.
Sends HTTP404 (AKA “not found”), if not found.

基本原理：

Let’s go over it in details. We assume that we have file called image.png and its possible counterpart image.png.webp.

当一个接受WebP格式的浏览器发送图片请求时:

$webp_suffix is set to “.webp”.
try_files tries image.png.webp. It is served, if found. 尝试返回xxx.png.webp格式图片
Otherwise try_files tries image.png (the original file). It is served, if found. 没有找到webp格式，返回原图。
Otherwise “not found” is returned.

当一个不接受WebP格式的浏览器发送图片请求时:

$webp_suffix is set to “”.
try_files tries image.png. It is served, if found. 直接尝试返回原图。
Otherwise try_files tries again image.png (the original file). While it is clearly redundant, it is unlikely that image is not found. If this is a common situation for an application you develop, remember that nginx caches files, so it will be amortized.
Otherwise “not found” is returned.

try_files is a core module directive. It may check files on disk, redirect to proxies, or internal locations, and return error codes, all in one directive. See try_files（http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files） for more details.

1.3 ngx_pagespeed模块

Nginx 处理回源图片，CDN 处理对浏览器的响应。如果 CDN 对同一 URL 共用一个缓存项，就可能把一种格式发给另一类请求。源站的 Vary: Accept 还要配合 CDN 对该响应头或图片变体的支持。

ngx_pagespeed 是旧文用过的一种办法。上游仓库已经归档，这一节保留当时的用法供维护旧站查阅。

ngx_pagespeed可以自动将图片转换为WebP格式（会自动判断是否有必要，有些图片转换后可能变小），自动根据浏览器的请求来提供相应格式的图片，同时可自定义CDN域名，这段是当时的测试记录，现有站点请按自己的 CDN 规则核对。教程：

1.PageSpeed服务器优化神器-Nginx部署ngx_pagespeed模块和加速效果体验

二、WP自适应WebP插件

插件：

https://wordpress.org/plugins/webp-express/
https://wordpress.org/plugins/webp-converter-for-media/

目前Wordpress已经有不少的插件可以让Wordpress自适应WebP格式的图片了：WebP Express和WebP Converter for Media。经过测试，WebP Express在对于CDN兼容性方面做得不错，其它在WebP格式转换方面两者不分伯仲。

2.1 安装PHP扩展

无论是WebP Express还是WebP Converter for Media，在将图片转换为WebP格式都依赖于imagick、gmagick、gd等PHP组件。如果你用的是Oneinstack，可以直接使用脚本一键安装imagick。

先到 WordPress「工具 → 站点健康 → 信息 → 媒体处理」检查站点实际用的 PHP 图片库和 WebP 支持情况。PHP 7.4 起，自己编译 GD 时用 --with-webp；更早版本用 --with-webp-dir。下面的面板命令和插件截图是 2020 年左右的配置记录，现有站点优先用面板或系统包给实际运行的 PHP 版本启用扩展。PHP 文档：https://www.php.net/manual/en/image.installation.php 。

wget -O php.sh http://download.bt.cn/tools/php.sh
bash php.sh install 7.0

2.2 WebP Converter for Media

到官网选择安装WebP Converter for Media插件（现名 Converter for Media）。下面是改名前版本的界面，当前选项以插件页面为准：https://wordpress.org/plugins/webp-converter-for-media/ 。

选择WebP格式转换的方式，以及质量，一般默认的85即可。

然后就是是否定时转换、开启浏览器缓存、自动移除大于原图的WebP等设置。

WebP Converter for Media还提供一个批量转换WebP的功能，一般是初次安装好了插件后使用，因为执行一次转换要消耗不少的内存和CPU。

WebP Converter for Media批量转换可以看到实时进度，同时也可以看到插件会自动将大于原图的WebP移除。

配置Nginx自动推送WebP：

（此步可以省略，因为大多数编译的LNMP都自动加上了）Please edit the configuration file:

/etc/nginx/mime.types

添加以下代码:

types {
  # ...

  image/webp webp;
}

下面是该插件旧版生成目录对应的配置示例。现有站点先确认插件实际写到哪个目录、规则是否已由插件管理，再按版本说明配置。

server {
  # ...

  location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
    if ($http_accept !~* "image/webp") {
      break;
    }
    add_header Vary Accept;
    expires 365d;
    try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
  }
}

2.3 WebP Express插件

直接到官网安装WebP Express插件，是设置操作模式、哪些图片需要转换格式、图片路径等等。

在插件下方还有设置WebP格式图片的质量，一般默认即可，最后是选择是否在图片上传时转换格式以及批量转换格式。（点击放大）

修改Html。如果你的图片采用了CDN，WebP Express提供了修改Html的功能，它可以在你启用CDN时保证浏览器可以访问到WebP格式的图片，同时“Replacing <img> tags with <picture> tags”适用于开启了页面缓存的WP。（例如使用了缓存插件：W3 Total Cache）

修改Nginx规则（实现自动跳转到webP图片以及自动转换为WebP格式图片）：

# 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)

作者在官网也提供非常多的Nginx配置规则，如果你发现上述没有起作用，可以试试其它的：https://wordpress.org/plugins/webp-express/

三、CDN自适应WebP

上面的操作对于一般人来说觉得太麻烦了，你可以直接使用CDN，让CDN来选择是否给浏览器推送WebP转换格式。旧文演示的是又拍云，使用其他 CDN 时也可查它有没有图片格式协商或图片变体缓存功能。

四、总结

WebP Express还是WebP Converter for Media提供了自动将图片转换为WebP格式的功能，不过PHP请求—转换会消耗大量的资源，不防我们先手动将所有的图片都转换为WebP，方法参考：1.2 批量转化Webp。

配置好后，用同一个图片地址分别发带 Accept: image/webp 和不接受 WebP 的请求，各请求两次检查缓存命中后的 Content-Type 和 Vary。还要挑一张没有 WebP 副本的图片确认能回退到原图。CDN 无法区分格式时，可让原图和 WebP 用不同 URL，再用 <picture> 提供回退。WordPress 原生 WebP 说明：https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/ 。

文章更新于： 2026年11月4日下午6:22

关于站长（Qi），2008年开始混迹于免费资源圈中，有幸结识了不少的草根站长。之后自己摸爬滚打潜心学习Web服务器、VPS、域名等，兴趣广泛，杂而不精，但愿将自己经验与心得分享出来与大家共勉。

下一页十个国内优秀对象云存储服务使用对比-用于网站云存储和CDN加速 »

上一页 « 微软Azure VPS主机性能和速度测评-带宽充足速度快机房多功能强大

查看评论

zumenbo 说:

2022年6月2日 at 下午11:11

安装了WebP Express也没显示webp格式，edge和chrome也没显示，我在用cloudflare，有关系吗
- Qi 说:
  
  2022年6月5日 at 下午9:10
  
  要看你的Nginx规则有没有修改，他这个涉及到规则的重写，可能会导致不生效。
  - zumenbo 说:
    
    2022年6月7日 at 上午10:49
    
    我在免费空间，htaccess文件更新了，测试也通过了，但页面没有用webp
    - Qi 说:
      
      2022年6月7日 at 下午10:13
      
      测试通过了，后面还有一个将图片转化为webp的，这样网页的图片就会被替换了。
Joehom 说:

2022年3月27日 at 下午5:31

你好，关于“2.3 WebP Express插件”这一节中，我配置好了后，不知道是不是0.25新版插件的缘故，没用配置Nginx规则浏览器访问也自动呈现webp格式。
- Qi 说:
  
  2022年3月27日 at 下午5:35
  
  新版的插件会自动修改规则，不需要手动修改了。
  - Joehom 说:
    
    2022年3月27日 at 下午5:44
    
    谢谢！wzfou yyds!
哈哈笑123456 说:

2021年3月8日 at 下午7:27

好办法，学习了666
花岗岩 说:

2021年2月25日 at 下午7:59

苹果好像打不开
圆舞曲 说:

2021年2月25日 at 上午8:47

插件太多了，会卡吧。
呢哦说:

2021年2月23日 at 下午8:31

貌似Webp已经全部都支持了
owo 说:

2021年2月23日 at 下午1:30

WebP速度确实非常地快

发表评论