以前写过一篇博客《使用ImageMagick为你的网站减重》,涉及到的手段是:
- 在服务器端把图片缩放到合适的尺寸,避免在前端用css缩放图片。
- 用imagemagick的strip功能移出图片里的EXIF等多余信息。
- 压缩JPEG图片的质量,减少图片体积。
Lossless Compress With image_optim
上面的手段都是针对用户上传的JPEG图片。对于网站自身的banner或logo等图片也可以通过各种工具进行无损压缩来减少图片体积。
image_optim 是一个Ruby的gem,可以组合调用 advpng gifsicle jpegoptim jpegtran optipng pngcrush pngout 等图片优化工具。使用方法非常简单,并且可以看到每个图片优化的大小:
Baseline vs. progressive JPEGs
- 浏览器在渲染普通的Baseline类型JPEG是从上到下的。
- 而在渲染Progressive类型JPEG是渐进式的,在整个图片还没有加载完,就可以显示整个轮廓,逐渐变清晰,直到最后整张图片渲染完成。
使用Imagemagick转换Baseline JPEG为Progressive JPEG
从上面的两张gif图片演示的效果可以看出,Progressive JPEG渲染的更快,体验更好(个人认为瀑布流网站使用Baseline方式渲染体验更好,因为看起来更像瀑布......)。但是,Baseline JPEG是默认的方式,如果需要Progressive只能强制转换。
carrierwave mini_magick processor:
How to Detect Progressive JPEG
有一种说法是用file或identify命令获取到图片的类型为JFIF即是Progressive JPEG,但是经过多次试验,这个结论不靠谱,最靠谱的是上面使用的exiftool。