很早以前看到一篇《web前端图片极限优化策略》,了解有jpg分为baseline-jpeg和preogressive-jpeg。前端
具体的区别以下:java
baseline-jpeg:linux
在文件较大或者网络下载速度较慢的状况下,用户在浏览器端看到图片被一行行加载的效果。web
preogressive-jpeg:chrome
在文件较大或者网络下载速度较慢的状况下,用户在浏览器端先看到整个图片的模糊轮廓,随着扫描次数的增长,图片变得愈来愈清晰。目前百度图片就是用此种方式。shell
用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图片是否为渐进式图片:tomcat
//转换前,结果为: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访问该图片app
http://127.0.0.1:8084/examples/pj-p.jpg
用F12打开调试窗口,在network页面选择网络环境为GPRS,而后刷新页面,能够比较清晰感觉到图片由模糊逐渐清晰的过程。
用这种方式展现图片的用户体验较好。