如何在 WordPress 中自动显示 WebP 图片格式

北忘山有几个方式能够帮助你快速在 WordPress 当中将所有原始的图片格式在支持 WebP 格式的浏览器当中使用 WebP 格式显示图片,并当用户使用未支持 WebP 格式时,自动使用原始的图片格式(JPG or JPGE or PNG)显示。

WebP 图片格式最早可追朔于2010 年,此时 WebP 开始问世,而 WebP 发展至 2018 年的今天,尚未普及于所有的浏览器,因此在尚未完全支持所有主流浏览器之前,也是 WebP 至今尚未被普及采用的原因之一。

image-20211204172541129

WebP 最初在 2010 年释出,目标是减少文件大小,但达到和 JPEG 格式相同的图片质量,希望能够减少图片文件在网络上的传送时间。

截至目前,主流浏览器当中有支持WebP格式的仅有Chrome与Opera,FireFox则是在近期内就会跟进支持WebP格式。

WebP 对于网站的好处

若撇除浏览器尚未支持 WebP 的缺点,使用 WebP 对于网站的好处非常多。 当你加载网站时,网站的加载速度会因为图片采用 WebP 格式而大大减少加载时间,帮助你加快网站速度,提供用户更好的浏览体验,尤其是当你的网站图片数量非常多时,使用 WebP 格式的好处就会更显而易见。

该如何在 WordPress 中实现 WebP 技术?

虽然WebP格式非常神,但是如果你的网站原本是使用JPG、JPGE、PNG格式,该如何快速的将其转换成WebP格式,以降低网站加载速度呢?

除此之外,又该如何避免未支持 WebP 格式的浏览器,会自动显示 JPG、JPGE、PNG 的原始图片格式呢?

Jetpack

img

使用 WordPress 官方 Automattic 所开发的Jetpack 外挂,能够帮助你自动的启用由 Automattic 所提供的免费 CDN 服务。 开启后,Jetpack 会自动将你网站所有的图片都经由 Jetpack 的 CDN 来显示图片,该 CDN 会自动将图片转成经由 WebP 压缩过后的图片,若用户的浏览器不支持 WebP 图片格式,该 CDN 也会自动切换为 JPGE or JPG or PNG 格式。

[c-downbtn type="default" url="https://tw.wordpress.org/plugins/jetpack/" pwd=""]Jetpack下载[/c-downbtn]

ShortPixel + Cache Enabler

image-20211204172236217

ShortPixel是一个自动图片的优化外挂,能够将所有 WordPress 媒体库的图片自动压缩成 WebP 格式,ShortPixel 本身有提供每月 100 张免费的图片优化 API 额度,当你有超过每月 100 张图片的需求时,只要多付一点钱就可以继续使用 ShortPixel 的图片压缩服务了。

对于一般的网站而言,一个月 100 张图片的自动优化额度应该是绰绰有余了。

image-20211204172220118

而在结合Cache Enabler缓存外挂之后,就能够将图片自动转成 WebP 格式显示,同时还能受惠于 Cache Enabler 的缓存,压缩 JS 与 CSS 文件,更进一步的压缩网站大小,提升网站加载速度。

[c-downbtn type="default" url="https://wordpress.org/plugins/shortpixel-image-optimiser" pwd=""]ShortPixel下载[/c-downbtn]

[c-downbtn type="default" url="https://wordpress.org/plugins/cache-enabler/" pwd=""]Cache Enabler下载[/c-downbtn]

EWWW Image Optimizer + Cache Enabler

虽然EWWW Image Optimizer是付费服务,但是新会员可以获得500张免费压缩图片的额度,用凿之后,就需要开始付费使用了。

但是EWWW Image Optimizer的价格相当便宜,每张图片只需 $0.003 美金,相当于压缩 1000 张图片的费用仅需 20RMB,适合有一定规模的网站使用。

image-20211204172257508

同样的,结合Cache Enabler缓存挂之后,就能够将图片自动转成 WebP 格式显示,同时还能受惠于 Cache Enabler 的缓存,压缩 JS 与 CSS 档案,更进一步的压缩网站大小,提升网站加载速度。

[c-downbtn type="default" url="https://wordpress.org/plugins/ewww-image-optimizer/" pwd=""]EWWW Image Optimizer下载[/c-downbtn]

Cloudinary – Image management and manipulation in the cloud + CDN

诚如上述提到的,Cloudinary 也有提供 WordPress 插件,能够自动帮助你将所有网站的图片自动压缩与切换成 WebP 格式,使用 Cloudinary 的 CDN 能够大大加速网站加载图片的时间。

image-20211204172001818

以技术来说,Cloudinary 与 Jetpack 同样都是使用自家的 CDN 服务来压缩与 Host 网站的图片。

[c-downbtn type="default" url="https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/" pwd=""]Cloudinary下载[/c-downbtn]

CloudFlare Pro

透过CloudFlare Pro版本,当中有一项Polish WebP conversion得以启用,启用后,CloudFlare 就会自动侦测支援WebP的浏览器,并同时帮助你压缩图片,使用WebP格式显示。

相信许多人的 DNS 代管都是使用 CloudFlare,由于 CF 免费版本就有提供免费 CDN 服务,因此即使未使用 CF Pro 版本来使用 WebP 的图片压缩服务,你还是可以享受到 CloudFlare 所带来的 CDN 节流,加速你的网站。

总结

如果你的网站目前尚未使用 WebP 的图片格式,那么通过今天的 WebP 介绍,或许你可以考虑将网站的图片格式转换成 WebP,以增快网站速度。

而不管最后你是否要将网站启用 WebP 图片格式,我都建议你在上传文件之前,都要经过压缩,而我最常用的在线压缩软件是ShortPixel,以及tiny,通过这个线上图片压缩图片服务,能够非常有效的减少图片的大小,同时保持良好的图片质量。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论