使用渐进式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文件中.

提升用户体验的40个Firefox 4扩展

- Roberto - 博客园-首页原创精华区
我在上一篇文章《硝烟渐浓:Windows下主流浏览器的全面比拼》中提到了Firefox强大的扩展性,并链接了两年前写的文章《提升用户体验的38个Firefox扩展》. 但是我发现这篇发表于百度空间的日志“被”私有了,原因是因为含有某些关键词. 我通读了几遍,改了几个我认为可能是关键字的内容,可是仍是私有状态,搞的我很是莫名其妙.

提升用户体验:不可不知的心理学原理

- 书皮 - 互联网的那点事...
提升用户体验的基础是用户研究,而用户研究不是简单对于用户需求的白描. 用户体验一词在国际上更为通行的叫法是UX(User eXperience),以用户至上的观点作为基石,由品牌印象(感官冲击)、功能性、可用性和内容等多个元素构成,相互依存且不可分割,共同形成了基本的用户体验. 本质上来说,体验并不能被设计,能被设计的只能是功能、流程与用户界面.

社交媒体,提升用户体验的重要部分

- - 业界
社交媒体应该是用户体验的重要部分,而很多网站将其作为附属物被随意添加到某一个网页中. 如何在产品设计中更好地利用社交媒体,提高用户体验,从而赢取更高的商业价值呢. 英国网页设计公司Headscape创始人 Paul Boag针对该问题发表了一篇博文《 Social Media Is A Part Of The User Experience》,CSDN对该文进行了编译,内容如下:.

提升网站用户体验的7个妙招

- - 人人都是产品经理
古者称师为先生,十年树木,百年树人,行业要进步,先生多多益善. 自觉学识尚浅,还远未达到先生的高度,但希望尽自己微薄之力,力所能及的做一些解惑工作. 最近在微博里回复了几个朋友的咨询,挑选其中一个有代表性的问题,在博客里做个展开说明分享. 问题:网站用户体验包括哪些内容,如何有效提升. 回答:网站用户体验,是个很宽泛的概念,为便于理解和记忆,简单归纳可分为7个内容:网站性能、视觉设计、导航分类、站内搜索、网站内容、交互设计、登录(付款)方式.

20131024早读课:提升iPad应用用户体验的5个技巧

- - 互联网er的早读课,专注产品、用研、交互
此文由互联网er早读课翻译小组成员@小悍_  原创翻译. 据9月份的数据,App Store里iPad应用即将达到40万,iPad Air也更加轻薄的闪亮登场. 没有任何时候比现在更适合去研究如何提升iPad应用的用户体验了. 本文中的一些想法不只是针对iPad,也跟所有的平板电脑有关. 但考虑到iPad的巨大成功(去年销量占所有平板电脑的73%),它是绝对值得我们去特别关注.

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

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

怎样通过更好的用户体验促进网站转化率的提升

- - 互联网分析
原文出处: Optimizing Conversion Rates:It’s All About Usability,编译: Beforweb. 对电子商务网站来说,可用性和用户体验的改善,对转化率的提高是有显著效果的. 所谓的改善,不仅包括更好的视觉效果与内容架构,更重要的是,怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息,与潜在客户进行有效的沟通.

用户体验

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