【WordPress教程】WordPress支持WebP格式图片上传方法

WordPress本身（此时的版本为5.0.3）并不支持WebP图片的上传和在媒体库中生成略缩图。所以为了方便使用WordPress，文章将会介绍如何通过修改functions.php文件使之支持WebP格式的图片的上传与显示其略缩图

WebP是一种由Google于2010年提出的图片压缩格式 。
WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3

PhotoShop高度压缩图片的方式已经可以大幅度压缩图片体积，但WebP格式的图片相较于这种方式图片体积还要小2倍！

在浏览器支持方面，现在主流的浏览器也都支持WebP格式，况且像微信公众号这样的大平台早已开始使用WebP图片，因此没有理由不将博客的插图换成WebP了。

默认情况下，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 的缺点也很明显，就是只支持 Chrome 浏览器，iOS 下的 Safari 甚至都不支持。幸好，国内大部分浏览器都是 Chrome 内核的浏览器。

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

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

实现方法

下面的代码直接加到 functions 文件中即可

function fa_converse_webp($matches) {
 return $matches[1] . $matches['2'] . '!/format/webp';
 // 七牛把!/format/webp替换为下面的字段
 //?imageView2/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/format/webp。

此方案确实可以实现对于Webp的浏览器适配问题，但一旦启用缓存就不灵了。

完美解决方案：

下面记录一下基于七牛提供的图片处理服务使用Webp的完美解决方案：

思路简要概括

利用js判断浏览器是否支持webp，如果支持则输出Webp格式，否则原格式输出。由于浏览器加载渲染页面的原因，此方案需要配合图片延迟加载来完成，比如jQuery的某插件。

具体实现

• 在七牛存储空间新建一个图片样式，输出格式选择WEBP，然后样式名称随便起个名字，比如：mywebp，其他选项根据跟人需要选择。

• functions.php中加入如下代码，加载js文件

  function add_lbtbj_res() {
  	wp_register_script('lbtbj', get_template_directory_uri() . 'lbtbj.js');
  	wp_enqueue_script('lbtbj');
  }
   
  add_action('wp_enqueue_scripts', 'add_lbtbj_res');

   

• js代码实现如下：

function checkWebp() {
    try {
        return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
    } catch (err) {
        return false;
    }
}
 
jQuery(function ($) {
    let checkPic = function (isWebP) {
        $('img').each(function(i, v) {
            if (isWebP) {
                // 正则处理，img标签的src属性加上图片样式名称，由于本人很懒而且正则很烂，各位自行解决
            } else {
                // 正则处理，img标签的src属性去掉图片样式名称，由于本人很懒而且正则很烂，各位自行解决
            }
        });
    };
    checkPic(checkWebp());
});

完成~