2024 年 4 月 28 日 我的频道
Wordpress 支持 Webp
  • 2022
  • Sunny

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 支持的像素最大数量是 16383×16383。有损压缩的 WebP 仅支持 8-bit 的 YUV 4:2:0 格式。而无损压缩(可逆压缩)的 WebP 支持 VP8L 编码与 8-bit 之 ARGB 色彩空间。又无论是有损或无损压缩皆支持 Alpha 透明通道、ICC 色彩配置、XMP 诠释数据。

WebP 有静态与动态两种模式。动态 WebP(Animated WebP)支持有损与无损压缩、ICC 色彩配置、XMP 诠释数据、Alpha 透明通道。

WebP 的有损压缩算法是基于 VP8 视频格式的帧内编码,并以 RIFF 作为容器格式。因此,它是一个具有八位色彩深度和以 1:2 的比例进行色度子采样的亮度-色度模型(YCbCr4:2:0)的基于块的转换方案。不含内容的情况下,RIFF 容器要求只需 20 字节的开销,依然能保存额外的元数据(metadata)。WebP 图像的边长限制为 16383 像素。

从上面的介绍可以看出,WebP 是谷歌推出的一种图片格式,它的优点就是同等画面质量下,体积比 jpg、png 这些少了 28%甚至 45%,这也意味着使用 webp 可以使图片体积更小从而达到极大提升图片加载速度的效果,并且也能降低服务器带宽和流量成本。

简单来说就是 2 个方面的好处:

  1. 用户体验:更少的加载时间,减少等待;
  2. 节约成本:更少的带宽、流量,节省建站成本。

WordPress 支持 WebP

在浏览器支持方面,现在主流的浏览器也都支持 WebP 格式,况且像微信公众号这样的大平台早已开始使用 WebP 图片,因此没有理由不将自己的博客(例如:米扑博客)的插图换成 WebP 了。
默认情况下,WordPress 不支持上传 WebP 格式的图片,在主题的 functions.php 里添加以下代码即可:

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 里添加以下代码:

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 );

相对而言,即使是 Wordpress 已经做到可以上传和兼容 Webp 图像了,最主要的还是看你的虚拟主机是否支持!笔者所在的服务器空间是在 Bluehost ,如今依然无法可以支持 Webp 图像。

WORDPRESS
1382
0

Author Box

名字:Sunny
注册:Jan 30, 2021
简介:技术菜鸟,拷贝、黏贴代码中 ……

Comment Box

0 0 投票数
Article Rating
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论