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

标签: 网站开发 图片 | 发表时间:2013-07-17 13:34 | 作者:标点符
分享到:
出处:http://www.biaodianfu.com

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同。

Baseline JPEG

这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果,这种格式的JPEG没有什么优点,因此,一般都推荐使用Progressive JPEG。

baseline

Progressive JPEG

和Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时,你就会注意到这种技术。

progressive

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。(瀑布留的网站建议还是使用标准型的)

baseline_vs_progressive

 

 

另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存,不过对于现在的电脑来说这点图片的计算并不算什么。

说了这边多下面就改讲讲怎么讲图片保存为或者转化为Progressive JPEG了。

1、PhotoShop

在photoshop中有“存储为web所用格式”,打开后选择“连续”就是渐进式JPEG。

photoshop

 

2、Linux

检测是否为progressive jpeg : identify -verbose filename.jpg | grep Interlace(如果输出 None 说明不是progressive jpeg;如果输出 Plane 说明是 progressive jpeg。)

将basic jpeg转换成progressive jpeg:> convert infile.jpg -interlace Plane outfile.jpg

3、PHP

使用 imageinterlaceimagejpeg函数我们可以轻松解决转换问题。

<?php
    $im = imagecreatefromjpeg('pic.jpg');
    imageinterlace($im, 1);
    imagejpeg($im, './php_interlaced.jpg', 100);
    imagedestroy($im);
?>

4、Python

import PIL
from exceptions import IOError

img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5、jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>

6、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);
}

相关 [jpeg 用户体验] 推荐:

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

- - 标点符
今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式). 两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同. 这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.

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

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2916. 一、基本JPEG(baseline jpeg)和渐进JPEG. 网络上那些色色的照片都是 .jpg格式的(“色色”指的是色彩斑斓的意思 ). 不知诸位有没有注意到,这些 jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示),例如下面的示意(图片来源: http://codinghorror.typepad.com):.

用户体验

- tal-rasha - 博客园-首页原创精华区
    用户体验是一个很大的话题,先从一个故事说起.     周末参加了两天的PMP培训,听课期间注意到老师的一个细节,在讲选择题的时候,选项A、C读音正常,而“B”老师读为Boy,“D”老师读为Dog.     刚听到的时候大家莞尔一笑,以为这是个善意的玩笑.     很快,我想明白了,B和D的发音类似,容易混淆;Boy和Dog是简单的单词,发音能够明确区分,也没有类似Bog和Doy的读音混淆.

Photoshop压缩JPEG的秘密 图像品质7比6更差?

- Guan - nPhoto新摄影在线杂志
昨天我们报道了以色列科技公司ictv开发出一种优化jpeg压缩的方法——jpegmini,可将图像文件在不造成肉眼可识别损失的前提下将文件体积缩小50%-80%. 在对该技术的开发者的采访中,他提到“有时你在photoshop中选择了更高的图像品质,但实质上却造成了画质的损失”. 在一篇名为《jpeg压缩质量量化表格》(jpeg compression quality from quantization tables)的文章中,我们看到了这样的说法:.

JPEGmini:把 JPEG 照片壓縮到 1/5,但品質不變

- 三千夜 宴 - T客邦
大家都知道 JPEG 是一種失真壓縮的圖片技術,因為適合壓縮照片檔案,所以大部分的相機都會採用 JPEG 的方式來壓縮照片,讓檔案不會過大. 不過現在相機畫素的提升,一張照片在4MB以上已經不奇怪. JPEGmini 的出現,則能把 JPEG 的照片再壓縮,而不會破壞照片品質. 你分的出來哪張是 JPEGmini 嗎.

你知道JPEG格式可能要被淘汰了吗?

- - 雷锋网
近日,程序员Fabrice Bellard开发出了一种新的图片格式BPG,它能将现有数码图像的尺寸减小到一半,有望取代我们熟知的JPEG格式. 现在,手机或网页上的多数图像都是JPEG格式,它始于1986年,并于1994年正式推出. JPEG能在尽量不影响图像质量的情况下,将其压缩到很小,这能加快文件传输速度,减少网页加载时间,节省存储空间.

用户体验的价值

- 華 - 技术改变世界 创新驱动中国 - 《程序员》官网
当今时代,包括苹果、谷歌、Instagram等不同类型、不同规模、不同领域的企业和团队的成功用户体验案例,时时激发着你的热情、激励着你的梦想,向你描绘了运用用户体验力量的前景. 然而,一旦开始尝试在企业中构建用户体验的力量时,你会发现:用户体验的投入与回报难于衡量,用户体验的工作方式可能与团队以往的工作方式难于融合,用户体验人才难于获得、难于领导、难于培养,用户体验的力量难于持续成长.

用户体验几问

- - 互联网的那点事
对用户来说,他们可能很自然地会期望各种移动服务跟他们的日常生活息息相关,希望每款应用界面美观易于操作,而且性能良好. 但是,不可否认的是,手机作为一种媒介本身还是有一定的局限. 这就导致,在很多情况下,这三个要求很难同时满足. 很多时候,应用的性能和表现常常被开发者忽视. 但是实际上,它对用户体验的影响是先决的.

用户体验地图

- - blueui
体验地图是一种了解用户与产品/服务/系统之间交互的工具,辅助分析、改善用户体验;一张体验地图可以直观的表达出用户操作流、期望、特定的目标、用户情绪状态和整体的体验链,确定用户可能会与你的产品的一些接触点,让你整体把控和评估产品体验. 现在制作体验地图有很多种方法和观点,没有形成一套很客观的方法,下面介绍一下AdaptivePath的Chirs Risdon的五维度理论(原文):.