前端优化-渐进式图片的制作

前言

• 关于渐进式图片的概念在此不作介绍，详细请参考渐进式jpeg(progressive jpeg)图片及其相关
• 本文主要介绍如何制作渐进式图片

实现

• 也许你已经看了很多篇关于渐进式图片的文章，然后按照教程里所说的，如下：

在ps中，存储为jpg格式，同时勾选交错和sRGB选项

经测试以上方法保存的图片并不是渐进式图片

• 以下是我测试时保存的4种有区别的图片，它们的大小有所不同，在chrome浏览器，同时打开浏览器限流模式，将网速降到最低
  
• 测试效果如下：
  
  如效果不清晰，可右击保存或点击测试效果图查看
• 我们看到第二幅图的效果最符合我们的预期，得出结论ps保存为png-24且勾选交错才能把图片保存为渐进式图片