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 格局(
「又拍云」中应用渐进式 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
- 先将图片转为 jpeg 格局(
tinypng 默认自带渐进式转化
- 测试图片
http:/upyun.luckly-mjw.cn/Assets/jpeg-pregressive/008.jpg
- 留神,这张图没有携带解决参数,间接返回图,但也会有渐进成果