渐进式(progressive)jpeg和交错式(interlace)png/gif

不知道大家有没有注意到平时在浏览网页的时候，图片的呈现，有两种方式。一些站点的图片加载方式是自上而下扫描式的，另一些站点的图片加载方式是先是全部的模糊图片，然后逐渐清晰。如下面两张图片所展示（图源：http://codinghorror.typepad.com）
一般线性加载：

交错/渐进式加载：

在我平常爱逛的几个网站中，我发现图片站以及大多数网站用的是第一种加载方式，例如：pixiv ，少部分网站采用了交错/渐进式加载，例如：知乎，当然，知乎采用的方案更加复杂，是先用小图片来占位，然后替换成交错/渐进式大图。

我个人喜欢交错/渐进式加载图片，这种加载方式使得浏览者在图片加载瞬间就已经可以看到大致轮廓，我觉得这对于视觉的提升很有帮助。并且，一般来讲，渐进式 jpeg 的大小一般更小。另外，在HTTP/2中，有2个很重要的特点，多路复用（允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息）和服务器推送（服务器对同一请求可以推送多个响应），它们对渐进式图片的加载速度有极大帮助。

同时，交错/渐进式加载图片也有坏处：交错式 png/gif 的大小一般更大。并且，如果浏览者的网络状况很差的话，他必须等很久才能知道图片的具体内容。另外，这种渲染方式会增加CPU和内存的使用（当然，以当今的硬件水平这点资源可以忽略）

内容就是这些，权衡使用看个人喜好吧。

交错/渐进式图片的创建

如果图片很少的话，推荐用Photoshop完成，只需在文件中导出为 web 格式，再选中 连续和转换为sRGB(对于jpeg) 或者 交错和转换为sRGB(对于png/gif)

假如你和我一样图片很多，这时候手动是非常不方便的，这时候就需要用到一个工具了，它就是跨平台开源软件 ImageMagick
在服务器上安装 ImageMagick，之后 cd 到图片所在目录，例如，我图床的图片储存在 /data/wwwroot/view.spiritx.xyz/images/，储存路径格式是 year/month/day

$ cd /data/wwwroot/view.spiritx.xyz/images/
$ ll 2019/01/11
**.jpg
**.png
**.gif

现在保存下面的代码到 convert.sh

cd /data/wwwroot/view.spiritx.xyz/images/
find ./*/* -iname \*.jpg -exec convert {} -interlace plane {} \;
find ./*/* -iname \*.png -exec convert {} -interlace plane {} \;
find ./*/* -iname \*.gif -exec convert {} -interlace plane {} \;

然后 chmod +x convert.sh 之后再执行 convert.sh 即可把图床中的图片转换成交错/渐进式图片，也可以添加到crontab，定时执行。
在 ImageMagick官网 中，也提供了其它几个-interlace参数

• None means do not interlace (RGBRGBRGBRGBRGBRGB...),
• Line uses scanline interlacing (RRR...GGG...BBB...RRR...GGG...BBB...), and.
• Plane uses plane interlacing (RRRRRR...GGGGGG...BBBBBB...).
• Partition is like plane except the different planes are saved to individual files (e.g. image.R, image.G, and image.B).

可根据自己需要进行转换。

lazyload + filter:blur

在完成替换后，我尝试在不同的网络环境下访问站点，发现在网络情况很差的时候浏览图片简直不忍直视。。。这好像和和我想的不一样 ？

于是乎，我又加上了CSS滤镜：filter对图片进行模糊操作，由于主题已经自带了lazyload，然后把默认的加载图换成了对应图片的小图（Cheveroto图床自带），作为大图加载的一个缓冲，最终看起来终于像样些了 。

这里讲一下，一定要注意图片尺寸大小的问题，否则在加载完成后会突然跳动一下。。