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

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

Baseline JPEG

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

Progressive JPEG

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

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

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

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

1、PhotoShop

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

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(&quot;c:\\users\\biaodianfu\\pictures\\in.jpg&quot;)
destination = &quot;c:\\users\\biaodianfu\\pictures\\test.jpeg&quot;
try:
    img.save(destination, &quot;JPEG&quot;, quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, &quot;JPEG&quot;, quality=80, optimize=True, progressive=True)

5、jpegtran

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

6、C#

using (Image source = Image.FromFile(@&quot;D:\temp\test2.jpg&quot;)) {
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c =&gt; c.MimeType == &quot;image/jpeg&quot;);
    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(@&quot;D:\temp\saved.jpg&quot;, codec, parameters);
}

转自:标点符《使用渐进式JPEG来提升用户体验》

时间: 2024-10-29 10:45:47

使用渐进式 JPEG 来提升用户体验的相关文章

网站建设从多方面做起提升用户体验【转】

网站的用户体验有哪些呢?在网站建设中又怎样提升用户体验呢?用户体验是一个非常广泛的定义.总的概括有七个方面.具体的我们一起来分析一下. 第一.网站的性能方面.这一个方面主要是从网站的加载速度角度分析得出的.网站选择的服务器是否稳定,在域名解析的时候是不是正常.曾经有做过相关的调查,一般定义为三秒以内为优加载速度,超过三秒,每提升0.1秒,那么网站就会流失1%的用户.所以说,网站的加载速度不仅影响了用户的体验,对网站的SEO优化也有一定程度的影响. 第二.网站的视觉效果的设计.网站在色彩的搭配上有

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid App为什么会兴起编辑 1 1.2. 如何实现网页语言与程序语言的混合编辑 2 1.2.1. 多View混合型 2 1.2.2. 单View混合型 2 1.2.3. Web主体型 2 1.3. Hybrid App的瓶颈与未来编辑 3 2. Web App.Hybrid App.Native APP对比

Hitpoint 财务本土化软件再推升级版 完美提升用户体验

基于用户体验的反馈,结合市场上同类产品最佳实践及Hitpoint潜心研发,HPFS财务本土化解决方案5.0 SP4应运而生,于2011年9月16日隆重发布.始终秉承客户第一,坚持提高客户财税体验的理念,HPFS财务本土化解决方案 5.0 SP4 更加注重用户的亲身体验,密切关注用户的切身需求. 相较以往版本,HPFS 财务本土化解决方案5.0 SP4新增了诸多提升用户体验的亮点,为用户获取更大收益.     系统数据处理能力大幅提升 对于数据量庞大的企业,在进行财务数据处理时,所需时间将会更短.

脸萌PM谈如何使用统计工具来提升用户体验

近日,“萌萌哒”头像火爆朋友圈,身边几个90后更是把头像换成身穿德国队服的运动宝贝.脸萌 APP 去年底上线,真火起来却则是上线三个月之后的事.其间,脸萌运营团队究竟做了什么?友盟对脸萌产品经理访谈,从数据统计层面解读这款 APP 火爆背后的运营故事. 脸萌自2013年11月开始使用友盟统计平台,在挖掘用户需求.提升用户体验及产品改版等方面,利用友盟数据有效的进行产品运营和推广决策.他们是如何部署统计平台的各个功能并以此来指导运营的? 一.善用自定义事件,深入了解用户的使用细节 除了日常数据(日

paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制

源地址:http://blog.csdn.net/attilax/article/details/12343625 paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制 效果图: 作者Attilax ,  EMAIL:[email protected] 来源:attilax的专栏地址:http://blog.csdn.net/attilax 第一步:去掉系统默认标题栏 1 第2步:添加自定义标题栏以及最小化,最大化.关闭按钮...还有左边的窗体小图标.. 2 第3步:添加标

天搜科技:提升用户体验就是提升企业竞争力

导语:曾经风光无限的小鸣单车,如今成为了国内首家正式进入破产清算的企业,单车只能12元一辆贱卖,更是负债5000多万.作为长期关注互联网环境的天搜科技,其相关负责人指出:唯有重视用户体验,才能维持企业的可持续发展. "上帝欲使之灭亡,必先使之疯狂."这话用来形容如今的共享单车市场再合适不过,曾经风光无限.热火朝天的共享单车风口,如今却被挤压得成了危险的独木桥.最典型的例子,就是近日宣布破产的小鸣单车,这是全国首个共享单车破产案.不仅小鸣单车,卡拉单车.悟空单车.3Vbike.町町单车.

数据驱动设计:如何用A/B测试提升用户体验

文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 作者 | [美]罗谢尔·肯,伊丽莎白F.邱吉尔 内容出自<数据驱动设计:A/B测试提升用户体验>一书 来源 | 大数据(ID:hzdashuju) 导读:设计师最关注的可能就是提供良好的用户体验.良好的业务指标应时时把用户考虑在内.当希望借助数据更好地了解用户时,面临的第一个问题是选择哪些用户进行数据收集. 通过高效的实验方法收集用户数据,将在用户行为多样性.相似性.差异性及设计对用户影响等方面获

设计师如何用产品思维提升用户体验?

今天百度的同学来聊聊产品思维,让设计师从产品的角度入手,站在多维度考虑用户的问题.解决方法.产品目标和产品营销等,来看看不一样的思维能碰撞出哪样的火花. 当想起用户体验,我们经常会想到一款简洁.美观.易用产品的一系列功能,它让我们的生活更简单.但其实功能仅仅是产品微小.精细的一部分.针对用户遇到的问题,产品试图通过多种方法去解决,功能只是这众多可想出方法的一小部分.从产品的角度思考,意味着多维度统筹思考解决方案,包括特定用户的问题.待解决方案.产品目标.产品营收等维度. 用户体验的核心不是一系列

提升用户体验的7大微交互

众所周知,我们总是依据封面来判断书的好坏,聪明的设计师会创造实用有吸引力的界面.潜在用户可能会被吸引,但如何一直黏住他们呢? 要试着回答这个问题,所有一切都指向人本设计,其中用户是最主要的考量.以人为本:你的应用应该使用日常用语,包括情绪.口语,外观还要有一丝"诱惑力".界面应当成为你的好朋友,时刻准备给出建议提升你的体验,让你会心一笑. 现在揭幕:是微交互在起作用.精确的说,这主要是界面附带的交互动画,使它更具表现力.优秀的动画能够: 表达状态并提供反馈 提升直接的操纵感 将操作结果