最近把网站中的图片给全部(除了cdn的)替换了,遂记录一下

渐进式(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图床自带),作为大图加载的一个缓冲,最终看起来终于像样些了

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