HTML大的圖像性能問題

Question

我試圖讓一個生病的滑塊這樣http://learnlakenona.com/

，但我有鍍鉻的主要性能問題（似乎他們的網站甚至不運行在Chrome的滑塊）。我通過在div上使用background-image CSS來顯示圖像，將它們添加爲img標籤導致更多滯後。

我禁用了所有的javascript，並注意到我仍然有一些巨大的圖像坐在海誓山盟之上只是滯後。

這裏只是坐在那裏的一些圖像。嘗試更改面板的大小，重新繪製圖像將其鎖定。 （有時它可以運行一點，這很奇怪） http://jsfiddle.net/LRynj/2/

有沒有人有一個想法，我可以得到像這樣的滑塊可以接受的性能！？ （圖片需要很大）

Answer 1

該網站使用巨大的透明PNG圖像的視差效果，所以：

• 你必須減少總重量你的圖片：你可以嘗試將這些PNG轉換爲PNG-8，如果它們還沒有的話。量化算法等在將圖像減少到256色方面做得非常好，而沒有太多質量下降。
• 你必須保持對視差效果的透明度。兩種類型的透明度都與PNG-8兼容：每個像素都具有GIF類似透明度，透明度類似於「PNG-32」（PNG-24 + 8位透明度），每個像素具有256級透明度。 Adobe Fireworks特別擅長創建這種「PNG-8 + alpha」圖像;轉換器也存在，但它們並不完美（取決於您的圖像）。
• 加載您立即看到的圖像的最小部分，並且稍後您的9600像素寬（！）的其餘部分將大大減少首次查看的時間。您可以通過以1920或2560像素塊對圖像進行切片，將3個圖像的查看部分加載爲背景圖像並通過腳本執行，該腳本僅在DOM加載所有其他部分後纔會執行。沒有太多的部分，因爲這意味着更多的資源下載，但仍然不是一個4MB的精靈:)獎金：通過將你的3個圖像切片爲PNG-8，每個PNG將擁有自己的256色調色板，整體質量會更好像PNG-24一樣完美，但比9600像素的PNG-8更好，它只能使用256種顏色，在一個PNG中更適合男士服裝的灰色陰影，更棒的球形和棒狀分子的顏色等

編輯：並且永遠不要嘗試加載在智能手機上！我喜歡媒體查詢和避免UA檢測，因爲它不是大多數時間需要，並且從來沒有完美的，但這是一種情況（選擇加載8MB的圖像）在哪裏會受到歡迎...忽略沒有光纖並且不會等待您的網站顯示的用戶是另一個與您的問題無關的問題。

Answer 2

通過在圖像編輯器中調整圖片大小或降低圖片質量來優化圖片資源。

您還可以使用免費的在線工具：

http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/