体验JPEG图片渐进模式

前几天看了一个高手朋友的文章后才知道,原来JPEG文件有两种保存方式,分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)

两种格式唯一的区别是二者显示的方式不同

标准型

存储方式:从上到下扫描,把每一行顺序的保存在JPEG文件中

显示方式:数据将按照存储时的顺序从上到下一行一行的被显示出来,如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果

渐进式

存储方式:进行多次扫描,每次扫描的精度逐渐提高,把多次扫描结果顺序保存在JPEG文件中

显示方式:先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰

优势和不足

优势

渐进式图片一开始大小框架就定好,不会像基本式图片一样,由于尺寸未设定而造成页面重排,所以渐进式图片提高了页面渲染性能

并且由于开始就能让用户看到图片的轮廓,也提高了用户体验

不足

相比基本式图片 更占用CPU和内存

实际测试

(1)准备图片

找了一张1.1M的图片,放入一个测试页面,把图片外面加一层div,如

<div style="border:2px solid red">

添加边框是为了看加载图片时的区域大小

(2)把图片转为渐进式

我的服务器上已经安装了imagemagick,用它就可以转换格式

转换命令

convert 原图.JPG -interlace Plane 新图.JPG

转换后图片的大小只相差了几K,可以忽略了

(3)浏览测试页面

在测试页面的 img 标签中分别使用原图和新图,查看浏览效果

结果:

可能由于加载速度比较快,没有看出图片显示方式的不同,但可以看出初始加载方式的不同

使用原图,初始时img外层div是合在一起的,没有展开,说明图片没加载出来时不知道图片的尺寸

使用新图,初始时img外层div是安装图片大小展开的,说明没加载完成时就知道图片的尺寸了

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-11-01

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

iOS中将图片保存到自定义相册中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

29420
来自专栏Jerry的SAP技术分享

Fiori里花瓣的动画效果实现原理

Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。

26890
来自专栏Youngxj

给你的博客文章加入”展开/收缩功能‘’

30320
来自专栏ytkah

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

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

28430
来自专栏听雨堂

CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

22290
来自专栏IMWeb前端团队

BaselineJPEGvs.ProgressiveJPEG

本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 JPEG有两种存储格式:baseline 和 progress...

326100
来自专栏娱乐心理测试

关于jQuery的浅谈学习

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

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

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

10510
来自专栏Golang语言社区

golang进度条

进度条元素 ▪ 总量 ▪ 当前进度 ▪ 耗时 通过以上元素可以延伸出:完成百分比、速度、预计剩余时间、根据设置速度快慢阈值用不同的颜色来显示进度条。 实现 进度...

466100
来自专栏破晓之歌

AI-icon制作 原

9450

扫码关注云+社区

领取腾讯云代金券