首先，文章标题是个伪命题，因为并不能直接转换，而需要用到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有什么优势？》
WebP效果已取消，特此备注。
在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());
青山 江西
我谷歌浏览器打开也是jpg😏
五年前 Google Chrome 75 · Windows 7S̆̈ 江苏 *
@青山 右键点下载就知道了。
五年前 Google Chrome 76 · Mac OS X 10.14S̆̈ 江苏 *
@青山 已订正，Windows下需要强制刷新Chrome浏览器后再试。
五年前 Google Chrome 76 · Mac OS X 10.14老杨 广东
@S̆̈ 按了好多次 Ctrl+F5，右键另存为还是 jpg
五年前 Google Chrome 76 · Windows 10S̆̈ 江苏 *
@老杨 我自己测过ok了。问过作者表示无助。再看看吧，有改进了再回复。
五年前 Android Webkit 4 · Android 4.1.2老杨 广东
@S̆̈ 现在可以了，估计是缓存还没清理掉吧。另存为是 webp，右键打开的话多了?x-oss-process=style/watermark_webp
五年前 Google Chrome 76 · Windows 10Sherry 北京
图片问题真的是，现在手机拍照就是8M左右，服务器控件压力暴增啊……但又不想压缩图片牺牲图片质量，试试你的办法
五年前 Google Chrome 76 · Windows 7S̆̈ 江苏 *
@Sherry 办法是:1、手机应用商店下载一个批量resize图片的app，处理完毕后再上载。2、进阶使用阿里云oss等工具。
五年前 Android Webkit 4 · Android 4.1.2老杨 广东
@S̆̈ 电脑上一直 PPDuck 先压缩再上传。
五年前 Google Chrome 76 · Windows 10S̆̈ 江苏 *
@老杨 我在Windows下用ACDSee，在Mac下用Adobe Bridge CC、PhotoBulk或者干脆自己做个Automator小机器人。😜
五年前 Google Chrome 76 · Mac OS X 10.14chojemmy 美国
@S̆̈ 那博主你原照片是怎么储存的？
五年前 Google Chrome 76 · Windows 10S̆̈ 俄罗斯 *
@chojemmy 原来就是简单的把jpg上传到oss。
五年前 Wordpress App 13 · iPhone iOS 12.4.1佛系软件 上海
不是阿里云可以用吗，我腾讯云啊
四年前 Google Chrome 89 · Windows 10S̆̈ 江苏 *
@佛系软件 你试试啊
四年前 Wordpress App 16 · iPhone iOS 14.4