乐趣区

关于图片:低成本改善图片访问体验

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 原地压缩脚本

退出移动版