Hexo 网站搭建过程备忘记录（三）图片方案

圣儿2025-05-012025-05-27

代理编辑：Black，2025-05-01 发布于圣儿博客

本站选用Hexo+Butterfly 主题+AnZhiYu 魔改的路线搭建。

Frame	Theme	Magic
Hexo v7.3.0	Butterfly v5.3	AnZhiYu v1.6.14

动手时在此记录建站过程，防止 来的时候好好的，回不去了。同时也希望能够帮助到需要的朋友。内容分成几个不同的块，相对应的分成几篇文章记录：

Tips:
《Hexo 网站搭建过程备忘记录（三）图片方案》主要记录Web页面中图片的处理方案，包括图片处理的方式和工具、云存储以及CDN加速等内容。

图片方案

图片格式

用本篇文章的封面图，先来个对照测试。

🔊 WebP的压缩能力还是挺能打的，体积下降的范围，远大于画质下降的范围

据说现在流行下一代图片格式之王avif，尝试了一下，发现：
目前普遍担心的兼容问题，其实不那么严重，再说早晚也得兼容起来。主要问题是生态，无论图片相关的各种工具，还是云存储、图片处理，很多便捷工具都还没有支持，实际使用就会比较麻烦。
所以本站就先采用懒人模式：WebP

有gulp-imagemin插件的方法，还没有研究，现在看75%webp方式还可以，就先手动进行，也不算太麻烦。目前的一些 节(其)省(实)资(是)源(穷) 的做法如下：

非重要图片，做完图片直接保存为75%质量的webp文件。我用的是Krita。请看：优秀的开源绘画软件
使用PicList工具时，移除EXIF信息（能省不少空间呢），选择75%质量。请看：新一代Picgo：PicList
利用图床自带的图片处理函数，目前使用七牛云，其他云资源同理，也有一样的功能，只是叫法不同。根据不同场景设置不同链接后缀，实现需要大时大，需要小时小。但要注意，设置链接后缀，也要设置为75%质量。
主题自带的pageThumbnailSuffix暖心功能，需要更小的时候更小。请看：缩略图后缀功能
能css的，就别img。
用CDN。
羊毛方案：用别人的。以下是借用链接，表示感谢！
鸣谢
本站部分图片来源以下优秀网站，感谢他们！欢迎大家关注。

Hexo

快速、简洁且高效的博客框架

Butterfly

非常Nice的Hexo主题

AnZhiYu

魔改butterfly，审美、细节、技术面面俱到

Picsum

使用便捷的Lorem占位图，有时慢点

表情包

表情包汇总

凉心博客

简单样式的典范

徽标

徽标制作

PicList
图片上传管理工具，基于大名鼎鼎的PicGo开发的，所有PicGo功能和插件都有，以此为基础，新增了一些很实用的功能。如果没有用过这类工具，可以直接PicList，如果在用PicGo的，可以考虑升级过来，一键迁移也很方便。官方文档
配色查色
https://peiseka.com
压缩图片
https://tinypng.com/
偶尔用到的图片在线处理
https://gradients.app/zh