首先,文章标题是个伪命题,因为并不能直接转换,而需要用到 Aliyun 的 OSS 和 WordPress 插件 OSS Upload。

其次,“自动压缩” 也不全对,因为在不支持 WebP 的浏览器上仍然能以 JPG 等格式正常浏览。

百度搜索 “WordPress 自动压缩为 WebP” 可以有一堆解决方案,然而本方法相对最简单,在 Chrome 浏览器能加快 20-30% 的加载速度且完美支持多种非 Chrome 浏览器,如果不想用了在插件里去掉勾选即可恢复,故值得推荐。

步骤:

1、开通 Aliyun OSS。

2、下载最新版OSS Upload 4.4

3、激活后勾选自动压缩选项。

自动压缩为WebP
自动压缩为 WebP

4、在 Aliyun OSS 中,设置一个额外样式,例如 watermark_webp。

新样式watermark_webp
新样式 watermark_webp

5、在 watermark_webp 的设置中,将 “格式转换” 设为 webp。

格式转换设为webp
格式转换设为 webp

如下图,用 Chrome 浏览则下载为 WebP,用 Safari 或 IE 打开则下载为 JPG。

Summer
Summer

知识库:《WebP 相对 PNG、JPG 有什么优势?


2020/4/29

WebP 效果已取消,特此备注。


2020/9/3

function.php中加入判断代码后,WebP 效果已恢复。代码详情:

// 简单浏览器判断代码
$is_lynx = $is_gecko = $is_winIE = $is_macIE = $is_opera = $is_mozilla = $is_safari = $is_chrome = $is_iphone = false;

if ( isset($_SERVER['HTTP_USER_AGENT']) ) {
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx') !== false ) {
        $is_lynx = true;
    } elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'chrome') !== false ) {
        if ( stripos( $_SERVER['HTTP_USER_AGENT'], 'chromeframe' ) !== false ) {
            $is_admin = is_admin();
            if ( $is_chrome = apply_filters( 'use_google_chrome_frame', $is_admin ) )
                header( 'X-UA-Compatible: chrome=1' );
            $is_winIE = ! $is_chrome;
        } else {
            $is_chrome = true;
        }
    } elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'safari') !== false ) {
        $is_safari = true;
    } elseif ( ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Trident') !== false ) && strpos($_SERVER['HTTP_USER_AGENT'], 'Win') !== false ) {
        $is_winIE = true;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') !== false ) {
        $is_macIE = true;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') !== false ) {
        $is_gecko = true;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false ) {
        $is_opera = true;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla') !== false ) {
        $is_mozilla = true;
    }
}
if ( $is_safari && stripos($_SERVER['HTTP_USER_AGENT'], 'mobile') !== false )
    $is_iphone = true;
$is_IE = ( $is_macIE || $is_winIE );

// 判断是否是 Safari/IE 并将 watermark_webp 替换为 watermark
function ossreplace($text) {
	$return = str_replace('?x-oss-process=style%2Fwatermark_webp', '?x-oss-process=style%2Fwatermark', $text);
	$return = str_replace('?x-oss-process=style/watermark_webp', '?x-oss-process=style/watermark', $return);
	return $return;
}
if ( $is_safari || $is_IE ) {
	add_filter('the_content', 'ossreplace');
}
// 判断是否是其它浏览器并将存量 watermark 替换为 watermark_webp
function ossreplacerev($text) {
	$return = str_replace('?x-oss-process=style%2Fwatermark', '?x-oss-process=style%2Fwatermark_webp', $text);
	$return = str_replace('?x-oss-process=style/watermark', '?x-oss-process=style/watermark_webp', $return);
	return $return;
}
if ( !$is_safari && !$is_IE ) {
	add_filter('the_content', 'ossreplacerev');
}

喜欢 js 的,可以考虑 js 代码判断 WebP:

// 公共方法,操作放原图还是放WebP图
var checkPic = function(isWebP){
    $("#pics img").each(function(i,v){
        var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
        $(v).attr('src',src);
    })
}
// 第一种方法
var isWebP = false;
var img = new Image();
img.onload = function(){
    isWebP = !!(img.height>0 && img.width>0);
    checkPic(isWebP);
};
img.onerror = function(){
    isWebP = false;
    checkPic(isWebP);
};
img.src = './c.webp';
// 第二种方法
var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
checkPic(checkWebp());

共有 12 条评论

          1. @Yan 现在可以了,估计是缓存还没清理掉吧。另存为是 webp,右键打开的话多了?x-oss-process=style/watermark_webp

            Google Chrome 76 Google Chrome 76 Windows 10 Windows 10
  1. 图片问题真的是,现在手机拍照就是 8M 左右,服务器控件压力暴增啊……但又不想压缩图片牺牲图片质量,试试你的办法

    Google Chrome 76 Google Chrome 76 Windows 7 Windows 7
    1. @Sherry 办法是:1、手机应用商店下载一个批量 resize 图片的 app,处理完毕后再上载。2、进阶使用阿里云 oss 等工具。

      Android Webkit 4 Android Webkit 4 Android 4.1.2 Android 4.1.2
        1. @老杨 我在 Windows 下用 ACDSee,在 Mac 下用 Adobe Bridge CC、PhotoBulk 或者干脆自己做个 Automator 小机器人。😜

          Google Chrome 76 Google Chrome 76 Mac OS X 10.14 Mac OS X 10.14

发表评论

电子邮件地址不会被公开。 必填项已用*标注