页面使用渐进式JPEG增强用户体验

今天，我意识到有两种方法可以保存JPEG文件：基线JPEG(标准)和渐进JPEG(渐进)。这两种格式具有相同的大小和图像数据，并且它们的扩展名是相同的。唯一的区别是它们的显示方式不同。

基线JPEG

这种类型的JPEG文件存储方式是从上到下扫描，依次保存JPEG文件中的每一行。当打开此文件显示其内容时，数据将按存储顺序从上到下逐行显示，直到所有数据都被读取并显示整个画面。如果文件较大或者网络下载速度较慢，会看到图片逐行加载的效果。这种格式的JPEG没有优点，所以一般建议使用渐进式JPEG。

渐进式JPEG

与基线扫描不同，渐进式JPEG文件包含多次扫描，这些扫描存储在JPEG文件中。在打开文件的过程中，会先显示整个画面的模糊轮廓。随着扫描次数的增加，画面越来越清晰。这种格式的主要优点是，当网络速度较慢时，可以看到图片的轮廓，知道图片正在加载什么。当一些网站打开大图片时，你会注意到这项技术。

渐进式图片的优势在于用户无需下载图片就可以看到最终图像的轮廓，可以在一定程度上提升用户体验。(Falls留下的网站建议用标准的。)

另外，渐进式画面的大小与基本画面的大小相差不大，有时可能比基本画面的小。渐进式图片的缺点是会吃掉用户的CPU和内存，但是对于现在的电脑来说，这些图片的计算算不了什么。

说到这里还有更多的，我就来谈谈如何保存图片或将图片转换为渐进式JPEG。

1、PhotoShop

photoshop中有“另存为网页格式”，打开后选择“连续”就是渐进式JPEG。

具体教程见//www . JB 51 . net/Photoshop/182198 . html

2、Linux

检查是否是逐行JPEG:识别-详细filename.jpg | grep隔行(如果输出None，表示不是逐行JPEG；如果输出平面描述是渐进式jpeg。)

将基本jpeg转换为渐进JPEG:转换infile.jpg-outfile.jpg

3、PHP

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

？PHP $ im=imagecreatefrom JPEG(' pic . jpg ')；image interface($ im，1)；imagejpeg($im，'。/php_interlaced.jpg '，100)；image destroy($ im)；4、Python

导入PILfrom异常导入IOErrorimg=PIL。image . open(' c : \ \ users \ \ Biao dianfu \ \ pictures \ \ in . jpg ')目的地=' c : \ \ users \ \ Biao dianfu \ \ pictures \ \ test . JPEG ' try : img . save(目的地，‘JPEG’，质量=80，优化=True，渐进=True)除了ioerror 3360 PIL。ImageFile . MAXBLOCK=img . size[0]* img . size[1]img . save(目标，‘JPEG’，质量=80，优化=True，渐进=True)5、jpegtran

jpegtran-复制非逐行输入文件输出文件

6、C#

使用(图像源=图像。from file(@ ' d : \ temp \ test 2 . jpg '){ ImageCodecInfo codec=ImageCodecInfo。GetImageEncoders()。first(c=c . MiMe TYPe==' image/JPEG ')；EncoderParameters参数=新EncoderParameters(3)；参数。参数[0]=新编码参数(系统。绘图.成像.编码器.质量，100升)；参数。参数[1]=新编码参数(系统。绘图。成像。编码器。扫描方法，(整数)编码值。scanmethoditinterlaced)；参数。参数[2]=新编码参数(系统。绘图。成像。编码器。渲染方法，(整数)编码值。RenderProgressive)；来源。保存(@'D:\temp\saved.jpg '，编解码器，参数)；}以上都是关于使用渐进式JPEG图片来提升页面的体验，非常简单实用，推荐给这里的朋友。