很早之前看到一篇《web前端图片极限优化策略》，了解有jpg分为baseline-jpeg和preogressive-jpeg。

具体的区别如下：

baseline-jpeg：

在文件较大或者网络下载速度较慢的情况下，用户在浏览器端看到图片被一行行加载的效果。

preogressive-jpeg：

在文件较大或者网络下载速度较慢的情况下，用户在浏览器端先看到整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。目前百度图片就是用此种方式。

用JAVA转换的相应代码如下：

package com.tuzki.sannychan;

import java.awt.image.BufferedImage;

import java.io.File;

import java.io.IOException;

import java.util.Iterator;

import javax.imageio.IIOImage;

import javax.imageio.ImageIO;

import javax.imageio.ImageWriteParam;

import javax.imageio.ImageWriter;

import javax.imageio.stream.ImageOutputStream;

public class ProgressiveJPEG {

public static void main(String[] args) throws Exception {

File file=new File("D:/Picture/pj.jpg");

BufferedImage image = ImageIO.read(file);

Iterator it = ImageIO.getImageWritersByFormatName("jpeg");

ImageWriter writer=null;

while(it.hasNext()) {

writer=it.next();

break;

//System.out.println(it.next());

}

if(writer!=null) {

ImageWriteParam params = writer.getDefaultWriteParam();

params.setProgressiveMode(ImageWriteParam.MODE_DEFAULT);

//params.setCompressionQuality(0.8f);

ImageOutputStream output = ImageIO.createImageOutputStream(new File("D:/Picture/pj-p.jpg"));

writer.setOutput(output);

writer.write(null,new IIOImage(image,null,null), params);

output.flush();

writer.dispose();

System.out.println("ok");

}

}

}

用linux命令可以查看jpeg图片是否为渐进式图片：

//转换前，结果为：None，表明非渐进式

[root@master1 ~]# identify -verbose  pj.jpg  | grep Interlace

Interlace: None

//转换后，结果为：JPEG，表明是渐进式

[root@master1 ~]# identify -verbose  pj-p.jpg  | grep Interlace

Interlace: JPEG

用浏览器测试：

将图片放到tomcat目录的webapps\examples目录下，然后使用chrome访问该图片

http://127.0.0.1:8084/examples/pj-p.jpg

用F12打开调试窗口，在network页面选择网络环境为GPRS，然后刷新页面，可以比较清晰感受到图片由模糊逐渐清晰的过程。

用这种方式展示图片的用户体验较好。