如何處理顯着減緩網站加載速度的大圖片

我正在開發一個已由其他人設計的網站。設計師使用了一個大的圖像（900x700 100KB），其中包含一個大的徽標，然後是兩列的背景。如何處理顯着減緩網站加載速度的大圖片

每次頁面加載時都會加載此圖像，因爲它構成網站的基礎。我應該怎樣處理以改善加載時間？

我在考慮把它分成兩個或多個圖像，尤其是頂部的標誌。是否以這種方式分割圖像可以顯着減少加載時間？

感謝

-edit：此外，所有的圖像.JPG，將改變這個爲.gif或.png什麼幫助？

來源

2010-02-21 Dave

有鏈接到有問題的網站/設計/圖片？優化取決於幾個因素 –

這些建議有幫助嗎？你能接受答案嗎？ – Nicole

事情嘗試：

重複背景：如果這部分能夠被折斷成重複的圖像，可以減小文件大小有很多這樣（圖像分割成組成部分：不要重複，比如標識，以及做的部分，然後使用CSS重複它作爲背景）。
緩存：你應該看看圖像是否被正確緩存。沒有理由應該重新加載每個頁面請求。如果HTTP標頭正確允許緩存，那麼瀏覽器將不會再次請求它，直到圖像從緩存中清除。

請參閱http://www.mnot.net/cache_docs/瞭解有關使用HTTP標頭進行緩存控制的一些信息。

使用Web Developer toolbar爲Firefox檢查頭的圖像（打圖像URL，然後單擊信息>查看響應頭）
文件質量或鍵入：另外，您可能能夠使用Photoshop以不同格式或較低質量重新保存圖像。根據圖像的內容，GIF和JPG圖像對於同一圖像的文件大小可能差別很大（GIF對於有限和/或重複顏色的圖形非常有用，特別是當相同顏色的大部分以連續水平像素運行時）。如果圖像是類似照片的，則JPG可以非常好，因爲高度壓縮可以僞裝成非常詳細的圖像。

來源

2010-02-21 18:47:37 Nicole

PNG通常會導致比GIF更好的結果，特別是使用像pngcrush這樣的工具。給http://developer.yahoo.com/yslow/smushit/試試你的圖片！在存在大量顏色的情況下，使用jpeg獲得最佳文件大小 –

你想要做的兩兩件事是：

將其轉換爲PNG（比GIF小，平均10-30％）;和
緩存它有效。

緩存它的方法是對其進行版本化並使用遠期Expires標題。對於版本我一般只使用文件的修改時間（最後修改時間）作爲查詢字符串：

body { background-image: url(/images/background.png?1232343455); }

添加Expires頭見Speed Tips: Add Future Expires Headers。您可以通過腳本或Web服務器配置來完成。您需要該版本的原因是，您可以將其更改爲強制重新加載該文件，否則無論何時需要對其進行重命名時，都需要對其進行重命名。

這樣背景只會被下載一次。將文件拆分成幾個文件會使情況變得更糟，因爲瀏覽器傾向於限制併發下載的數量，並且您將整體下載更多數據（更多HTTP頭文件和圖像文件開銷）。

來源

2010-02-22 00:32:58 cletus

將圖像放在CDN上可能也會有幫助（以及其他提及的事情），因爲人們可能會比服務器更快地從CDN加載圖像。

來源

2010-02-22 00:41:12 chris

這是如何工作的？我認爲CDN最適用於實際需要同一個文件但通過不同的站點，並且相同的文件由您的瀏覽器緩存，下次如果您的站點需要它，而不是發送請求，它只會從緩存中獲取。請澄清。 – 2012-04-01 18:38:13

嘎吱嘎吱（去除不必要的元數據並找到更高效的壓縮算法）圖像與一個體面的圖像壓縮器是一個好的開始。儘可能減少顏色數量，更改格式（GIF或PNG24至PNG8）。

這可能是非常明顯的，但是......推遲到頁面完全加載（如果背景圖像中的顏色對比度不需要使前景文本可讀）。

一個簡單的方法來做到這一點，以便爲背景圖像取決於一類的CSS選擇器的身體像：

... 
    <style type="text/css"> 
    /*<![CDATA[*/ 
     body.page-loaded{background:url(/path/to/image.jpg)} 
    /*]]>*/ 
    </style> 
</head> 

<body class="page-loaded" onload="document.body.className+=' page-loaded';"> 
...

當然，「的onload」屬性body標籤應遷移出來（到頁面底部或外部JavaScript文件中的SCRIPT標籤）。此代碼也不需要任何JS庫來運行;它應該可能使用事件觀察者。

來源

2010-03-27 06:04:38 David

如何處理顯着減緩網站加載速度的大圖片

回答

相關問題