Images as a percentage of page weight for the Alexa top 10 global web sites  
圖片在網站所佔的比重越來越重。更好的優化圖片可以提高網站速度。減少寬頻流量。 

1.對使用者上傳圖片進行縮放 

    對於使用者自己上傳的圖片不能簡單的 用css限制大小，因為這樣每次載入圖片時候還是會載入整幅大圖。佔用多餘的寬頻，並且影響頁面載入速度。應該根據實際顯示需要進行縮放。比如我想要使用者相簿裡的圖片大小不能超過500x300： 

用ImageMagick處理起來很簡單 

[html] view plain copy print?

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

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

2.生成不同比例縮圖 

    一般相簿等應用，都會提供縮圖和預覽圖，這些縮圖同樣不能簡單的用css來限制大小，要為每個圖片生成不同比例的預覽圖。 

3.去除多餘資訊 

    Exif資訊是數碼相機在拍攝過程中採集的一系列資訊，這些資訊放置在我們熟知的jpg檔案的頭部，也就是說Exif資訊是鑲嵌在JPEG影象檔案格式內的一組拍攝引數，主要包括攝影時的光圈、快門、ISO、日期時間等各種與當時攝影條件相關的訊息，相機品牌型號，色彩編碼，拍攝時錄製的聲音以及全球定位系統（GPS）等資訊。簡單的說，它就好像是傻瓜相機的日期列印功能一樣，只不過Exif資訊所記錄的資訊更為詳盡和完備。不過，具有Exif資訊的JPEG影象檔案要比普通的JPEG檔案略大一點。還有就是像PS這種軟體處理過的圖片會有“program comments”。如果不是專業的攝影類網站，這些資訊是沒有用的，可以去掉： 

[html] view plain copy print?

1. convert -strip input.jpg output.jpg    

convert -strip input.jpg output.jpg  

4.調節壓縮比 

    大多時候，我們的網站並不需要那麼清晰的圖片，適量調節JPG圖片的壓縮比會減少圖片大小，肉眼並不會分辨出質量被壓縮後的圖片。通常75%是最佳比例。 

[html] view plain copy print?

1. convert -quality 75% input.jpg output.jpg    

convert -quality 75% input.jpg output.jpg  
 

上面幾個步驟可以一次搞定：  [html] view plain copy print?

1. convert -resize “500x300” -strip -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，取第一幀只需要這樣： 

[html] view plain copy print?

1. convert -format jpg input.gif input.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