论坛首页 编程语言技术论坛

使用ImageMagick为你的网站减重

浏览 19266 次
该帖已经被评为良好帖
作者 正文
   发表时间:2010-03-20   最后修改:2010-03-20
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
   发表时间:2010-03-22   最后修改:2010-03-22
很实用的工具,还有接口供自己的程序调用,慢慢研究下
0 请登录后投票
   发表时间:2010-03-23  
不知道具体压缩效果怎么样.希望有这样的比较报告.我试验过几种图片处理工具类.
好多压缩效果不怎么样.压缩比例一大图像就看不清了.
0 请登录后投票
   发表时间:2010-03-23  
用freeimage/image_science
0 请登录后投票
   发表时间:2010-03-24  
图片网站可以好好用用这个工具。
0 请登录后投票
   发表时间:2010-03-24  
case0079 写道
不知道具体压缩效果怎么样.希望有这样的比较报告.我试验过几种图片处理工具类.
好多压缩效果不怎么样.压缩比例一大图像就看不清了.

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

http://www.beibaotu.com
0 请登录后投票
   发表时间:2010-03-24  
花花公子 写道
用freeimage/image_science

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

ps:花花你的非主流爱好真多啊....
0 请登录后投票
   发表时间: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!
0 请登录后投票
   发表时间:2010-03-26  
你这个是需要安装他的软件,如果我在项目中如何使用?java用Runtime exec执行命令转化?
0 请登录后投票
   发表时间:2010-03-26  
swen00 写道
你这个是需要安装他的软件,如果我在项目中如何使用?java用Runtime exec执行命令转化?

ImageMagick有相应的java实现的。

http://sourceforge.net/projects/jmagick/
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics