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

2019-07-0411:32:56服务器及运维1 5,217 views字数 2848阅读模式

WebP图片格式是谷歌(google)开发的一种新式图片存储格式,目的在于减少图片容量,加快加载速度。根据统计图片压缩为webp格式后期体积大约只有JPEG的2/3,极大的降低了容量大小。为主的祥助在Wordpress建设外贸自建站的过程中,发现webp格式的确是一种更加站点优化友好的图片格式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

这篇文章祥助分享一下在wordpress如何开启webp图片格式支持,并且让网站或官网在支持webp的浏览器上时自动输出容量更小的webp格式,而在不支持webp格式的浏览器上则输出原图jpeg等格式的操作步骤。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

温馨提示小助手:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

1. 首先操作大的更改前的好习惯,备份网站文件和数据库,如果有使用快照功能,建议一并创建一份当前快照作为备份,备份是好习惯。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

2.虚拟主机能无法进行配置,本教程适合使用独立主机如阿里云ECS等用于独立权限的站长操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

Nginx+WordPress开启Webp图片格式自动转换兼容方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html


1

什么是webp格式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

   WebP是由Google开发的新图像格式,支持Chrome,Opera和Android等全球73.13%的浏览器(数据统计来源国外论坛),经过压缩算法优化后可在Web上实现更快,更小的图像。webp与同等视觉质量的PNG和JPEG图像相比,其尺寸缩小了约30%。与此同时,WebP格式还具有与其他图片格式相同的功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html
  • 有损压缩:webp有损压缩基于VP8关键帧编码,VP8是On2Technologies创建的视频压缩格式,是VP6和VP7格式的后续版本。
  • 无损压缩:webp无损压缩格式由WebP团队开发。
  • 透明度:8位Alpha通道对图形图像很有用。Alpha通道可以与有损RGB一起使用,这是目前任何其他格式都无法使用的功能。
  • 动画:webp支持真彩色动画图像。
  • 元数据:webp可能具有EXIF和XMP元数据(例如,由相机使用)
  • 颜色配置文件:webp可能具有嵌入式ICC配置文件。
2

Webp插件安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

WordPress dashboard后台主界面,点击插件plugins栏,选择add new新增,搜索EWWW Image Optimizer后点击安装并启用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

  1. 插件plugins-installed已安装,找到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 requires exec() or an API key. Your system administrator has disabled the exec() function, ask them to enable it.
  5. 我们需要编辑php.ini文件,搜索 exec,定位到下面这一行,删除其中的exec后保存修改,之后重启php服务再进入插件设置就不会报这个错误了
  6. disable_functions = passthru,exec,system,chroot,chgrp,chown,shell_exec
3

Nginx服务器配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

    编辑Nginx配置文件:一般路径为/etc/nginx/nginx.conf,如果是宝塔面板配置的服务器,则直接点击Nginx模块-配置,添加如下代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

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

    这段代码是告诉Nginx如果浏览器的Accept标头包含“webp”,则将$ webp_suffix设置为“.webp”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

第二个功能是确保Nginx知道.webp文件是什么,识别webp格式;虽然较新版本的Nginx应该已经识别出WebP格式,但为主的祥助还是建议打开mime.types文件去看看是否含有该代码(路径/ etc / nginx /中)以此告诉Nginx这个新文件类型。查找下列这行此行,如果定位找不到,则需要手动添加它:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

image/webp  webp;

注意啦:宝塔面板建站下Nginx的mime.type文件位于文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

/www/server/nginx/conf/mime.types文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

      最后我们需要在在server服务器块中设置代码,以处理可能具有WebP格式的转换。通常位于/ etc / nginx / sites-enabled / default中。老惯例,宝塔面板建站的话直接点击站点-设置-配置,从这里添加代码块:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

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

以上三个步骤都操作完毕后,建议重启一次Nginx服务文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

这时候我们再返回EWWW Image Optimizer-settings-wepb-JPG/PNG to WebP,看看右下角webp测试图片是否变绿,如果还是红色,那么我们则需要启用js重写的辅助功能,特别是使用了cloudfare等CND缓冲功能,那开启JS重写是必须操作的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

4

JS重写功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

      进入插件的设置EWWW Image Optimizer-settings-webp-JS WebP Rewriting,勾选此项后刷新页面,右下角的webp测试图片就变成绿色了,大功告成!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

Nginx+WordPress开启Webp图片格式自动转换兼容方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

Nginx+WordPress开启Webp图片格式自动转换兼容方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

5

 测试对比文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

首先说一下wordpress下输出webp图片格式的逻辑,当时我们给站点配置了上述webp的功能后,首先服务器和插件会检测,如果jpeg等图片转换为webp格式后,其文件容量大小是否会比原图更小;如果更小,则生成webp并进行智能输出调用;如果不会更小,则不做webp转换和调用。这个插件的优点就在于这里,非常智能化的输出逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

其次对支持webp图片格式的浏览器,自动调用和输出该图片对应的webp格式,如文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

因为会保留全部的原图,那么对不支持webp格式的浏览器,输出和调用其jpeg等原图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

这个逻辑就是比较好的webp输出方式,不用怕客户使用的浏览器不支持webp而导致网站不显示图片,非常智能化。以下是个人测试的对比结果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

Nginx+WordPress开启Webp图片格式自动转换兼容方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

最后补充一个小点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

插件默认对jpeg,png,jpg图片格式的压缩级别是basic,为主的祥助测试了和tinypng对比,其压缩率要低一点。因此没有申请到免费API的情况下,祥助建议所有的图片先通过https://tinypng.com/进行一次优化,再上传到wordpress媒体库,同时插件会自动判断压缩后与原图的容量差异决定是否要转webp。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

作者:为主的祥助                    版权:跨境E站文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yunwei/13969.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yunwei/13969.html
Comments  1  访客  1
    • 米扑博客 0

      写得很赞 学习了

    Comment

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定