/ 软件 / 1401浏览

WordPress图片自动压缩为WebP格式

首先,文章标题是个伪命题,因为并不能直接转换,而需要用到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());

14

  1. 青山

    我谷歌浏览器打开也是jpg😏

    Google Chrome 75 · Windows 7
    1. S

      @青山右键点下载就知道了。

      Google Chrome 76 · Mac OS X 10.14
    2. S

      @青山已订正,Windows下需要强制刷新Chrome浏览器后再试。

      Google Chrome 76 · Mac OS X 10.14
      1. 老杨

        @S按了好多次 Ctrl+F5,右键另存为还是 jpg

        Google Chrome 76 · Windows 10
        1. S

          @老杨我自己测过ok了。问过作者表示无助。再看看吧,有改进了再回复。

          Android Webkit 4 · Android 4.1.2
          1. 老杨

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

            Google Chrome 76 · Windows 10
  2. Sherry

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

    Google Chrome 76 · Windows 7
    1. S

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

      Android Webkit 4 · Android 4.1.2
      1. 老杨

        @S电脑上一直 PPDuck 先压缩再上传。

        Google Chrome 76 · Windows 10
        1. S

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

          Google Chrome 76 · Mac OS X 10.14
          1. chojemmy

            @S那博主你原照片是怎么储存的?

            Google Chrome 76 · Windows 10
            1. S

              @chojemmy原来就是简单的把jpg上传到oss。

              Wordpress App 13 · iPhone iOS 12.4.1
  3. 佛系软件

    不是阿里云可以用吗,我腾讯云啊

    Google Chrome 89 · Windows 10
    1. S

      @佛系软件你试试啊

      Wordpress App 16 · iPhone iOS 14.4

发表回复

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