網站小圖檔的規範(1)
令人又愛又恨的小圖檔 小圖檔在網站上，扮演一個很重要的角色。即使是像我這個懶得放圖的blog，還是得有favicon小圖示，按鈕、上一頁/下一頁的小圖示等。一般的商業網站更是需要大量的圖。這些圖的請求量通常很驚人，所以怎麼優化就變得很重要了。 根據Yahoo!的研究(http://www.yuiblog.com/blog/2008/10/29/imageopt-1/)，圖的請求量(總bytes數)，平均約佔總傳輸量的46.6%。當然每個網站都不相同，但是這個平均數也太驚人了。如果可以減少圖的負擔，網頁可以讀取得更快，伺服器也可以服務更多的使用者，頻寬費也可以降低。所以要做一個高品質的網站，圖的規範最好從一開始就建立好。 縮小圖檔的大小 優化圖檔有許多作法，其中一個最簡單的作法就是：縮小圖檔的大小(bytes數)。 一般設計師輸出的圖，常常存了許多不必要的資訊(metadata)，在網站顯示這些圖檔是完全不需要這些資訊的，把它們去除通常可以減少檔案大小。唯一要注意的就是有版權的圖是不能這樣作的，除非你有這張圖的版權。另外可以做的就是優化壓縮的效率，而不至於損失圖像的資訊(lossless)。可以縮小圖檔大小的工具有很多，我們可以只看一些免費的工具。 imagemagick: 萬用的圖像工具 OptiPNG: 專門處理png的工具 PNGCrush: 專門處理png的工具 PngOptimizer: 專門處理png的工具 PngOut: 專門處理png的工具 AdvanceCOMP: 專門處理png的工具 DeflOpt: 專門處理png的工具 PngQuant: 把png24轉成png8的工具 Pngnq: 把png24轉成png8的工具 Improved Pngnq: 把png24轉成png8的工具 ImageWorsener: 把png24轉成png8的工具 JPEGTran: 專門處理jpeg的工具 Gifsicle: 專門處理動畫gif的工具 可以用的工具不少，每一種工具對不同的圖，處理完的大小還可能有不小的差異。但是要對每個圖試用每一個工具，拿最小的來使用，會太花時間。所以只要選一個自己覺得好用的來用就可以了。 據我的經驗，jpeg最多可以減少20%的大小，png則可以減少10%的大小。 處理圖檔的原則 圖的尺寸較小、但要有清析的邊緣，例如小圖示，使用png。缺點是使用png8時，顏色受到限制，用png24在大圖的檔案大小又會太大。 圖的尺寸較大、顏色要鮮明，例如照片，使用jpeg。缺點是高對比的邊緣和大色塊會模糊 可以的話，把所有gif轉成png8(除了動畫gif)，或是一開始就規定不要使用gif。 動畫gif的數目也要儘量減少，有的話，使用工具去縮小 用工具對所有png圖檔執行縮小的步驟 用工具對所有jpeg圖檔執行縮小的步驟 壓縮 許多網站伺服器，如Apache, 或是應用程式框架，都有動態壓縮輸出內容的功能，可以很簡單的設定那些輸出是要壓縮的。由於常用的圖檔格式: jpeg、png、gif都是已經壓縮過的，再經過壓縮程序常常多花時間、花記憶體、花CPU，但常常壓出來的東西反而還更大，所以這些圖都記得絕不要設定壓縮。 favicon 一定要記得在你的網站放favicon，而且favicon最好不要太大，最好小於1KB。有的favicon檔案包含了各種大小的圖檔，所以就會太大。可以的話，使用16色palette png就好了。動畫gif的favicon是完全不必要的，要避免(但是動態更換favicon倒是在一些場合很有用)。