渐进式jpeg(progressive jpeg)图片及其相关

转载 2013年09月04日 12:09:00

渐进式jpeg(progressive jpeg)图片及其相关

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=2916

一、基本JPEG(baseline jpeg)和渐进JPEG

网络上那些色色的照片都是.jpg格式的(“色色”指的是色彩斑斓的意思)。

不知诸位有没有注意到,这些jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示),例如下面的示意(图片来源:http://codinghorror.typepad.com):

一般线性加载(如不能显示点击这里查看)

交错/渐进式(若无法显示点击这里查看)

你网站的jpg图片是以何种方式呈现的呢?

我猜你是“自上而下扫描式”的,擦擦~

我在贴吧看海贼火影漫画时候,时不时会发现,其中部分图片就是渐进式加载的,如下截图:
海贼王 最危险的男人

图片的尺寸大小
同一张jpg图片,如果保存为基本式和渐进式那个尺寸更小呢?

根据我拿3终不同风格图片做测试,发现,百度百科中所说的渐进式图片的大小比基本式的小是不准确的。

其中,两者大小关系基本上没有什么规律。下面是我的测试结果:

图片缩略图 测试结果
图片品质59%及其以下时候,渐进JPEG图片更小;品质60%及其以上,基本JPEG更小
图片品质82%及其以上时候,渐进JPEG图片更小;品质81%及其以下,基本JPEG更小
无论图片品质多少,都是渐进JPEG图片更小

不过,个人臆测,从概率学上讲,大多数情况下,渐进式JPEG比基本式图片尺寸小一点。然而,其中的大小差异与原图尺寸相比,不值一提,因此,所谓图片大小不能作为两种图片选择的依据。

下载呈现速度
一个名叫Ann Robson的人,最近对各个浏览器下渐进式图片呈现做了测试。

下图为FireFox浏览器下呈现速度的对比图:
乳猪加载对比图 张鑫旭-鑫空间-鑫生活

当大图轮廓加载OK的时候,小图最后一个乳猪还没有出世面;而基本式乳猪图还没有开始加载!显然,罗伯森是想告诉我们,渐进JPEG下载更快。

下表为其在各个浏览器下测试的结果:

浏览器 (特定测试版本) 渐进jpeg前景渲染 渐进jpeg背景渲染
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win) 渐进地 (相当快!) 渐进地 (相当快!)
Firefox (v 15.0.1 Mac, 12.0 Win) 渐进地 (相当快!) 文件下载后立即地(慢)
Internet Explorer 8 文件下载后立即地(慢) 文件下载后立即地(慢)
Internet Explorer 9 渐进地 (相当快!) 文件下载后立即地(慢)
Safari (v 6.0 Desktop, v 6.0 Mobile) 文件下载后立即地(慢) 文件下载后立即地(慢)
Opera (v 11.60) 文件下载后立即地(慢) 文件下载后立即地(慢)

结论很简单,Chrome + Firefox + IE9浏览器下,渐进式图片加载更快,而且是快很多,至于其他浏览器,与基本式图片的加载一致,至少不会拖后腿。

Scott Gilbertson对渐进式图片有其他的补充:
1. 你永不知道基本式图片内容,除非他完全加载出来;
2. 渐进式图片一开始大小框架就定好,不会像基本式图片一样,由于尺寸未设定而造成回流——提高的渲染性能;
3. 渐进式图片也有不足,就是吃CPU吃内存。

内容就是这些,权衡使用在你手。一般而言,大尺寸图片建议使用渐进式JPEG.

//zxx: png图片也是可以渐进式呈现的

二、渐进式JPEG创建

1. C#转换
据说是如下的代码:

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) {

  ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg");

  EncoderParameters parameters = new EncoderParameters(3);
  parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
  parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
  parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive);

  source.Save(@"D:\temp\saved.jpg", codec, parameters);
}

至于里面什么意思,我也不知道,我是COPY过来滴,

其他语言的转换自己去搜吧。

2. photoshop生成
大伙都知道photoshop中有个“存储为web所用格式”,然后,其中(见下图),那个连续勾选就是渐进式JPEG图片了:
photoshop生成渐进式JPEG图片 张鑫旭-鑫空间-鑫生活

据说,需要勾选那个转换为sRGB选项,在某些浏览器下,图像设置为CMYK会出现一些问题!
勾选转换为sRGB 张鑫旭-鑫空间-鑫生活

FireWorks等图像软件也是有类似的输出设置的,因为偶没有安装,无法展示,自己摸索吧~

参考文章:

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=2916

(本篇完)


http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/

渐进式加载-基础讲解

前言: 我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做渐进式加载.渐进式加载能够大大的提升体...
  • libele
  • libele
  • 2017年03月16日 08:53
  • 880

前端优化-渐进式图片的制作

前言 关于渐进式图片的概念在此不作介绍,详细请参考渐进式jpeg(progressive jpeg)图片及其相关 本文主要介绍如何制作渐进式图片 实现 也许你已经看了很多篇关于渐进式图片的文章,然后按...
  • u011500781
  • u011500781
  • 2016年09月30日 18:02
  • 791

渐进式加载-基础讲解

前言:我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做渐进式加载.渐进式加载能够大大的提升体验感...
  • yulyu
  • yulyu
  • 2017年03月13日 11:51
  • 6184

渐进式jpeg(progressive jpeg)图片及其相关

渐进式jpeg(progressive jpeg)图片及其相关 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.z...
  • maikforever
  • maikforever
  • 2013年09月04日 12:09
  • 977

jpg 格式举例详解——非常详细

http://blog.csdn.net/yangysng07/article/details/9025443 JPEG文件数据结构以及将位图保存为JPG的代码 一、简...
  • STN_LCD
  • STN_LCD
  • 2017年11月24日 22:50
  • 162

渐进式JPEG技术(Progressive JPEGs)

在前端优化过程当中,一种叫做progressive jpegs的技术正被广泛的应用着。Webpagetest也已将progressive jpegs作为评价的一项指标。我在此简单介绍一下。 优点...
  • daruisoft
  • daruisoft
  • 2014年02月23日 22:22
  • 2134

安卓的渐进式jpeg

参阅URL;  http://blog.jobbole.com/44038/ 最近FACEBOOK开原了一个支持加载渐进式的图片加载模块,比unverisal-image_load还牛逼的感觉哟!...
  • f112122
  • f112122
  • 2015年04月05日 16:26
  • 1514

JPEG JPG

简述   JPEG是一个压缩标准,又可分为标准JPEG、渐进式JPEG及JPEG2000三种:   ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持最高级别的压缩,不过,...
  • u010527630
  • u010527630
  • 2016年09月20日 21:59
  • 342

JPG文件结构分析

【转自网络  作者:一 江秋水】 一、简述 JPEG是一个压缩标准,又可分为标准 JPEG、渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与...
  • LG1259156776
  • LG1259156776
  • 2016年02月23日 20:01
  • 1333

使用渐进式JPEG来提升用户体验

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别...
  • fengda2870
  • fengda2870
  • 2014年11月28日 23:10
  • 1336
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:渐进式jpeg(progressive jpeg)图片及其相关
举报原因:
原因补充:

(最多只允许输入30个字)