背景

网页中经常会有大量的图片显示，有的时候在弱网状态下，图片会加载的很慢。使用通常的（顺序式）编码的图片，这种叫做Baseline JPEG，图片会从上到下一点点加载出来，当图片较大时要等待图片逐行加载很久我们才能对图片有一定的了解，给用户的体验不是很友好。

为了提高用户的体验，使网页的图片能够在一开始就有个大致的样式展示，就可以使用渐进式jpeg和交错式png。

渐进式jpeg和交错式png

渐进式jpeg和交错式png能够让图片更快的显示出来，所以图像已一种特殊的方式进行存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这对用户是友好的，可以让用户看到网页上的图片大致的内容。

渐进式jpeg，使用了递增式编码（Progressive Encoding）。在HTTP2中，有2个很重要的特点，多路复用（允许同时通过单一的HTTP/2连接发起多重的请求-响应消息）和服务器推送（服务器对同一请求可以推送多个响应），它们对渐进式图片的加载速度有极大的帮助。

在多路复用的连接中，可以将资源区分优先级，使他们更快的加载。JPEG图片默认包含10个图层，最终的图片是由10个图层叠加而成的。渐进式jpeg的第一个视觉图层通常是高像素黑白的，因为它节省了颜色通道信息。在支持启用HTTP2的Web服务中，可以将渐进式jpeg的图像扫描层标记为高优先级，甚至可以实现在相应的图片请求开始之前就将这些扫描层推送到客户端浏览器的push缓存中。

如何实现

在Photoshop中，按住ctrl+all+shift+s存储为web和设备所用格式

渐进式图片：选择图片格式为jpeg=>选中“连续”

交错式图片：选择图片格式为png/gif=>选中“交错”