它是什么?

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)

完成

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

分类: Wordpress

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据