網站性能優化二---yahoo網站頁面性能優化34條黃金守則---images

[color=red][b]1.Optimize Images

優化圖像[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#opt_images[/url]

你可以檢查一下你的GIF圖片中圖像顏色的數量是否和調色板規格一致。 使用imagemagick中下面的命令行很容易檢查：
identify -verbose image.gif
如果你發現圖片中只用到了4種顏色，而在調色板的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。
嘗試把GIF格式轉換成PNG格式，看看是否節省空間。大多數情況下是可以壓縮的。由於瀏覽器支持有限，設計者們往往不太樂意使用PNG格式的圖片，不過這都是過去的事情了。現在只有一個問題就是在真彩PNG格式中的alpha通道半透明問題，不過同樣的，GIF也不是真彩格式也不支持半透明。因此GIF能做到的，PNG（PNG8）同樣也能做到（除了動畫）。下面這條簡單的命令可以安全地把GIF格式轉換爲PNG格式：
convert image.gif image.png
“我們要說的是：給PNG一個施展身手的機會吧！”
在所有的PNG圖片上運行pngcrush（或者其它PNG優化工具）。例如：
pngcrush image.png -rem alla -reduce -brute result.png
在所有的 JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作，同時它還可以用於優化和清除圖片中的註釋以及其它無用信息（如 EXIF信息）：
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

imagemagick：
[url]http://www.imagemagick.org/[/url]

pngcrush：
[url]http://pmt.sourceforge.net/pngcrush/[/url]

ImageMagick中文網站：
[url]http://www.imagemagic.cn/[/url]

個人實踐感覺比較好用的是，對於jpg文件：
去除多餘信息、調節壓縮比：
[color=blue]convert -strip -quality 75% input.jpg output.jpg[/color]

命令參數參考：
[url]http://www.imagemagick.org/script/convert.php[/url]

關於ImageMagick可參考文章：
使用ImageMagick爲你的網站減重(轉)
[url]http://www.oschina.net/bbs/thread/4373[/url]

（轉）ImageMagicK速查
[url]http://www.linuxeden.com/blog/?uid-196616-action-viewspace-itemid-7194[/url]

Optimizing PNG Images for Web Sites
[url]http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756[/url]

[color=red][b]2.Optimize CSS Sprites

優化CSS Spirite[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#opt_sprites[/url]

在Spirite中水平排列你的圖片，垂直排列會稍稍增加文件大小；
Spirite 中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式；
便於移動，不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小但對於用戶代理來說它需要更少的內存來把圖片解壓爲像素地圖。100x100的圖片爲1萬像素，而 1000x1000就是100萬像素。


[color=red][b]3.Don't Scale Images in HTML

不要在HTML中縮放圖像[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#no_scale[/url]

[color=blue]不要爲了在HTML中設置長寬而使用比實際需要大的圖片。[/color]如果你需要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那麼你的圖片（mycat.jpg）就應該是100x100像素而不是把一個500x500像素的圖片縮小使用。


[color=red][b]4.Make favicon.ico Small and Cacheable

favicon.ico要小而且可緩存[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#favicon[/url]

favicon.ico是位於服務器根目錄下的一個圖片文件。它是必定存在的，因爲即使你不關心它是否有用，瀏覽器也會對它發出請求，因此最好不要返回一個404 Not Found的響應。由於是在同一臺服務器上，它每被請求一次coockie就會被髮送一次。這個圖片文件還會影響下載順序，例如在IE中當你在 onload中請求額外的文件時，favicon會在這些額外內容被加載前下載。
因此，爲了減少favicon.ico帶來的弊端，要做到：

文件儘量地小，最好小於1K
[color=blue]在適當的時候（也就是你不要打算再換 favicon.ico的時候，因爲更換新文件時不能對它進行重命名）爲它設置Expires文件頭。[/color]你可以很安全地把Expires文件頭設置爲未來的幾個月。你可以通過覈對當前favicon.ico的上次編輯時間來作出判斷。

Imagemagick可以幫你創建小巧的 favicon。