什么是WEBP图片？
WebP是一种由Google开发的图像格式，其实准确来讲并不是谷歌开发的，而是他们在2010收购的 On2 Technologies 做的。WebP提供更高的压缩率和更好的图像质量。相比于传统的JPEG和PNG格式，WebP可以实现更高的压缩率，从而减少图像文件的大小，同时保持较高的视觉质量。
WebP图像格式具有以下特点：
-
更高的压缩率：WebP图像通常比同等质量的JPEG和PNG图像更小，这意味着它们可以更快地加载并节省带宽。
-
支持透明度：WebP支持Alpha通道，可以实现图像的半透明和透明效果，类似于PNG格式。
-
动态图像支持：WebP还支持动态图像，类似于GIF格式，但通常具有更好的压缩率。
-
广泛的浏览器支持：大多数主流的现代网页浏览器，包括Chrome、Firefox、Edge和Opera，都支持WebP格式。
WebP格式在网络应用中特别受欢迎，因为它可以加快网页加载速度，降低带宽消耗，并提高用户体验。一张图片在网站上的大小不建议超过300KB。
WEBP图片匹配的浏览器
市面上大多数浏览器都已经是匹配WebP格式的图片的，只有小部分还没有。
如何转换网站图片到WEBP格式
这里我们简单过一下3种转换图片到WEBP格式的方法。再次强调，这是优化网站速度很重要的部分之一。
1. 通过Photoshop转换WebP格式
Photoshop做为市面上最优秀的图片处理软件之一，当然是可以优化网站图片的。目前为止，Photoshop 2023 是不能导出WebP格式图片的，不过我们可以安装一个插件来完成这个操作。
首先我们来看看Photoshop本身自带的压缩网站图片方式。我的PS是西语的，见谅…
这是一张从Unsplash上下载的图片原大小，55,6MB，这对一个网站来说是极其夸张的大小（我遇到过直接上传这种大小到网站上的情况），我们先不管怎么调整网站图片分辨率的问题，就从格式上来操作。
Photoshop有专门为网站导出的格式，快捷键 Alt + Ctrl + Shift + S 或者 上面的菜单 文件 > 导出 > 保存为网络格式。打开只后会出现这样的一个页面。
右上角我们可以选择导出的图片格式，常用的是GIF（动图），JPEG（图片） 和 PNG-24（透明图）。
右下角我们可以直接调整图片的分辨率，不需要 Alt + Ctrl + I 打开图片大小界面。
左下角我们可以看到要导出图片的格式和实时导出文件大小。
就是在左下角我们可以看到通过这个方式，图片从先前的55,6MB变成了4MB，文件大小缩减了非常多，如果我们调整一下分辨率的话，是可以小到1MB以下的，不过这我们就不细聊怎么调整图片分辨率了。
WebPShop导出WebP格式
WebPShop是一个可以让我们直接在Photoshop里面导出WebP格式的插件，因为PS本身是不能导出WebP图片格式的。
安装之后我们只需要储存图片为或者快捷键 Ctrl + Alt + S，保存格式最下面会出现一个新的WebP格式。
在 Quality 我们可以调整图片压缩质量范围从 0 有损到 100 无损（像素保持完全相同）别压缩太狠，不然图片会糊。
Preview功能将显示压缩图像及其最终尺寸。
2. 通过插件或网站转换WebP图片
并不是每个人都是设计师，你的电脑上不一定安装了Photoshop。这种情况下，你可以借助一些插件或者转换网站来做。
WordPress优化图片插件
这种优化图片插件在WordPress有非常多。提供的功能其实都差不多，只是免费版有不同程度的限制。
Imagify
最知名的图片优化插件之一，由开发WP Rocket的同一家公司开发的图像压缩插件。
我已经使用Imagify很长时间了（而且我还在用），我只能说这个WordPress图像优化插件是目前市面上最好的。确实有一些WordPress插件具有更好的JPG和PNG压缩算法，但Imagify非常适合提供WebP图像，对我来说它从来没有出过任何问题。
免费版一个月提供20MB的大小优化，可以自动转WebP格式，设置图片上传最大尺寸等等。如果你需要Imagify无限网站优化API可以联系我（拒绝白嫖）。
一旦我们安装了Imagify并输入了许可证，它将检测到WordPress媒体库中的所有图像，并允许我们对它们进行优化。
开始优化之前是很有必要先去设置调整一下的。
EWWW Image Optimizer
自动转换WebP格式图片，限制图片上传尺寸，延迟加载（Lazy Load）等等。
Smush
可以压缩图片大小，可是转换WebP是付费功能。免费提供限制图片大小和图片延迟加载功能。
ShortPixel
使用它的条件是必须申请一个API，包括免费版。
转换WebP图片网站
这种转换网站也极其多，就像刚刚提到的ShortPixel就有在他们网站上提供。还有像TinyPNG、Compressor等等，这就不列出来了，一搜有一堆。
3. 通过代码转换网站WebP图片
这个方法我是最推荐的，因为它最简单，会把你网站上所有上传的图片自动转换成WebP格式，本站就是用这个方法，再加上自动调节图片分辨率可以做到很可观的图片优化。
我们要使用到的是我之前推荐过的Code Snippets 代码云里面提供的一串代码，操作方式就是单纯的复制粘贴。要注意你的网站托管商有没有开 ImageMagick 或 GD，没开的话，这代码无效。
add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );
function wpturbo_handle_upload_convert_to_webp( $upload ) {
if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
$file_path = $upload['file'];
// Check if ImageMagick or GD is available
if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
$image_editor = wp_get_image_editor( $file_path );
if ( ! is_wp_error( $image_editor ) ) {
$file_info = pathinfo( $file_path );
$dirname = $file_info['dirname'];
$filename = $file_info['filename'];
// Create a new file path for the WebP image
$new_file_path = $dirname . '/' . $filename . '.webp';
// Attempt to save the image in WebP format
$saved_image = $image_editor->save( $new_file_path, 'image/webp' );
if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
// Success: replace the uploaded image with the WebP image
$upload['file'] = $saved_image['path'];
$upload['url'] = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
$upload['type'] = 'image/webp';
// Optionally remove the original image
@unlink( $file_path );
}
}
}
}
return $upload;
}就是单纯的把上面的代码复制到任何代码插件上，其实也可能像视频里那样把代码复制到子主题的PHP上，注意，是子主题，不是主题。我这就用Code Snippets，视频里你可以找到多种方法。
这个代码是默认把原图片删除的，只保留转换后的WebP格式图片。如果你想要保留原图片需要把最后一行代码删除。
// Optionally remove the original image
@unlink( $file_path );转换WebP图片如你所见，也并不难，却可以帮我们的网站减轻很重要的一部分重量。如果想要知道更多对于如何优化网站速度的方法的话，你可以去WordPress教程看看噢！
