优化小技巧实操

1. 图片压缩

原文链接：网站性能优化的一些小技巧

1.1 图片多级压缩

目前从网上下载的图片主流格式是JPG或者PNG，当分辨率比较高的时候体积往往比较大，因此要想提高网站的速度就有必要将图片体积压缩，这里参考店长的推荐，无损压缩推荐Tinypng，有损压缩推荐imagine。

TinyPNG Imagine
特点 无损压缩 有损压缩，以牺牲图像质量， 降低图像色彩来达到缩减图像大小的目的。
优点 能够完全保留图像色彩，不损伤图像质量 1. 压缩程度高，支持转png为jpg或webp，进一步减少图片大小 2. 软件支持一次处理多张图片，无上限，处理完成支持直接批量覆盖原文件或重命名
缺点 单次仅能上传20张图片，每张限制大小为5MB，无法处理更大图片。 PNG转其他格式为不可逆操作（指覆盖保存后），且可能反而会增加图片大小。

在这里还给大家推荐一个非常实用的网站：imagesTool

imagesTool

这个网站不仅仅支持将PNG与JPG格式的图片批量（完全没有数量限制那种）转化为webp和avif（chrome推荐的一种压缩率更高的编码方式），而且还能改变图片的原始分辨率，甚至将图片压缩到指定的大小。

我们选择了将PNG转化为webp格式，画质为High，图片规模缩小为80%，压缩率达到94%；而选择将PNG转化为avif格式，画质为High，图片规模缩小为80%，压缩率达到95%，这样下来我们可以把所有图片几乎都可以控制在500KB以下，而且肉眼观察画质没有明显的不同。

1.2 图片懒加载

图片懒加载是指只加载目前能看到及其附近的页面上的图片，有节省流量与提高性能的作用。Butterfly主题内置了图片懒加载的选项，在_config.butterfly.yml文件下将对应项设置为如下即可：

1
2
3
4
5
6
7
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: site # site/post 选择在哪些地方启用图片懒加载
  placeholder: 	# 你自己喜欢的图片
  blur: true	# 模糊效果