分享笔记:

怎么生成WEBP格式图片

WebP可以实现更高的压缩率,从而减少图像文件的大小

什么是WEBP图片?

WebP是一种由Google开发的图像格式,其实准确来讲并不是谷歌开发的,而是他们在2010收购的 On2 Technologies 做的。WebP提供更高的压缩率和更好的图像质量。相比于传统的JPEG和PNG格式,WebP可以实现更高的压缩率,从而减少图像文件的大小,同时保持较高的视觉质量。

WebP图像格式具有以下特点:

  1. 更高的压缩率:WebP图像通常比同等质量的JPEG和PNG图像更小,这意味着它们可以更快地加载并节省带宽。

  2. 支持透明度:WebP支持Alpha通道,可以实现图像的半透明和透明效果,类似于PNG格式。

  3. 动态图像支持:WebP还支持动态图像,类似于GIF格式,但通常具有更好的压缩率。

  4. 广泛的浏览器支持:大多数主流的现代网页浏览器,包括Chrome、Firefox、Edge和Opera,都支持WebP格式。

WebP格式在网络应用中特别受欢迎,因为它可以加快网页加载速度,降低带宽消耗,并提高用户体验一张图片在网站上的大小不建议超过300KB。

WEBP图片匹配的浏览器

市面上大多数浏览器都已经是匹配WebP格式的图片的,只有小部分还没有。

转换WebP格式图片
caniuse

如何转换网站图片到WEBP格式

这里我们简单过一下3种转换图片到WEBP格式的方法。再次强调,这是优化网站速度很重要的部分之一。

WebP格式图片

通过Photoshop转换WebP格式

Photoshop做为市面上最优秀的图片处理软件之一,当然是可以优化网站图片的。目前为止,Photoshop 2023 是不能导出WebP格式图片的,不过我们可以安装一个插件来完成这个操作。

首先我们来看看Photoshop本身自带的压缩网站图片方式。我的PS是西语的,见谅…

转换WebP格式图片
Unsplash下载的原图大小

这是一张从Unsplash上下载的图片原大小,55,6MB,这对一个网站来说是极其夸张的大小(我遇到过直接上传这种大小到网站上的情况),我们先不管怎么调整网站图片分辨率的问题,就从格式上来操作。

Photoshop有专门为网站导出的格式,快捷键 Alt + Ctrl + Shift + S 或者 上面的菜单 文件 > 导出 > 保存为网络格式。打开只后会出现这样的一个页面。

转换WebP格式图片
导出为网站格式界面

右上角我们可以选择导出的图片格式,常用的是GIF(动图),JPEG(图片) 和 PNG-24(透明图)。

右下角我们可以直接调整图片的分辨率,不需要 Alt + Ctrl + I 打开图片大小界面。

左下角我们可以看到要导出图片的格式和实时导出文件大小。

就是在左下角我们可以看到通过这个方式,图片从先前的55,6MB变成了4MB,文件大小缩减了非常多,如果我们调整一下分辨率的话,是可以小到1MB以下的,不过这我们就不细聊怎么调整图片分辨率了。

WebPShop导出WebP格式

WebPShop是一个可以让我们直接在Photoshop里面导出WebP格式的插件,因为PS本身是不能导出WebP图片格式的。

安装之后我们只需要储存图片为或者快捷键 Ctrl + Alt + S,保存格式最下面会出现一个新的WebP格式。

转换WebP格式图片
新出现WebP格式

在 Quality 我们可以调整图片压缩质量范围从 0 有损到 100 无损(像素保持完全相同)别压缩太狠,不然图片会糊。

Preview功能将显示压缩图像及其最终尺寸。 

转换WebP格式图片
WebP导出界面

通过插件或网站转换WebP图片

并不是每个人都是设计师,你的电脑上不一定安装了Photoshop。这种情况下,你可以借助一些插件或者转换网站来做。

WordPress优化图片插件

这种优化图片插件在WordPress有非常多。提供的功能其实都差不多,只是免费版有不同程度的限制。

转换WebP格式图片
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格式图片

转换WebP图片网站

这种转换网站也极其多,就像刚刚提到的ShortPixel就有在他们网站上提供。还有像TinyPNGCompressor等等,这就不列出来了,一搜有一堆。

转换WebP格式图片
TinyPNG官网

通过代码转换网站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格式图片
Code Snippets 新建代码

这个代码是默认把原图片删除的,只保留转换后的WebP格式图片。如果你想要保留原图片需要把最后一行代码删除。

// Optionally remove the original image
@unlink( $file_path );

转换WebP图片如你所见,也并不难,却可以帮我们的网站减轻很重要的一部分重量。如果想要知道更多对于如何优化网站速度的方法的话,你可以去WordPress教程看看噢!

为笔记评分

平均评分 5 / 5. 摘星者: 1

有疑问?留个言吧!

文章目录

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors