WebP 简介
WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。
WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google开始让WebP支持无损压缩和透明色(alpha通道)的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。
WebP是谷歌推出的一种图片格式,它的优点就是同等画面质量下,体积比jpg、png这些少了28%甚至45%,这也意味着使用webp可以使图片体积更小从而达到极大提升图片加载速度的效果,并且也能降低服务器带宽和流量成本。
简单来说就是2个方面的好处:
1)用户体验:更少的加载时间,减少等待;
2)节约成本:更少的带宽、流量,节省建站成本
做过一个测试,对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果:
WebP 兼容性
既然webp这么好,为什么没有大范围使用呢?
这是因为webp毕竟只是谷歌自己推出的,主要应用在谷歌自己的chrome浏览器和安卓系统,所以是存在兼容性问题的,也就是说如果使用不兼容的浏览器打开是无法显示webp图片的。
但是,目前来说连Edge浏览器都使用谷歌内核了,所以兼容性没什么好担心的。
上图右上角圈起来的数字,显示全球浏览器份额情况统计是有 80.53% 是支持的,
并且这么优秀的图片格式已经被越来越多的浏览器和设备兼容,这是大势所趋,
所以我们认为这个兼容问题是有必要找到解决方案的。
在WordPress启用WebP
如果你使用的是宝塔面板,可以结合这篇文章:【最新教程】宝塔7.1.1面板编译开启ngx_pagespeed – 让你的站点支持webp格式图片
在浏览器支持方面,现在主流的浏览器也都支持WebP格式,况且像微信公众号这样的大平台早已开始使用WebP图片,因此没有理由不将自己的博客的插图换成WebP了。
默认情况下,WordPress不支持上传WebP格式的图片,在主题的functions.php里添加以下代码即可:
1
2
3
4
5
|
function mimvp_filter_mime_types( $array ) { $array [ 'webp' ] = 'image/webp' ; return $array ; } add_filter( 'mime_types' , 'mimvp_filter_mime_types' , 10, 1 ); |
虽然现在已经可以上传WebP格式的图片了,但在媒体列表中看不到缩略图,这是因为WordPress在用wp_generate_attachment_metadata()函数生成图片数据时,使用了file_is_displayable_image()函数判断文件是否为图片,判断WebP图片的结果为否,因此中断了保存图片数据的操作。
解决办法是在主题的functions.php里添加以下代码:
1
2
3
4
5
6
7
8
|
function mimvp_file_is_displayable_image( $result , $path ) { $info = @ getimagesize ( $path ); if ( $info [ 'mime' ] == 'image/webp' ) { $result = true; } return $result ; } add_filter( 'file_is_displayable_image' , 'mimvp_file_is_displayable_image' , 10, 2 ); |
在这之后上传WebP格式图片,显示WebP格式图片,都不会再有问题了。