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


今天才认识到原来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

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

4、Python

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来提升用户体验》http://www.biaodianfu.com/progressive-jpeg.html

转载于:https://www.cnblogs.com/peterzha/p/6853235.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html英文读法,classin读音发音 classln英文怎么读?

classln英文怎么读?class in 读音&#xff1a; [klɑːs] [ɪn] class英 [klɑːs] 美 [kls] in英 [ɪn] 美 [ɪn] 重点词汇&#xff1a; class英 [klɑːs] 美 [kls] n. 等级&#xff1b;阶级&#xff1b;阶层&#xff1b;班级&#xff1b;课&#xff1b;v. 分类 过去式: cla…

季度报告 选择日期_易方达富惠纯债债券型证券投资基金 2018年第4季度报告

2018年12月31日基金管理人&#xff1a;易方达基金管理有限公司基金托管人&#xff1a;中国银行股份有限公司报告送出日期&#xff1a;二一九年一月二十二日1 重要提示基金管理人的董事会及董事保证本报告所载资料不存在虚假记载、误导性陈述或重大遗漏&#xff0c;并对其内容…

Linux学习入门

作为当代前端&#xff0c;前后端的界限越来越小&#xff0c;要想走的更稳&#xff0c;学习Linux操作系统的相关知识是必不可少的。 为什么服务器端采用linux操作系统&#xff1f; 1.linux相对于windows的性能更加稳定 2.前期投入成本低&#xff0c;相比于windows的服务器产品&a…

html垂直边距,html – Styling Bootstrap的btn-group-justified,添加边距和垂直尺寸

HTMLOption 1Option 2Option 3CSS.blocks .btn-primary{padding: 24px 12px;margin: 0 5px;border-radius: 0;}将看起来像&#xff1a;If I apply btn-group-justified class instead of just btn-group,theybecame justified but still not square-shaped,nor they have margi…

iscsi 同步_群晖六盘位旗舰NAS,一文教你如何解决多设备同步,跨平台协调

作为一名非专业后期狗来讲&#xff0c;一直以来在多设备以及不同平台间的数据同步&#xff0c;协同上都想尽了各种办法。众所周知&#xff0c;对于剪辑师来讲。对于工作平台都会有自己的偏好&#xff0c;比如有老师傅会喜欢Adobe的PR作为剪辑软件&#xff0c;90后的年轻人又觉得…

Atitti.java exp ast java表达式语法ast构造器

Atitti.java exp ast java表达式语法ast构造器 /atiplat_cms/src/com/attilax/lang/AstParser.java 原理 分割tokens_slice_li 分析splitor&#xff0c;&#xff0c; 主要是dot 和end 作者:: ★(attilax)>>> 绰号:老哇的爪子 &#xff08; 全名&#xff1a;&#x…

计算机内图标wps云盘怎么去掉,Win10资源管理器WPS云文档图标如何清除

如果用户在Windows10系统中安装了WPS办公软件的话&#xff0c;那么资源管理器中就会自动生成WPS云文档图标。一些用户觉得这样很占用空间&#xff0c;就希望该将其彻底删除。该如何操作呢&#xff1f;接下来&#xff0c;就随小编一起看看具体步骤吧&#xff01;具体如下&#x…

englishpod主持人对话文本_Englishpod 23 | 主持人文本讲解

本期主持人对话中的主要语言知识点如下&#xff1a;泛听&#xff1a;建议请先听了录音&#xff0c;没听清的&#xff0c;再对照看文本本期知识点&#xff1a;1&#xff0c;Vocabulary preview(词汇预览)&#xff1a;(1) financial adviser 2&#xff0c;Language takeaway(语言…

计算机桌面上的声音图标没了怎么办,Win7电脑右下角声音图标不见了怎么办?...

最近有Win7用户反映&#xff0c;电脑右下角的声音图标总是莫名其妙的不见了&#xff0c;导致用户要调整音量的时候不知道从哪调整&#xff0c;这让用户非常烦恼。那么&#xff0c;Win7电脑右下角声音图标不见了怎么办呢&#xff1f;下面&#xff0c;我们就一起往下看看Win7电脑…

LeetCode 171 Excel Sheet Column Number

Given a column title as appear in an Excel sheet, return its corresponding column number. For example: A -> 1B -> 2C -> 3...Z -> 26AA -> 27AB -> 28 思路&#xff1a; 相当于26进制转10进制&#xff0c;要注意A从1开始而不是从0开始的边界条件。 …

计算机学院足球队 英语怎么说,计算机学院举办2018届毕业生足球赛

计算机学院举办2018届毕业生足球赛当下又到了毕业季&#xff0c;2018届的本科同学们即将离开校园&#xff0c;开启人生新的阶段&#xff0c;在此背景下由共青团西北工业大学计算机学院委员会主办&#xff0c;10011508团支部、计算机学院体工部承办这一次毕业生足球赛。本次比赛…

XDOJ-1002-小W的塔防(dp)

转载于:https://www.cnblogs.com/GrowingJlx/p/6642771.html

道指mt4代码_道恩转债上市首日遭大股东清仓式减持!

今天市场震荡上行&#xff0c;通过时间的磨合和空间的震荡来判断多空力量&#xff0c;消耗短期多空力量&#xff0c;聚合中长期多空能量并逐渐选择方向。今天上证指数领涨&#xff0c;涨幅为3.11%&#xff0c;创业板指表现稍弱&#xff0c;涨幅1.31%。转债指数表现也不错&#…

PHP5.3--PHP7 新特性总结

PHP5.3 ①Added "?:" operator ( 添加了&#xff1f;&#xff1a;操作符) 指的是三元运算符可以简写&#xff1a; $x true;$rs $x?:false;//$x?$x:false; ②Added lambda functions and closures (增加了匿名函数和闭包) ③Added support for namespaces (增加了…

计算机上网络接口层,2016计算机专业知识:TCP/IP 各层功能

【导读】为了帮助广大考生更好的备考&#xff0c;中公事业单位考试网提供2016年计算机专业知识学习&#xff0c;为考生定制计算机基础知识复习计划。1.网络接口层&#xff1a;这是TCP/IP模型的最低层&#xff0c;包括能使用TCP/IP与物理网络进行通信的协议&#xff0c;且对应着…

comsol临时文件夹中有不支持的字符_错误:发生错误。请查看日志文件 C:\Users......

解决方法以下几种情况下会发生此问题&#xff1a;A&#xff1a;主目录或临时目录的写问题如果您的主目录磁盘空间有限&#xff0c;或者您没有写权限&#xff0c;导致 COMSOL 在求解期间无法写入&#xff0c;则可能会显示此消息。日志文件通常包含如下所示的错误消息&#xff1a…

(一)选择排序之一:堆排序

选择排序学过的有三种&#xff1a;简单选择排序、树形选择排序、堆排序 今天先来简单的了解一下堆排序&#xff1a; 完全二叉树&#xff0c;即从头到尾&#xff0c;从左到右依次排序&#xff0c;符合大堆&#xff08;小堆&#xff09;都行&#xff0c;即ki>k2i && k…

html百分比代码怎么写,参考Bootstrap写的一个带百分比的进度条(附源码)

最近需要写一个进度条的效果&#xff0c;网上找了一些&#xff0c;但都不能完美的实现需求。于是就自己改造了一个&#xff0c;效果如下图&#xff1a;因为动态图太大&#xff0c;我上传到 GitHub 了&#xff0c;就不在博客上再上传了。百分比跟随进度条移动&#xff0c;百分比…

mesh和wifi中继的区别_深度解读Mesh路由和无线中继的差异,谁才是性价比之选?...

对于居住大户型或者跃层户型的用户来说&#xff0c;由于房屋结构复杂&#xff0c;还有各种转角墙体的阻隔&#xff0c;一台路由器已经无法满足WiFi覆盖需求&#xff0c;单路由家庭的WiFi覆盖总是有死角。为了解决WiFi信号差的问题&#xff0c;很多人直觉反应就是简单粗暴的多加…

sessionStorage localStorage cookie

sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式&#xff1a;sessionStorage和localStorage。sessionStorage用于本地存储一个会话&#xff08;session&#xff09;中的数据&#xff0c;这些数据只有在同一个会话中的页面才能访问…