WordPress 利用七牛使用 Webp 图片格式

2017-07-2721:16:57 31 5,967
摘要

WebP格式是谷歌开发的一种旨在加快图片加载速度的图片格式,体积大概为jpg格式的2/3。但是实际使用中,一般人的图片并不是压缩过的,所以实际体积大约只有原图的三分之一甚至更少。如果一篇文章有多张图片,这速度提升的就不是一点半点了。

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
WordPress 利用七牛使用 Webp 图片格式
之前做过一个测试,对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果:
WordPress 利用七牛使用 Webp 图片格式

WebP 格式是谷歌开发的一种旨在加快图片加载速度的图片格式,体积大概为 jpg 格式的 2/3。但是实际使用中,一般人的图片并不是压缩过的,所以实际体积大约只有原图的三分之一甚至更少。如果一篇文章有多张图片,这速度提升的就不是一点半点了。

那么究竟什么是 WebP ?

WebP(发音 weppy),是一种同时提供了有损压缩与无损压缩的图片文件格式,派生自视频编码格式 VP8,是由 Google 在购买 On2 Technologies 后发展出来,以 BSD 授权条款发布。

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

2011 年 11 月 8 日,Google 开始让 WebP 支持无损压缩和透明色的功能,而在 2012 年 8 月 16 日的参考实做 libwebp 0.2.0 中正式支持。

根据 Google 较早的测试,WebP 的无损压缩比网络上找到的 PNG 档少了 45%的文件大小,即使这些 PNG 档在使用 pngcrush 和 PNGOUT 处理过,WebP 还是可以减少 28%的文件大小。

但是 Webp 的缺点也很明显,就是只支持 Chrome 浏览器,iOS 下的 Safari 甚至都不支持,好在 Chrome 的用户不好,我的访客 Chrome 使用比一直还是很高的。

那么问题来了,我们手头并没有 webp 格式的图片,就算有还有不支持的浏览器,这我们也得考虑。幸运的是主流图片云储存都提供了输入格式的选择, webp 也包含在其中,只要你使用了此类云存储,那么都可以输出 webp 格式了,我们剩下要做的就是判断何时输出 Webp 格式。

简单的方法,可以根据 HTTP 头中的 accept 是否包含 image/webp 来判断浏览器是否支持 webp 格式。

七牛云和又拍云目前都可以完美的支持 WebP 格式的自动转换,下面的代码就是以七牛云为例的:

  1. //WordPress 利用七牛使用 Webp 图片格式
  2. function fa_converse_webp($matches) {
  3.     return $matches[1] . $matches['2'] . '?imageView2/0/format/webp';
  4.     // 又拍云把?imageView2/0/format/webp 替换为下面的字段
  5.     // !/format/webp
  6. }
  7. function fa_converse_webp_filter($content){
  8.     global $post;
  9.     $content = preg_replace_callback("/(<img[^>]*src *= *[\"']?)([^\"']*)/i", 'fa_converse_webp' , $content);
  10.     return $content;
  11. }
  12. function fa_is_support_webp(){
  13.     return strstr($_SERVER['HTTP_ACCEPT'],'image/webp');
  14. }

将上述代码放到 function.php 里保存即可。

下面放上几张 Gif 动画图片,大家可以用 Chrome 浏览器打开看看转换结果。

WordPress 利用七牛使用 Webp 图片格式 WordPress 利用七牛使用 Webp 图片格式
这里要特别感谢【大发贱志』博客的【WordPress 利用又拍云或七牛使用 Webp 图片格式』一文的无私首发分享。

悲剧了,竟然无效

放入上述代码后图片竟然都无法打开了,无语了,看来传说中七牛对 WebP 的支持还是不完善呀!给位站长忽略此代码吧,至少目前使用七牛插件的是不支持的了。郁闷中……

 

 

历史文章推荐:

  • 本博客公众号
  • 扫一扫关注!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

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

目前评论:31   其中:访客  16   博主  15

    • 米扑博客 米扑博客 4

      写得很赞 学习了

      • 23958780 23958780 3

        谷歌pagespeed模块有这个功能,安装后会把前台图片压缩成.webp格式,就拿我的logo来说原图是32K压缩后是12K,页面加载速度可以说是提升明显。

          • 23958780 23958780 3

            @23958780 刚用自带浏览器看了下代码,谷歌pagespeed还是比较智能的,如果浏览器不支持.webp格式的话它会自动改成JPG&PNG格式的所以不会出现不兼容浏览器的情况。

              • 明月登楼 明月登楼 Admin

                @23958780 浏览器可以,但是CDN不兼容,没有CDN隐藏真实IP,就意味着裸奔,现在的互联网安全环境下暴露真实IP就意味着分分钟被CC/DDOS攻击的风险呈几何级增加!

                  • 狂放 狂放 4

                    @明月登楼 烧钱才是真王道。。。大佬二话不说把CDN节点全打死了

                • 明月登楼 明月登楼 Admin

                  @23958780 谷歌的这个页面压缩是很好,但是存在严重的兼容性问题!国内的CDN无法识别和缓存这些压缩过的静态文件,造成频繁的回源请求变相的增加了服务器负载!我去年就已经验证过,放弃使用了!!