WordPress 将图片转换为 WebP 格式的插件“Images to WebP”

By | 最新修改:2024-08-17

前言

WordPress 插件“Images to WebP”可以将其他格式的图片转换为 WebP 格式,包括 PNG、JPEG等图片格式。

转换后的 WebP 格式对 WordPress 前端的性能优化效果明显,不仅图片缩小了体积,省了带宽和下载时间,并且因为这个原因,前端的加载渲染速度明显优化。

插件“Images to WebP”可以将现有的图片转换成 WebP 格式,也可以将新上传的图片也转换为 WebP。

结合 Nginx 或 Apache 服务器的相关配置,能够智能响应原格式的图片,还是 WebP。

什么是 WebP

WebP 是一种新兴的现代的网红图像格式,是由谷歌最初发布的项目。

为什么要用 WebP

比传统的 JPEG、PNG 和 GIF 有压缩效率高、压缩效果好、同时支持有损和无损压缩,以及相对体积小等特点。

哪些浏览器支持 WebP

至目前为止,几乎所有的现代浏览器都支持该图像格式。诸如 Chrome、Chromium、Opera、Safari、微软的 Edge 等。

插件主页: https://wordpress.org/plugins/images-to-webp/


安装“Images to WebP”

安装、激活和缷载 WordPress 插件的教程

这次通过管理后台在线安装插件。

导航到“插件(Plugins) -> 安装插件(Add New)”,然后搜索“Images to WebP”。

以下是要安装的插件:

安装插件 Images to WebP

点击“立即安装”进行插件的安装。


设置 nginx.conf 以支持该插件

插件安装之后,点击“启用”,进入以下界面:

Nginx 的相关设置

在 Nginx 配置文件中的 http{} 块输入以下的指令:

map $arg_no_webp $no_webp{
    default"";
    "1""no_webp";
}

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

然后在指定的 server{} 块中输入以下的指令:

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

重启 Nginx 服务。

刷新页面。


设置插件

激活后的插件配置页面入口在侧边栏的“媒体”选项中。

导航到“媒体 -> Images to WebP”。

默认进入“通用”设置页面,此界面拥有所有该插件的设置。

General(通用)

Images quality(图像质量)

默认是 85%,笔者设置为 100%。

因为转换后的 WebP 图像总是有损失的,然后这不是实时转换,因此 100%的质量对性能也没什么影响。

该数字设置越大,生成的 WebP 文件会越大,消耗的计算资源越多。

Convert images to WebP during upload(在上传过程中将图像转换为 WebP)

如果你想将图片文件上传时转换成 WebP,那么将该选项设为“是(Yes)”。

否则设为“否(No)”。

Conversion method(转换方法)

选择使用哪种转换方式。

这里有“Imagick”和“GD”两种选项。

“Imageick”转换效率低些。“GD”快,但是压缩率低些,一些图像根本转换不了格式。

都差不多,各有优缺点。

不过,笔者发现 “Imagick” 没法转换 JPEG 图像,而 “GD” 可以。

Convert these image extensions to WebP(转换这些图像扩展到 WebP)

该选项设置要转换带哪些扩展名的图像到 WebP。

一般全选,不知道为什么,笔者转换 GIF 失败,转换后没有动画。

因而笔者排除了“gif”,其余的都选。

Delete original images after conversion

选择是否转换为 WebP 之后删除原图像。

这个操作不可逆,如果真要这样做,请先做好备份。

当然选择“否(No)”。

点击“保存(Save)”保存修改。

当前“通用”选项的配置如下:

通用选项总览

点击图片查看大图


插件的使用

Convert existing images(转换现有的图像)。

勾选需要转换成 WebP 的原始图像目录/文件。

“Find and convert MISSING images”:查找并转换缺失的图像。

“Find and convert ALL images”:查找并转换所有图像。

前者意思是只要后者执行后还遗漏某些图像还没有转换的话,运行前者可以转换那些缺漏的图像为 WebP 格式。

由于转换图片格式需要大量的服务器资源,因此,为了使转换过程进行顺利,如果服务器性能不强,请将 PHP-FPM 的设置文件 www.confpm.max_requests 指令设置小一点,比如 5

pm.max_requests 指令用于设置每个 PHP-FPM 子进程在处理指定的请求数之后自动重启,从而释放资源。

如果出现类似以下信息则表示转换成功:

成功转换成 WebP 格式

点击图片查看大图

再次点击“Convert existing images(转换现有的图像)”返回选择转换文件的界面。

若是在转换过程中出现错误提示,并且是不断循环的,可以重启 php-fpm 和 nginx 进程来打断错误的输出循环,并且插件会自动继续未完成的转换任务。


后记

WordPress 插件“Images to WebP”配置简单,很实用,并且是免费的,笔者很喜欢。

总体上来说是好用的插件。



程序知路

鉴于本人的相关知识储备以及能力有限,本博客的观点和描述如有错漏或是有考虑不周到的地方还请多多包涵,欢迎互相探讨,一起学习,共同进步。

本文章可以转载,但是需要说明来源出处!

本文使用的部分图片来源于网上,若是侵权,请与本文作者联系删除: admin@icxzl.com