Nginx+WordPress实现自动转换兼容方案 Webp图片格式

WebP图片格式是Google开发的一种新的图片存储格式，用于减少图片容量、加快加载速度。据统计，webp格式压缩后的图像最终体积仅为JPEG的2/3左右，大大减少了容量。在用WordPress搭建自制外贸网站时，为主的祥助发现webp格式确实是一种更利于网站优化的图片格式。

本文介绍如何在WordPress中启用对webp图片格式的支持，并让网站或官网在支持webp的浏览器中以及在不支持webp格式的浏览器中自动输出较小容量的webp格式。然后以jpeg等格式输出原始图像。

温馨提醒小助手：

1。在进行任何重大更改之前备份网站文件和数据库是一个好习惯。如果您使用快照功能，建议将当前快照作为备份。进行备份是一个很好的做法。

2。虚拟主机可以配置吗？本教程适合使用阿里云ECS等独立主机进行具有独立权限的站长操作。

什么是webp格式WebP是Google开发的一种新的图像格式。支持Chrome、Opera、Android等全球73.13%的浏览器（数据统计来自国外论坛）。优化压缩算法后，可以在网页上展示。获得更快、更小的图像。 webp 比同等视觉质量的 PNG 和 JPEG 图像小大约 30%。同时，WebP格式还具有与其他图像格式相同的功能。

• 有损压缩：webp有损压缩基于VP8关键帧编码。 VP8 是 On2Technologies 创建的视频压缩格式，是 VP6 和 VP7 格式的更高版本。

• 无损压缩：WebP无损压缩格式由WebP团队开发。
• 透明度：8 位 Alpha 通道对于图形很有用。 Alpha 通道可与有损 RGB 一起使用，这一功能目前在任何其他格式中均不可用。
• 动画：webp支持真彩色动画图像。
• 元数据：webp可以包含EXIF和XMP元数据（例如相机使用的）
• 颜色配置文件：webp可以嵌入ICC配置文件。

安装Webp插件

WordPress仪表板后台主界面，点击插件栏，选择添加新的，搜索EWWW Image Optimizer然后点击安装并启用

1. Plugin插件安装完毕，搜索EWWW Image Optimizer Settings，首先注意Optimization API Key一栏，可以到官方应用key，激活后，优化选项可以启用高级优化，我们可以把这些也忽略掉，因为传统的JPEG 、PNG等图片有很多免费的在线优化工具可以在上传前进行优化。
2. 单击wepb-JPG/PNG to WebP并选中此选项。此功能是自动 webp 转换：从 JPG 到 WebP 的转换是有损的，但质量损失很小。 PNG 到 WebP 的转换是无损的。

   -jpg等原图不会被删除。仅当检测到支持 webp 格式的浏览器时才会调用 webp 文件。

3. 现在右下角的webp测试图片是红色的，因为我们还需要配置Nginx服务器。服务器
4. 可能会指示EWWW Image Optimizer在打开插件后需要exec()或API密钥。您的系统管理员已禁用 exec() 函数。请他或她启用它。
5. 我们需要编辑php.ini文件。搜索 exec，找到下一行，删除 exec 并保存更改。然后重启php服务并进入插件设置。不会报告此错误。

6. disable_functions = passthru,exec,system,chroot,chgrp,chown,shell_exec

Nginx服务器配置

编辑Nginx配置文件：常用路径为/etc/nginx/nginx.conf，如果是宝塔面板中配置的服务器，直接点击Nginx模块配置，添加以下代码：

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

这段代码告诉Nginx，如果浏览器的Accept header包含“webp”，$webp_suffix应该设置为“.webp”。

第二个功能是确保Nginx知道.webp文件是什么并识别webp格式；尽管 较新版本的 Nginx 应该已经可以识别 WebP 格式 ，但 为主的祥助 仍然建议启用 mime。 types 文件，看看它是否包含此代码（路径/etc/nginx/）来告诉 Nginx 这个新文件类型。寻找下一行。如果位置找不到，则需要手动添加：

image/webp  webp;

注：宝塔建站面板下Nginx的mime.type文件位于

/www/server/nginx/conf/mime 。 types

最后，我们需要在服务器块中设置代码来处理可能是 WebP 格式的转换。通常可以在 /etc/nginx/sites-enabled/default 中找到。按照老做法，如果你在宝塔面板搭建网站，只需点击站点-设置-配置，在这里添加代码块即可：

location ~* ^.+\.(png|jpe?g)$ {  add_header Vary Accept;  try_files $uri$webp_suffix $uri =404;}

完成以上三步后，建议重启Nginx服务

此时我们回到EWWW Image Optimizer-settings-webb-JPG/PNG to WebP，看看右下角的webp测试图片是否变绿。如果仍然是红色，我们需要启用js rewrite的辅助功能，尤其是在使用cloudfare等CND缓冲功能时。需要开启JS重写功能4

JS重写功能

进入插件设置EWWW Image Optimizer设置-webp-JS WebP Rewrite，勾选此选项并刷新页面。右下角的webp测试图片是。它变成绿色，你就完成了！

5

测试对比

我们先说一下WordPress下运行webp图片格式的逻辑。当我们为网站配置了上述webp功能后，服务器和插件会首先检测jpeg等图像是否转换为webp格式。文件容量是否会小于原始图像；如果较小，则生成webp并进行智能输出调用；如果不小于，则不会进行webp转换和调用。该插件的优点在于其高度智能的输出逻辑。

其次，对于支持webp图片格式的浏览器，会自动调用并执行图片对应的webp格式。例如

因为保留所有原始图像，不支持webp格式的浏览器将运行并调用webp格式。 jpeg 和其他原始图像

这个逻辑是运行 webp 的更好方法。您不必担心客户使用的浏览器不支持webp而导致网站无法显示图像。它非常聪明。下面是个人测试的对比结果：

最后说一个小点：

插件对jpeg、png、jpg图像格式的默认压缩级别很简单。为主的祥助对其进行了测试，并与tinypng进行了比较，压缩速度稍低。因此，如果您没有申请免费的API，祥介建议通过https://tinypng.com/优化所有图片，然后上传到WordPress媒体库。同时插件会自动判断压缩后的图像与原始图像的容量差异。是否要切换到 webp。

作者：为主的祥助               版权所有：跨境E站