很早之前看到一篇《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<ImageWriter> 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,然后刷新页面,可以比较清晰感受到图片由模糊逐渐清晰的过程。
用这种方式展示图片的用户体验较好。
来源:oschina
链接:https://my.oschina.net/u/2305466/blog/664023