BaselineJPEGvs.ProgressiveJPEG

本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载

JPEG有两种存储格式:baseline 和 progressive。Baseline JPEG 会在数据可用时,一行一行自上而下显示。Progressive JPEG会先显示模糊图片,然后逐渐清晰

浏览器渲染

Progressive JPEG在所有浏览器都会显示,这里的关注点是如何渲染。

Chrome + Firefox + IE9 下 Progressive JPEG 加载很快。

对比

用户体验

Progresssive JPEG 用户体验更好,用户从开始就知道图片长什么样子,对于弱网用户来说,尤其必要。

文件大小

一般,Progressive 比 Baseline 格式小几KB。参考这里 实验 随机从网上下载图片,剔除4xx 和 5xx 错误后,剩余10360张图片,分别转化成 Baseline 格式 和 Progressive 格式。 结论

  • 大于 10K 的图片,Progressive 格式更小 (in 94% of the cases)。
  • 小于 10K 的图片,Baseline格式更小(75%)。

实际测试结论(这里受限于机器性能,样本不大):

浏览器支持情况:

即便在浏览器不支持的情况下,由于 Progressive 格式的图片比原图小,加载也会更快。

性能

Progressive 比较耗CPU, 对于移动设备来讲,这是一个顾虑,在低端机型上面可能不会支持Progressive,但是随着硬件升级。这个问题会得到解决。

参考文献: http://yuiblog.com/blog/2008/12/05/imageopt-4/ http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

原文地址: https://github.com/imweb/mobile/issues/4

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片...

27530
来自专栏数据小魔方

单元格格式/条件格式的妙用

今天跟大家分享一种常用的技巧——利用单元格格式/条件格式按颜色划分不同数据等级。 ▽▼▽ 这个技巧在绩效管理、成绩考评以及其他设计考核的工作中都会经常用到。首...

62270
来自专栏大数据互联网思维

如何利用迅捷画图绘制工作流程图

迅捷画图可以绘制流程图,思维导图并且能制作的很精美出来,那怎样利用迅捷画图绘制工作流程图呢?下面是小编辑总结的操作方法,可以参考步骤进行操作使用。

26840
来自专栏python爬虫实战之路

博客园自动发帖--图像处理极验验证码

为了写这篇文章,先写了两篇爬虫cookies详解和selenium+requests进行cookies保存读取操作,感兴趣的朋友可以看看前两篇文章。

9910
来自专栏落花落雨不落叶

Chrome的First Paint触发的时机探究

14930
来自专栏deepcc

jQuery 2.0将不再支持IE 6/7/8

31660
来自专栏carven

好用的分屏tab react-native-scrollable-tab-view

如果一个人每天都有惊喜的话,我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。 我们在写一个应用的时候,总是会有需...

16300
来自专栏自由而无用的灵魂的碎碎念

Fedora 13桌面管理的新发现

如果有很多程序同时开着,你如果快速找到所需要的窗口呢?怎么就能都快速预览,然后找到所要的窗口呢?

10910
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

82450
来自专栏落花落雨不落叶

Chrome的First Paint触发的时机探究

37580

扫码关注云+社区

领取腾讯云代金券