博客图片梭哈全用WebP!

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

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

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

动机

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

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

WebP的优势

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

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

我的做法

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

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

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

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

更省事儿的方案

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

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

最后

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

另外，愿工作中没有jpg。