你好啊，Progressive JPEG，十多年后再相见

本文首发: http://blog.youkuaiyun.com/madongchunqiu/article/details/52813924

Web之初，渐进式(Progressive)图片还是很常见的，后来就渐渐消失了。现在都流行整块的高清大图，甚至还要上视频。

本想说说 Progressive JPEG 在移动端(手机)App上的轮回，但其实App兴盛之初，4G也同时上线了，因此也未见其在移动端有多大的应用。只是我们的App有个视频模块，整页都是视频截图，而截图均存放于S3，在国内做测试时速度较慢，逐行扫描(Baseline)出来的图片让整个页面此起彼伏，你可以想象那个场景。老板说在美国效果也没见有多好，于是还是想到了 Progressive JPG。

我们的图片效果还改成过：

1. 图片全部下载后才显示。但这样会有图片一个一个蹦出来的感觉，也很糟糕
2. 在1的基础上，做了一个 crossfade 的动画，图片是渐现式的出来，视觉上缓和很多。效果勉强还可以，就是网速问题会导致刚开始满屏的待下载 placeholder 图片。

之前其实就知道 Pinterest 有个PINRemoteImage，效果做得不错，大家可以鉴赏一番：

（图一：PINRemoteImage官方效果图）

Pinterest这个库利用模糊遮罩，巧妙的将丑陋的 Progressive JPEG 的前期图片装点得清新脱俗。既然效果这么棒，那就上呗。

然而我的文章从这里才开始。

一. 优化：一切都是为了显示效果

既然用上了 Progressive JPEG 了，并且解决了初始图片(以下称为初始 scan)的显示效果问题，那么紧接着的问题来了：到底快了多少？

万能的Github上有个 progressive-scans 的项目，可以将图片用 jpegtran 转成标准 Progressive JPG 后，告诉你每次 scan 占整个图片数据量的百分比。我修改了一点代码，使得可以打印出任意 Progressive JPEG 图片的每次 scan 所占的字节数：scan_jpeg.php 。以下图为例：

（图二：图片来自