使用渐进式JPG改善用户体验

问题如此：当一张JPG压缩到无法压缩的程度，但是它的大小还有有点大，你会怎么做？

当时听到这个问题觉得一头雾水，根本不知道如何回答，后来面试官问我有没有听过一种叫做渐进式的JPG格式？我很坦白的说没有，后来得知原来这是一种我们WEB中

常见的JPG编码类型之一，使用这种格式的JPG我们发现图片在网页加载时会经历从模糊到清晰这个过程。可能这样表述不清晰，下文会以图片对比。

上图一：

图一中我们可以发现图片是从上倒下一条一条逐渐加载的，这种JPG压缩模式叫做顺序式编码（Sequential Encoding），一次将图像由左到右、由上到下顺序

处理。也是一种常见的JPG编码模式。

上图二：

图二中我们可以发现同样是一样图片，因为图片较大图一要逐渐加载完我们才知道这张图片的大致轮廓，但是在图二上，由于使用了渐进式JPG格式，在图片加载

的时候我们已经可以看到了图片的大致轮廓，这种就是渐进式JPG，使用了递增式编码（Progressive Encoding）。

所以？

1.所谓的渐进式JPG格式就是采用了递增式编码的JPG，你可以通过谷歌搜索关键字JPG Progressive Encoding查的更多英文的资料，因为我发现国内这方面的介绍

不是很多。

2.这种JPG格式是当图像传输的时间较长时，可将图像分数次处理，以从模糊到清晰的方式来传送图像（效果类似GIF在网络上的传输）。

所以你可能还是不知道我在讲什么。

于是再次放出例子：

在QQ空间看相册的人会发现画廊显示的图片一开始会非常非常的模糊，后来才逐渐地清晰起来，其实这就是渐进式的显示效果。我从自己的QQ空间掏了一张图片给

大家看看

整张图片都采用了渐进式的图片编码格式，一开始我们浏览器加载图片的时候效果如图一，直到整片文章加载完毕之后效果如图二。SO~?讲了这么多还是教大家如何将图片

导出成渐进式JPG吧。

如何实现渐进式JPG格式？方法一：使用Photoshop导出

步骤一：

在PS菜单栏选择“文件”-》存储为WEB和设备所用格式

步骤二：

选择图片格式为JPG0-》选中“连续”（经验不多，欢迎纠误。）-》“存储”即可

方法二：

没有PS或者想用别的快捷工具的可以使用工具“PaintShopPro”

步骤：

打开软件PaintShopPro-》打开图片-》点击菜单”FILE”-》选择”Save as”-》保存类型选择”JPG”-》Sub Type选择”Progressive Encoding”即可

其他方法：

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函数我们可以轻松解决转换问题

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

4、Python

import PIL
from exceptions import IOErrorimg = 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);
}

使用渐进式JPG改善用户体验相关推荐

【经验总结】使用渐进式JPG改善用户体验
[经验总结]使用渐进式JPG改善用户体验[转] [本文系外部转贴,原文地址:http://xmchen.com/progressive-jpg.htm] 今年9月份的时候我在广州应聘了我大学第一份校招 ...
精益设计: 设计团队如何改善用户体验
<精益设计: 设计团队如何改善用户体验> 基本信息原书名:Lean UX: Applying lean principles to improve user experience 作者: ...
【pmcaff】产品经理必知改善用户体验的基本方法
点击上方 "公众号" 可以订阅哦! 如果说影响应用排名的最大因素是什么?那一定是用户体验了.再也没有什么比它更重要的了,但是很多开发商在忙着开发和发布新应用的时候,往往会忽略掉这个 ...
反馈网络信息改善用户体验
为什么80%的码农都做不了架构师?>>> 1.使用下拉刷新控件改善用户体验 1⃣️.UITAbleViewController控件中有一个refreshControl属性,这个 ...
欧洲进出口银行_欧洲对开放银行的推动如何迫使银行应用改善用户体验
欧洲进出口银行 by Michael Gardner 通过迈克尔·加德纳欧洲对开放银行的推动如何迫使银行应用改善用户体验 (How Europe's push for Open Banking is ...
android 启动白屏_从细节入手改善用户体验，Flutter跨平台App开发中设置Android和iOS的启动页
前言 flutter开发App方便快捷,就是冷启动的时候要加载dart引擎有短暂的白屏,严重影响用户体验,这个时候我们就需要设置一个启动图片,想国内大部分App那样(例如微信那个地球),启动App的时 ...
设计电商网站必看，如何改善用户体验
电子商务是一个复杂的系统,很多小伙伴在设计电商网站的时候会遇到不少的问题.作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,有时候很多意想不到的因素都可能决定一个用户最终是否在该网站完成 ...
Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）
Jpetstore--使用AJAX和jQuery改善用户体验1(账号管理模块) CSDN下载:基于MVC用JSP/Servlet实现JPetStore--使用AJAX和jQuery改善用户体验账号管 ...
如何通过文档改善用户体验和客户关系
文档对你的员工和客户来说都是一个宝贵的信息来源.你策划和分享的每一个教程."如何做 "的文章和指南都可以改善用户体验和客户关系. 在这个数字时代,每个人都希望立即得到答案,很少或没 ...

使用渐进式JPG改善用户体验

使用渐进式JPG改善用户体验相关推荐

最新文章

热门文章