WebP格式是谷歌开发的一种旨在加快图片加载速度的图片格式,体积大概为jpg格式的2/3。但是实际使用中,一般人的图片并不是压缩过的,所以实际体积大约只有原图的三分之一甚至更少。如果一篇文章有多张图片,这速度提升的就不是一点半点了。
但是Webp 的缺点也很明显,就是只支持Chrome 浏览器,iOS 下的Safari 甚至都不支持,好在Chrome 的用户不好,我的访客Chrome 使用比高达67%。
那么问题来了,我们手头并没有webp 格式的图片,就算有还有不支持的浏览器,这我们也得考虑。幸运的是主流图片云储存都提供了输入格式的选择,webp 也包含在其中,只要你使用了此类云存储,那么都可以输出webp 格式了,我们剩下要做的就是判断何时输出Webp 格式。
简单的方法,可以根据HTTP 头中的accept 是否包含image/webp
来判断浏览器是否支持webp 格式。
实现方法
下面的代码直接加到functions.php
中即可
function fa_converse_webp($matches) { return $matches[1] . $matches['2'] . '!/format/webp'; // 七牛把!/format/webp替换为下面的字段 //?imageView2/0/format/webp } function fa_converse_webp_filter($content){ global $post; $content = preg_replace_callback("/(<img[^>]*src *= *[\"']?)([^\"']*)/i", 'fa_converse_webp' , $content); return $content; } function fa_is_support_webp(){ return strstr($_SERVER['HTTP_ACCEPT'],'image/webp'); } if ( fa_is_support_webp() ) add_filter('the_content','fa_converse_webp_filter');
默认代码支持的是又拍云,如果你使用的是七牛则将!/format/webp
替换为?imageView2/0/format/webp
。
这照片,好屌呀、O(∩_∩)O哈哈~
被特色图片震撼到了,充斥着荷尔蒙,这样就显得不专业了,
我是来看图的
七牛云不支持短期证书,也不支持 http/2
我看 static.fatesinger.com 域名的证书是 Let’s Encrypt 而且支持了 http/2
请问发哥是如何做到的?
@自然志
https://fatesinger.com/78756
当然,现在又拍云可以直接申请并自动续期,很方便。
@自然志 七牛已经支持Let’s Encrypt了!
图片好亮
嗯嗯,试试
@情醉中国风 测试
不错,我刚刚用这个代码了!就是没有在前端看到效果呀!
为啥我用了这个代码没有效果呢?无语了!
又可以折腾一番了