博客图片梭哈全用WebP!

博客的图片太大了,加载慢,你问我怎么办?

自己网络不好还能怎么办,办不了就不办咯! ——古惑仔

骗你的,其实如果只是图片太大,梭哈WebP还是有很大优化空间的,尤其是老站。

动机

最近在研究各种媒体格式的优劣,图片首当其冲。在这之前其实我已经用过WebP,但是那个时候浏览WebP文件还需要额外的图片浏览器(也有可能就是我当时用的windows太拉跨了),遂始终坚持着png大法(至少我没用jpg是吧)。

但是之前的一篇博客中,原图太大了,图片已经成为了博客加载的瓶颈。然后在日复一日的窥视keshanenova我单恋的好友的博客中,我意识到我早该尝试WebP了。为什么不呢?

WebP的优势

那我其实也不是专家,我只能综合我各方面了解到的信息,以及一些自己的实践结论,告诉你:如果对比png、jpg、bmp、gif这些常见格式的话,全是优势,梭哈用WebP就对了。

一句话说就是,同等的图片质量下,WebP的文件大小有很可观的优势。对于WebP各项参数感兴趣的参考一下这篇文章。

我的做法

很直白,把站点的所有资源图片都替换为WebP。但是这里有一个小细节,某些情况下转为WebP,无损模式的图片大小甚至比有损模式还小。

如果你阅读了官网上对 WebP 的技术细节的描述 就会发现它的有损转换过程对于噪声多、边缘柔和的图片处理能力很强,而对于图形和文字就不合适了。不过 WebP 的无损无论是算法还是封装都优于传统的 PNG 格式,也当然有着更高的压缩率。

综上所述,无损模式对于某些类型图片是优于有损的,但图片属于哪类并不好检测,这里可以根据大小来判断。一个可行的方案是将一张图同时使用有损和无损压缩,然后选择小的那个。

确实,有很多截图就是无损模式反而比有损模式占用的空间小(当然图片质量也更好)。so,我自己在做WebP格式转化的时候采用就是,有损无损都先转一遍,然后选择小的那个。缺点嘛,就是每张图片都需要做两次转换。

更省事儿的方案

那当然是用nova提供的服务啦~真的很方便、快捷。强推一波。

在hexo下的体验大概就是,装个,几行配置,就完事儿了(你的站点瓶颈已经就不是图片了)。文档很干净,可以自己试试。

最后

这样真的可以很大程度上解决图片加载慢的问题,就我自己的博客而言,整体的图片文件大小只有原来的20%。

另外,愿工作中没有jpg。