低成本改善图片访问体验[转]

杰克工作室

jpeg 渐进模式是什么？

• 图片加载，从上下加载，变为从模糊到清晰，提前让用户有告知，详情参考
• png 怡也有类似的技术，称为png 的交错模式
   

快速实现

• 在「OSS」和「又拍云」上的路径上添加几个参数即可低成本，快速使用上渐进式图片
  

「OSS」中使用渐进式 jpeg

• 官方文档
• 测试图片 https://oss.luckly-mjw.cn/jpeg-pregressive/009.jpg?x-oss-process=image/interlace,1
• 实现方式，在图片链接中添加?x-oss-process=image/interlace,1字符串（interlace：交错的）

• 很遗憾，oss 并不支持 png 交错模式，但可以转 jpeg 的方式实现该功能

  • 先将图片转为 jpeg 格式（/format,jpg），在借用 jpeg 的交错模式(/interlace,1)
  • 测试图片 https://oss.luckly-mjw.cn/jpeg-pregressive/010.png?x-oss-process=image/format,jpg/interlace,1

「又拍云」中使用渐进式 jpeg

• 官方文档
• 测试图片 http:/upyun.luckly-mjw.cn/Assets/jpeg-pregressive/009.jpg!/progressive/true
• 实现方式，在图片链接中添加!/progressive/true字符串（progressive：优化的）

• 很遗憾，「又拍云」同样不支持 png 交错模式，同样可以转 jpeg 的方式实现该功能

  • 先将图片转为 jpeg 格式（/format/jpg），在借用 jpeg 的交错模式(/progressive/true)
  • 测试图片 http://upyun.luckly-mjw.cn/Assets/jpeg-pregressive/010.png!/format/jpg/progressive/true

tinypng 默认自带渐进式转化

• 测试图片http:/upyun.luckly-mjw.cn/Assets/jpeg-pregressive/008.jpg
• 注意，这张图没有携带处理参数，直接返回图，但也会有渐进效果

推荐一个效率工具：tinypng 原地压缩脚本

源文地址：https://segmentfault.com/a/1190000043809275