使用ImageMagick为你的网站减重(转)

红薯 发布于 2010/03/25 10:05
阅读 5K+
收藏 27

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

ImageMagick 是一个用来创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、组合,文本,直线, 多边形,椭圆,曲线,附加到图片伸展旋转。ImageMagick是免费软件:全部源码开放,可以自由使用,复制,修改,发布。支持大多数的操作系统。

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

加载中
0
简单的牛牛
简单的牛牛

ImageMagick的确是个十分强大的工具,据说很多图片分享网站都在使用它来做图像的处理的,缩放效果跟PS不相上下,请问红薯OSChina也是用的ImageMagick来处理的图像和其他图片的吗?

如何调用的呢?直接命令行还是通过JMagick接口调用呢?

原先处理图片缩放用了一些Java实现的工具类,不过处理效果和速度上都很不理想的。

0
红薯
红薯

引用来自#2楼“简单的牛牛”的帖子

ImageMagick的确是个十分强大的工具,据说很多图片分享网站都在使用它来做图像的处理的,缩放效果跟PS不相上下,请问红薯OSChina也是用的ImageMagick来处理的图像和其他图片的吗?

如何调用的呢?直接命令行还是通过JMagick接口调用呢?

原先处理图片缩放用了一些Java实现的工具类,不过处理效果和速度上都很不理想的。

OSChina 没有用 ImageMagic 哦,是用纯 Java 的处理方法,详情请看这里

0
简单的牛牛
简单的牛牛

了解~~谢谢红薯啦~

0
Rose
Rose

你好,最近在学习ImageMagick,用它做gif动态图片的缩略,gif是由帧组成的,开始使用它实现了对gif动态缩略,可之后换了帧数较大的图片后虽然也是动态的,但是效果很差,出现了白点,动的曲线图,请问一下,有什么好的解决方案吗?代码:  MagickImage image = new MagickImage( new ImageInfo( "e:/p1.gif" ) );
            Dimension imageDim = image.getDimension();
            int wideth = imageDim.width;
            int height = imageDim.height;
            MagickImage[] images=image.breakFrames();
            for(int i=0;i<images.length;i++){
                    images[i]= images[i].scaleImage(300,300);
                    byte[] blob = image.imageToBlob(new ImageInfo( "e:/p1.gif" ) );
                    MagickImage blobImage = new MagickImage(new ImageInfo( "e:/p1.gif" ), blob);
            }
            image=new MagickImage(images);
            image.setImageAttribute( "Dispose","1" );
            image.setImageAttribute( "Delay","1" );
            image.setFileName("e:/image/r200.gif");
            image.writeImage(new ImageInfo());

0
张宋付
张宋付

最好做法就是要图片展示进行切图片大小。这样子。上传图片处理图片资源大大缩小应用占用cpu.

我们现在做法是采用nginx模块把imagemagick编译到这个模块中。然后去直接调用这个接口来完成切分。

不过这个调用不是这么简单的。也就是利用nginx,http性能来完成相关调用。然后把这个小图上传直接放到mogilefs的开源这个软件存储点中。

0
evilcow
evilcow
怎么避免透明PNG转JPG时,背景变黑的问题?
红薯
红薯
我也想知道,但是 JPG 是没有透明模式的
0
astone2007
astone2007
这个软件功能相当强大,而且难能可贵的是,它并不大,对于图片格式转换很有用。
返回顶部
顶部