WordPress图片自动压缩为WebP格式

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

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

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

步骤：

1、开通Aliyun OSS。

2、下载最新版OSS Upload 4.4。

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

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

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

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

知识库：《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%2Fｗａｔｅｒｍａｒｋ_ｗｅｂｐ', '?x-oss-process=style%2Fｗａｔｅｒｍａｒｋ', $text);
	$return = str_replace('?x-oss-process=style/ｗａｔｅｒｍａｒｋ_ｗｅｂｐ', '?x-oss-process=style/ｗａｔｅｒｍａｒｋ', $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%2Fｗａｔｅｒｍａｒｋ', '?x-oss-process=style%2Fｗａｔｅｒｍａｒｋ_ｗｅｂｐ', $text);
	$return = str_replace('?x-oss-process=style/ｗａｔｅｒｍａｒｋ', '?x-oss-process=style/ｗａｔｅｒｍａｒｋ_ｗｅｂｐ', $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());

# 写于，改于。

OSS

共有 14 条评论

青山
江西

我谷歌浏览器打开也是jpg
六年前 Google Chrome 75 · Windows 7
回复
- S
  江苏
  *
  
  @青山右键点下载就知道了。
  六年前 Google Chrome 76 · Mac OS X 10.14
  回复
- S
  江苏
  *
  
  @青山已订正，Windows下需要强制刷新Chrome浏览器后再试。
  六年前 Google Chrome 76 · Mac OS X 10.14
  回复
  - 老杨
    广东
    
    @S 按了好多次 Ctrl+F5，右键另存为还是 jpg
    六年前 Google Chrome 76 · Windows 10
    回复
    - S
      江苏
      *
      
      @老杨我自己测过ok了。问过作者表示无助。再看看吧，有改进了再回复。
      六年前 Android Webkit 4 · Android 4.1.2
      回复
      - 老杨
        广东
        
        @S 现在可以了，估计是缓存还没清理掉吧。另存为是 webp，右键打开的话多了?x-oss-process=style/watermark_webp
        六年前 Google Chrome 76 · Windows 10
        回复
Sherry
北京

图片问题真的是，现在手机拍照就是8M左右，服务器控件压力暴增啊……但又不想压缩图片牺牲图片质量，试试你的办法
六年前 Google Chrome 76 · Windows 7
回复
- S
  江苏
  *
  
  @Sherry 办法是:1、手机应用商店下载一个批量resize图片的app，处理完毕后再上载。2、进阶使用阿里云oss等工具。
  六年前 Android Webkit 4 · Android 4.1.2
  回复
  - 老杨
    广东
    
    @S 电脑上一直 PPDuck 先压缩再上传。
    六年前 Google Chrome 76 · Windows 10
    回复
    - S
      江苏
      *
      
      @老杨我在Windows下用ACDSee，在Mac下用Adobe Bridge CC、PhotoBulk或者干脆自己做个Automator小机器人。
      六年前 Google Chrome 76 · Mac OS X 10.14
      回复
      - chojemmy
        美国
        
        @S 那博主你原照片是怎么储存的？
        六年前 Google Chrome 76 · Windows 10
        回复
        
        S
        俄罗斯
        *
        
        @chojemmy 原来就是简单的把jpg上传到oss。
        六年前 Wordpress App 13 · iPhone iOS 12.4.1
        回复
佛系软件
上海

不是阿里云可以用吗，我腾讯云啊
四年前 Google Chrome 89 · Windows 10
回复
- S
  江苏
  *
  
  @佛系软件你试试啊
  四年前 Wordpress App 16 · iPhone iOS 14.4
  回复

竹炉山房

WordPress图片自动压缩为WebP格式

共有 14 条评论

回复老杨取消回复

共有 14 条评论

回复 老杨 取消回复

回复老杨取消回复