什么是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教程看看噢!