使用ImageMagick为你的网站减重（2）

以前写过一篇博客《​​使用ImageMagick为你的网站减重​​》，涉及到的手段是：

1. 在服务器端把图片缩放到合适的尺寸，避免在前端用css缩放图片。
2. 用imagemagick的strip功能移出图片里的EXIF等多余信息。
3. 压缩JPEG图片的质量，减少图片体积。

Lossless Compress With ​​image_optim​​

上面的手段都是针对用户上传的JPEG图片。对于网站自身的banner或logo等图片也可以通过各种工具进行无损压缩来减少图片体积。

​​image_optim​​ 是一个Ruby的gem，可以组合调用 ​​advpng​​ ​​gifsicle​​ jpegoptim jpegtran ​​optipng​​ ​​pngcrush​​ ​​pngout​​ 等图片优化工具。使用方法非常简单，并且可以看到每个图片优化的大小：

image_optim app/assets/images/*.{jpg,png,gif}

Baseline vs. progressive JPEGs

1. 浏览器在渲染普通的Baseline类型JPEG是从上到下的。
2. 而在渲染Progressive类型JPEG是渐进式的，在整个图片还没有加载完，就可以显示整个轮廓，逐渐变清晰，直到最后整张图片渲染完成。

使用Imagemagick转换Baseline JPEG为Progressive JPEG

从上面的两张gif图片演示的效果可以看出，Progressive JPEG渲染的更快，体验更好(个人认为瀑布流网站使用Baseline方式渲染体验更好，因为看起来更像瀑布......)。但是，Baseline JPEG是默认的方式，如果需要Progressive只能强制转换。

convert -interlace plane baseline.jpg progressive.jpg #转换成Progressive JPEG
exiftool progressive.jpg |grep Encoding # 检测转换的结果,如果为Progressive DCT, Huffman coding就说明转换成功。

carrierwave mini_magick processor:

def optimize
  manipulate! do |img|
    img.strip
    img.combine_options do |c|
      c.quality "80"
      # Use Progressive DCT Instead of Baseline DCT.
      c.interlace "plane"
      c.colorspace "rgb" #据说cmyk在IE下有问题，没试过..
    end
    img
end

How to Detect Progressive JPEG

有一种说法是用file或identify命令获取到图片的类型为JFIF即是Progressive JPEG，但是经过多次试验，这个结论不靠谱，最靠谱的是上面使用的exiftool。

相关链接

1. ​​http://www.codinghorror.com/blog/2005/12/progressive-image-rendering.html​​
2. ​​http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/​​
3. ​​http://www.yuiblog.com/blog/2008/12/05/imageopt-4/​​
4. ​​http://hooopo.iteye.com/blog/620498​​
5. ​​http://imageoptim.com/​​