使用ImageMagick为你的网站减重

Images as a percentage of page weight for the Alexa top 10 global web sites

图片在网站所占的比重越来越重。更好的优化图片可以提高网站速度。减少宽带流量。

1.对用户上传图片进行缩放
    对于用户自己上传的图片不能简单的 用css限制大小，因为这样每次加载图片时候还是会加载整幅大图。占用多余的宽带，并且影响页面加载速度。应该根据实际显示需要进行缩放。比如我想要用户相册里的图片大小不能超过500x300：
用ImageMagick处理起来很简单

convert -resize "500x300>" input.jpg  output.jpg #如果图片比500x300小就保持原样，以防小图片被放大失真。

2.生成不同比例缩略图
    一般相册等应用，都会提供缩略图和预览图，这些缩略图同样不能简单的用css来限制大小，要为每个图片生成不同比例的预览图。

3.去除多余信息
    Exif信息是数码相机在拍摄过程中采集的一系列信息，这些信息放置在我们熟知的jpg文件的头部，也就是说Exif信息是镶嵌在JPEG图像文件格式内的一组拍摄参数，主要包括摄影时的光圈、快门、ISO、日期时间等各种与当时摄影条件相关的讯息，相机品牌型号，色彩编码，拍摄时录制的声音以及全球定位系统（GPS）等信息。简单的说，它就好像是傻瓜相机的日期打印功能一样，只不过Exif信息所记录的资讯更为详尽和完备。不过，具有Exif信息的JPEG图像文件要比普通的JPEG文件略大一点。还有就是像PS这种软件处理过的图片会有“program comments”。如果不是专业的摄影类网站，这些信息是没有用的，可以去掉：

convert -strip input.jpg output.jpg

4.调节压缩比
    大多时候，我们的网站并不需要那么清晰的图片，适量调节JPG图片的压缩比会减少图片大小，肉眼并不会分辨出质量被压缩后的图片。通常75%是最佳比例。

convert -quality 75% input.jpg output.jpg

上面几个步骤可以一次搞定：

convert -resize "500x300" -strip -quality 75% input.jpg output.jpg

上面说的都是针对JPG格式的处理方式，下面说一下BMP，GIF，PNG等格式的处理。

对于BMP直接转成JPG就可以了。再按照上面的方式处理。

而GIF和PNG貌似有些特殊。GIF的一些特性（动画效果，透明等）是JPG没有的，可以根据实际情况选择转或不转，如果转换成jpg，取第一帧只需要这样：

convert -format jpg input.gif input.jpg

PNG也可以通过减少PNG图片color数量的办法达到压缩的目的。但是这种办法压缩出来的图像可以明显看出来失真，而且呈锯齿状。

对于真实世界的PNG图片（通常指照片），一般先转换成JPG，再通过上面的办法来压缩。

但是要注意一点，透明或半透明的PNG图片在转换成JPG时透明部分会变成黑色。。。建议做用户头像时候不要转成JPG。。很难看~~~
本人头像就是深受毒害。。

关于图片扩展名

发现大部分网站喜欢把用户上传的图片（头像，相册等）都统一转成特定格式（一般都是jpg）。这样做的潜在弊端就是在用像ImageMagick这样的软件处理的时候会根据扩展名做隐式格式转换。
个人觉得在保存图片的时候不加扩展名处理起来更灵活一些。

注:把上面的命令行用mini_magick改写用到rails里很容易的。mini_magick本质就调用系统命令行嘛~~

links:
本文所说的都是对用户上传的图片处理，对网站自身的图片（header，banner等）处理《Even Faster Websites》一书第十章里面写的很详细了：
http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756

更多ImageMagick用法:
http://www.imagemagick.org/script/index.php

评论

18 楼 zhizedai 2010-04-23  

kamama 写道

用Imagemagick在图片上写中文好像支持不是很好
如果写一串中文是没有问题的，但是如果这个字符串是中文+数字或者字母组成的，如“中文123”那么就会乱码。。。

指定字体 "-font ***.ttf" 就不是乱码了

17 楼 sdh5724 2010-04-10  

pclfs1983 写道

在高访问量的情况下，特别在图片压缩中，imagemagic会占用很多的内存，甚至使jvm直接crash掉，我们现在就在为这个问题头痛

我们明确知道， 现在他有内存泄露。 因此， 不用了。 JAI 也很牛， 虽然编码上困难点， 当然， 要把SUN自己的动态库装上， 才有好的性能。 我们现在一直这么做。

16 楼 pclfs1983 2010-04-08  

在高访问量的情况下，特别在图片压缩中，imagemagic会占用很多的内存，甚至使jvm直接crash掉，我们现在就在为这个问题头痛

15 楼 shuiguozheng 2010-04-06  

好文章，收藏了！

14 楼 kamama 2010-03-31  

用Imagemagick在图片上写中文好像支持不是很好
如果写一串中文是没有问题的，但是如果这个字符串是中文+数字或者字母组成的，如“中文123”那么就会乱码。。。

13 楼 cue2008 2010-03-29  

恩，但是有时候图片对一个网站很重要，不能够缩减图片像素，免得用户体验不好

12 楼 mikeandmore 2010-03-29  

sdh5724 写道

这个东西， 对于使用命令行还是不错的。 但是如果使用C++/jni 接口的时候要十分小心。 由于存在严重的内存泄露， 线程安全问题和CRASH的问题， 以及开发部署的方便性。 我们已经在JAVA应用中放弃了IMAGEMAGTIC的使用。  JAI／IMAGEIO 是JAVA提供的处理工具， 是个不错的东西。 对于大部分情况都能处理。

拿其他语言写个服务，监听一个端口，然后这个东西专门掉imagemagick。
这是我经常避免线程安全问题的方法。

11 楼 sdh5724 2010-03-27  

这个东西， 对于使用命令行还是不错的。 但是如果使用C++/jni 接口的时候要十分小心。 由于存在严重的内存泄露， 线程安全问题和CRASH的问题， 以及开发部署的方便性。 我们已经在JAVA应用中放弃了IMAGEMAGTIC的使用。  JAI／IMAGEIO 是JAVA提供的处理工具， 是个不错的东西。 对于大部分情况都能处理。

10 楼 mikeandmore 2010-03-27  

imagemagick是*nix上的killer app啊。。

9 楼 qichunren 2010-03-26  

swen00 写道

你这个是需要安装他的软件，如果我在项目中如何使用？java用Runtime exec执行命令转化？

ImageMagick有相应的java实现的。

http://sourceforge.net/projects/jmagick/

8 楼 swen00 2010-03-26  

你这个是需要安装他的软件，如果我在项目中如何使用？java用Runtime exec执行命令转化？

7 楼 palmer 2010-03-26  

ImageMagick is free software delivered as a ready-to-run binary distribution or as source code that you may freely use, copy, modify, and distribute. Its license  is compatible with the GPL. It runs on all major operating systems.


It's great!

6 楼 Hooopo 2010-03-24  

花花公子 写道

用freeimage/image_science

花花可以说说freeimage/image_science比Imagemagick有啥优势吗？
据说flickr由ImageMagick换成GraphicsMagick是因为速度原因，虽然Imagemagick功能强大但是都是些用不到的。。

ps:花花你的非主流爱好真多啊....

5 楼 Hooopo 2010-03-24  

case0079 写道

不知道具体压缩效果怎么样.希望有这样的比较报告.我试验过几种图片处理工具类.
好多压缩效果不怎么样.压缩比例一大图像就看不清了.

效果嘛。。一般1~2M的大图可以压缩到50k左右。特别适用于风景图片非常多的网站，比如我们公司网站：

http://www.beibaotu.com

4 楼 robertliudeqiang 2010-03-24  

图片网站可以好好用用这个工具。

3 楼 花花公子 2010-03-23  

用freeimage/image_science

2 楼 case0079 2010-03-23  

不知道具体压缩效果怎么样.希望有这样的比较报告.我试验过几种图片处理工具类.
好多压缩效果不怎么样.压缩比例一大图像就看不清了.

1 楼 felsenlee 2010-03-22  

很实用的工具，还有接口供自己的程序调用，慢慢研究下