低成本改善图片访问体验
jpeg 渐进模式是什么?
快速实现
- 在「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
- 注意,这张图没有携带处理参数,直接返回图,但也会有渐进效果
推荐一个效率工具:tinypng 原地压缩脚本
原创小文章
专注中小团队开发。 前端技术,效率工具分享与探讨。
推荐阅读
css三种方案实现图片宽高自适应等比例缩放
需求描述页面中有一个图片,页面宽度变小(比如打开控制台,拖动边栏),图片宽高,要随之等比例自适应缩放,如下效果图效果图实现方案方案一:使用宽度百分比和vw方案二:宽度百分比加高度被padding-top撑开方案...
水冗水孚赞 4阅读 627
认识一下,我们是应用社交「幕后大佬」 IM 家族
艾瑞咨询近期发布的《2023 年全球互联网通信云行业研究报告》(关注【融云全球互联网通信云】了解更多 后台回复【报告】获取完整版)显示,2021 年全球互联网通信云市场规模达到 53 亿元。
融云RongCloud阅读 367
前方高能!融云《社交泛娱乐出海作战地图》来袭,前 100 位免费领
移步【融云全球互联网通信云】回复“地图”限量免费领《社交泛娱乐出海作战地图》
融云RongCloud阅读 301
这一次,百度网盘把【猫】变成了【黄色的猫】
随着移动互联网的一路狂飙,手机已经成为人们的新器官。出门不带钥匙可以,不带手机却是万万不可以的。而手机上,小小的摄像头也越来越成为各位「vlogger」的口袋魔方。每天有超过数亿的照片和视频被上传到百度网...
百度Geek说阅读 294
《数据万象带你玩转视图场景》第一期:avif图片压缩详解
随着硬件的发展,不管是手机还是专业摄像设备拍出的图片随便可能就有几M,甚至几十M,并且现在我们处于随处可及的信息海洋里,海量的图片带来了存储问题、带宽问题、加载时延问题等等。对图片信息进行有效的压缩...
云存储小天使阅读 252
WICC · 出海嘉年华倒计时!精彩不容错过,「指南」一手掌握
如何在巨头林立的热门赛道成功突围?如何在迅猛发展的新兴市场深挖价值?如何在复杂合规政策下实现应用增长?如何利用好底层技术优化本地化体验?……
融云RongCloud阅读 152
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。