Hexo 博客优化入门(一)

请注意,本文编写于 859 天前,最后修改于 62 天前,其中某些信息可能已经过时。

昨晚在本地折腾博客的时候,总是对自己博客的加载速度很不满意。
本博客主题用的是 Hexo material theme (现在已经改为 vexo 了 ),于是想看看 viosey 的资源加载情况。
令我惊异的是,其博客资源的体积都很小...
一张图片竟然在 9k。果然是大佬 hhh。
于是查看了我的博客的资源,决定先从图片压缩开始解决。

1. 图片压缩 & 工具推荐

图片格式选择

  • JPEG: 作为互联网上使用频度最高的图片格式

    • sss
  • 无透明效果、颜色丰富的图片
  • 因为每一次压缩均为有损压缩,所以对于线条、文字较多的图片不建议使用
  • PNG :有多种格式可选

    • 需要透明效果
    • 色块连续、多纯色
    • 所有有时候颜色丰富的图片其大小要大于 JPEG 格式图片
    • 可使用无损压缩
  • GIF:目前动画效果支持较好的格式

    • APNG 还未普及的又需要引入动画效果图片的时候可以采用此格式

新的更优秀的图片格式,诸如 WebP, APNG, 仍然未被浏览器很好的支持,所以在此不赘述。

图片压缩工具

经过一番查找,发现有如下工具可供使用:

  • TinyPNGPNG 格式图片在线压缩网站
  • limitPND:优秀的极限 PNG 图片压缩软件
  • iSparta:开源的 PNG 压缩与格式转换工具
  • 智图:高效优质的图片压缩平台,亦有桌面端软件

上述软件/平台是经过我尝试之后比较简易高效同时免费的工具,当然我们也可以选择 Photoshop。不过我自己并不
精通 PS,所以效果并没有上述的好。

压缩前的准备

有时候我的图片是来自Unsplash的原始图片,原本的品质较高,分辨率也较大,相应的体积也就很大了。
这样直接去压缩,就多做了许多重复工作,比如你需要不断压缩压缩...
这样的话,对于分辨率要求不高,图片大小比较小的图片,比如非背景图、头像之类。我们可以先经过下面的预处理步骤:

  • Windows 自带画图工具调整分辨率
  • 屏幕截图

这两者对精度要求较低的图片进行野蛮压缩效果可是很明显的。

开始压缩

经过一晚上的实验,并且结合我自己的需求,得出如下结论:

  • 格式转换首选:iSparta

    • 此软件可将 PNG 格式转换为 WebP, APNG 格式的图片,具有其他软件没有的功能
    • 图片压缩能力一般,某些界面没有进度提示
  • 普通需求首选:limitPNG

    • 界面赏心悦目,交互简易方便
    • 压缩能力超强!可供选项较多,分无损和有损等等很多细分选项
    • 极低画质压缩能力稍弱
  • 极普通需求,又不想下载软件首选:TinyPNG

    • 在线无损压缩
    • 缺点就是无法选择输出质量
    • 如果你只是想稍微无损压缩一下一张图片,那么可以选这个了
  • 我的首选!智图

    • 客户端界面美观、交互也简便
    • 压缩能力超强,支持 10~95 等 14 级压缩选项
    • 多图片操作亦方便
    • 可“递归压缩” --> 不断压缩同一张图片直至很小很小,上面其他软件最低质量有所保留
    • 支持图片格式自动转换:根据图片内容自动转换为合适的格式

图片压缩的第一步已经完成了,也就是上传之前的压缩。

我的图片原来超过 2M,因为之前没去理他...在压缩过后使用首页加载的 4 张图片总体积不超过 70k,虽然离很多优秀的优化还差得远,
但是对于目前的我已经比较满意了。

2 HTML, JS, CSS & Image 压缩插件

只是压缩图片显然没法满足需求,因为我注意到首页加载的某些 js, css 文件大小也比较大。
所以我们亦需要一些压缩代码的工具。所以我找到了 Hexo 的插件 hexo-all-minifier
这个插件集合了:

hexo-html-minifier, which is based on HTMLMinifier
hexo-clean-css, which is based on clean-css
hexo-uglify, which is based on UglifyJS
hexo-imagemin, which is based on imagemin

四款插件,一次就搞定所有事情。
插件安装和配置而已参看hexo-all-minifier项目首页。
该插件生效之后,我惊奇的发现我那些图片又被压缩了一点点,意外惊喜...


此篇文章属于经验之谈,不具有多少技术性东西。非常感谢上述工具和项目,有许多甚至都是开源的。
这是世界因为你们变得更好,感谢~


参看

添加新评论

评论列表