使用渐进式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;并对其内容…

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

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

计算机内图标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电脑…

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

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

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

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

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

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

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

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

认识css

css css样式:css是英文Cascading Style Sheets的缩写,称为层叠样式表&#xff0c;用于对页面进行美化&#xff0c;CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。存在方式有三种&#xff1a;元素内联、页面嵌入和外部引入 语法&#xff1a;style key1…

利用计算机找出函数关系式,使用 CHOOSE 查找函数中类似于表的信息 - Excel公式函数运用大全...

本文介绍 Microsoft Excel 中 CHOOSE 函数的公式语法和用法。说明使用 index_num 返回数值参数列表中的数值。 使用 CHOOSE 可以根据索引号从最多 254 个数值中选择一个。 例如&#xff0c;如果 value1 到 value7 表示一周的 7 天&#xff0c;那么将 1 到 7 之间的数字用作 ind…

计算机三级数据库2020年试题,2020年计算机三级数据库考试模拟强化试题及答案...

【导语】“数据库技术”科目考核数据库系统基础知识及数据库应用系统项目开发和维护的基本技能&#xff0c;下文是无忧考网为您搜集整理的2020年计算机三级数据库考试模拟强化试题及答案&#xff0c;有需要的考生不妨多多参考一下我们为您分享的内容。1.数据集成是数据仓库建立…

1562区别 洛达1552_洛达1562A与洛达1536u与杰里有哪些区别呢?

由于上一篇文章&#xff0c;有很多人问我有什么区别&#xff0c;怎么判断是1562a以及铂金标anc以及芯片之间的差距等等有关问题&#xff0c;今天特意给大家写下这篇文章&#xff0c;废话就不多说了&#xff0c;大家看接下来的文章吧&#xff01;。相信大家应该对AirPodspro已经…

计算机房防火要求,信息机房如何进行防火设计

众所周知&#xff0c;根据机房的使用性质、管理要求及重要数据丢失或网络中断在经济或社会上造成的损失或影响程度&#xff0c;可将电子信息机房分为A、B、C三级。那么&#xff0c;信息机房如何进行防火设计呢&#xff1f;信息机房如何进行防火设计一、选址计算机房建筑规模大、…

计算机串口通信的作用,串口通信的具体用途是什么

串行接口简称串口&#xff0c;也称串行通信接口或串行通讯接口(通常指COM接口)&#xff0c;是采用串行通信方式的扩展接口。串行接口 (Serial Interface) 是指数据一位一位地顺序传送&#xff0c;其特点是通信线路简单&#xff0c;只要一对传输线就可以实现双向通信(可以直接利…

网络连接

网络连接状态&#xff1a; C: S: SYN_SEND             SYN_RECVESTABLISH             ESTABLISH FIN_WAIT1             CLOSE_WAITFIN_WAIT2             LAST_ACK TIME_WAIT      …

拯救者r7000怎么关闭触控板_联想拯救者R7000(2020版)上手体验,有没有AMD Yes?

联想作为一个老品牌&#xff0c;它的产品线有很多系列(电脑、手机、平板、智能家居)&#xff0c;而我们今天来聊一聊电脑系列中的联想拯救者系列电脑。今年的R7000在五月份发布&#xff0c;而我也在六月份入手了一台&#xff0c;被它的外观吸引。硬件方面的参数&#xff1a;小编…

warframe计算机拒绝访问,Win10运行warframe出现蓝屏DRIVER_CORRUPTED_EXPOOL怎么办

warframe是一款科幻题材的第三人称射击网游&#xff0c;一些用户在windows10系统运行warframe过程中经常出现了电脑蓝屏的现象&#xff0c;并且提示“DRIVER_CORRUPTED_EXPOOL”&#xff0c;这是怎么回事&#xff1f;RIVER CORRUPTED EXPOOL错误是由于Windows 10/8/7上的设备驱…

【SpringMVC学习07】SpringMVC中的统一异常处理

我们知道&#xff0c;系统中异常包括&#xff1a;编译时异常和运行时异常RuntimeException&#xff0c;前者通过捕获异常从而获取异常信息&#xff0c;后者主要通过规范代码开发、测试通过手段减少运行时异常的发生。在开发中&#xff0c;不管是dao层、service层还是controller…