2年前 (2016-12-04)  代码·功能 |   2 条评论  2,044 次围观 
文章评分 1 次,平均分 5.0

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

但是Webp 的缺点也很明显,就是只支持Chrome 浏览器,iOS 下的Safari 甚至都不支持。

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

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

实现方法

下面的代码直接加到functions.php中即可

默认代码支持的是又拍云,如果你使用的是七牛则将!/format/webp替换为?imageView2/format/webp

WordPress利用又拍云或七牛使用Webp图片格式

代码转自:fatesinger

实测上面这张图webp为40.8KB 原图322KB,而目前国内套壳的谷歌浏览器实在不少,为chrome内核浏览器采用webp格式图片可以为我们的图片cdn省下不少流量,同时也加快了页面的载入速度。

当然,上面代码需要你的图片全部存在自己的图床上,否则可能造成其他外链图片不显示(比如新浪图片),所以还需要一些改造来只重写自己图床上的图片。

 

除特别注明外,本站所有文章均为JUST FOR FUN原创,转载请注明出处来自http://im.acirno.com/2411.html

关于
在哪都是个打酱油的(+﹏+)

发表评论

表情 格式
  1. 图片是存在七牛上面的可以吧,直接修改functions.php即可?博客需要调整么?七牛那边你需要特殊处理么

    HuaManlou 评论达人 LV.2 1年前 (2017-02-07) [0] [0]
    • @HuaManlou你所有图片都在骑牛上的话直接用就行了,如果还有显示的图在其他图床或者本地空间,就需要修改上面代码的正则匹配域名部分使他只匹配你骑牛的域名

      kito 博 主 1年前 (2017-02-07) [0] [0]
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享