0
点赞
收藏
分享

微信扫一扫

使用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/​​
举报

相关推荐

0 条评论