让 WordPress 支持 WebP格式图片

WordPress162.1K阅读模式

让 WordPress 支持 WebP格式图片

让WordPress 支持 WebP格式图片

section

WordPress 默认不支持WebP格式图片上传,将下面代码添加到当前主题函数模板functions.php中,即可解决上传问题。

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

展开收缩
section

另一段类似的代码

function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

section

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

该函数位于:wp-admin/includes/image.php

展开收缩

function file_is_displayable_image( $path ) {
    $displayable_image_types = array( IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_BMP, IMAGETYPE_ICO );
 
    $info = @getimagesize( $path );
    if ( empty( $info ) ) {
        $result = false;
    } elseif ( ! in_array( $info[2], $displayable_image_types, true ) ) {
        $result = false;
    } else {
        $result = true;
    }
 
    /**
     * Filters whether the current image is displayable in the browser.
     *
     * @since 2.5.0
     *
     * @param bool   $result Whether the image can be displayed. Default true.
     * @param string $path   Path to the image.
     */
    return apply_filters( 'file_is_displayable_image', $result, $path );
}

section

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

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

展开收缩
function webp_is_displayable($result, $path) {
	if ($result === false) {
		$displayable_image_types = array( IMAGETYPE_WEBP );
		$info = @getimagesize( $path );
		if (empty($info)) {
			$result = false;
		} elseif (!in_array($info[2], $displayable_image_types)) {
			$result = false;
		} else {
			$result = true;
		}
	}
	return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

section

本文中的插图就是webp图片,以目前的网络速度使用webp图片并不完全为了加载快,而是当图片很多时webp图片优势就明显了,可以减少三分一以上的空间占用。虽然目前七牛、又拍云、阿里云oss、腾讯云cos等都支持WebP,可惜之前苹果设备不支持webp图片,这也可能是WordPress一直不支持webp图片的原因吧。

不过新版Safari和微信已支持webp图片,是个好消息。

嫌改代码麻烦可以安装插件:Allow Webp image

代码源自:

https://mariushosting.com/how-to-upload-webp-files-on-wordpress/

https://www.beizigen.com/2205.html

本文的方法已过时,目前WP已默认支持webp。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  16  访客  10  作者  6
    • 夜未央
      夜未央 3

      IE也不支持,插件和有些CDN能自动判断浏览器,返回不同格式的图片,但这样在上传时就需要自动将图片存成不同的格式。不懂技术,不知道这样的自动判断是否影响加载速度,感觉现在的CDN速度已经不是问题,所以一张图片大几十K对速度来说影响不大,除非是图很多的页面。

        • 知更鸟
          知更鸟

          @ 夜未央 微软都使用 Chromium 内核了,还哪有IE
          不是为了速度,是为了少占空间,当你有一万张图片,优势就明显了

        • 凤凰单丛
          凤凰单丛 0

          使用webp对苹果用户相当不友好,发现苹果版的微信打开网站,也是不显示图片的。

          • wang
            wang 0

            wp5.51,该修改办法对版本无效。

              • 知更鸟
                知更鸟

                @ wang 这个和WP版本无关
                文章修改了,可以尝试安装文章中推荐的插件试试

              • 白杨博客
                白杨博客 2

                知更鸟主题自带这个功能吧?

                • 佛系软件
                  佛系软件 2

                  大佬有没有把jpg变成webp图片的插件啊,本地不保留webp图片,就是在jpg后缀加一个webp后缀这样的,以前好像用过这样的插件

                  • 科技HUB
                    科技HUB 0

                    感谢鸟哥分享,虽然oss这些都支持转webp格式,但和本质的webp调用有差别。

                      • 知更鸟
                        知更鸟

                        @ 科技HUB 这篇文章已过时,目前最新版的WP已默认支持webp

                      • 遇见台儿庄
                        遇见台儿庄 5

                        鸟哥啊,文章缩略图怎么支持webp图片?

                      匿名

                      发表评论

                      匿名网友
                      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                      拖动滑块以完成验证