分享

让你的WordPress支持webp图片格式上传到媒体库

 看见就非常 2020-02-05

很久之前就发现WordPress上传jianshu或者微信图片不行,提示webp格式不支持。如今又发现今日头条保存下来的图片出现一样的问题,虽然表面看是jpg格式,但实际下载为webp格式。一介小民找到了解决方法:

步骤

打开 wordpress目录下的wp-includes/functions.php

搜索'image/gif',在下一行加入 'image/webp' => 'webp', 再次搜索gif,会出现第二第三个gif词,同理加入webp就行了。这样你的WordPress就支持微信图片、今日头条图片的上传到媒体了。

 

默认情况下,WordPress不支持上传WebP格式的图片,在主题的functions.php里添加以下代码即可:

function bzg_filter_mime_types( $array ) {
	$array['webp'] = 'image/webp';
	return $array; 
}
add_filter( 'mime_types', 'bzg_filter_mime_types', 10, 1 );

虽然现在已经可以上传WebP格式的图片了,但在媒体列表中看不到缩略图,这是因为WordPress在用wp_generate_attachment_metadata()函数生成图片数据时,使用了file_is_displayable_image()函数判断文件是否为图片,判断WebP图片的结果为否,因此中断了保存图片数据的操作。

解决办法是在主题的functions.php里添加以下代码:

function bzg_file_is_displayable_image($result, $path) {
	$info = @getimagesize( $path );
	if($info['mime'] == 'image/webp') {
		$result = true;
	}
	return $result;
}
add_filter( 'file_is_displayable_image', 'bzg_file_is_displayable_image', 10, 2 );

在这之后上传WebP格式图片不会再有问题了,但之前已经上传的其他格式的图片要替换为WebP格式还是比较麻烦,分享一下我的解决过程:

  1. 使用“Ubuntu下批量转换WebP格式图形工具”将wp-content/uploads目录中的图片全部转换为WebP格式,如果你是Windows系统,可以搜索一下相应的转换工具;
  2. 编写了一小段脚本读取数据库中所有的图片,使用wp_update_attachment_metadata()函数更新这些图片的数据;
  3. Gedit编辑器正则表达式替换wp_postmeta表中meta_key为_wp_attached_file的图片名称,可以看到这个表中meta_key为_wp_attachment_metadata对应的数据已经在第2步中替换了;
  4. Gedit编辑器正则表达式替换文章数据表中插入的图片链接;

由于我在处理时没有保存相应的脚本和正则表达式,所以你只有自己动手丰衣足食了。

关于webp
WebP是Google新推出的影像技术,它可让网页图档有效进行压缩,同时又不影响图片格式兼容与实际清晰度,进而让整体网页下载速度加快。

由于目前互联网上传输的数据有65%都是图片,WebP就是出于减少数据量、加速网络传输的目的而开发的。为了改善JPEG的图片压缩技术,他们使用了一种基于VP8编码(已在2010五月开源)的图片压缩器,利用预测编码技术,同时还采用了一种基于RIFF的非常轻量级的容器。这种容器只会给每张图片增加20字节,但能让图片作者保存他们想要存储的元数据。

与JPEG相同,WebP是一种有损压缩利用预测编码技术。但谷歌表示,这种格式的主要优势在于高效率。他们发现,“在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。
目前, Google放出了WebP文件解码器(libvpx)和命令行工具(webpconv),用于JPEG等格式图片与WebP格式之间的转换,不过系统支持暂时仅限Linux,Windows版本将在稍后推出。
WebP团队还在开发WebKit内核补丁,用于在Google Chrome浏览器中提供对WebP格式的原生支持。

美中不足的是,WebP格式图像的编码时间“比JPEG格式图像长8倍”。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多