Sprites VS Larger Images

在我的網站上進行一些性能測試時，我注意到主頁上的3個圖像每個圖像需要加載1秒。Sprites VS Larger Images

這些圖像是3 1000 x 1000高清圖像，只能在主頁上加載。

我在考慮將這3個變成精靈表，以減少網站的加載時間。

您認爲這是一個好主意嗎？我知道精靈對小圖像效果很好，但我從來沒有用3個1000像素的高清圖像進行測試。

如果更好地使用精靈或者只是單獨加載它們？

我在網上發現了一些類似的問題，但無法得出結論。

2016-09-06 Learn12

我覺得我最終會壓縮圖像縮小尺寸。現在圖像上幾乎沒有壓縮。 – Learn12

如果你可以等待一個長時間的請求（例如使用微調），你可以使用你的「精靈」。 – Deep

@ Learn12這可能是你應該嘗試的第一件事。這取決於內容，但JPG照片通常可以壓縮到70％，沒有可見的文物，有時甚至更多...再次取決於圖像。 – Shomz

好問題，精靈解決的問題主要是當有許多小圖像時。所以不要向服務器發出100個請求，而只需要一個請求。

當使用大圖像時，您不會從這個概念中獲得太多好處。同樣對於較大的圖像，如果第一個圖像被加載並且您可以將其呈現給用戶並同時加載其他圖像，則會更好。

第三種選擇是渲染一些小縮略圖20x20像素JPG文件（通常爲<〜10KB大小），然後將它們拉伸至與大尺寸相同的尺寸。這會導致一些模糊的圖像，但圖像上的內容是可以理解的。現在，當更大的圖像被加載時，您將替換小圖像。這需要額外的JavaScript執行。

2016-09-06 20:27:09

+1此外，另一個可能的缺點是由於壓縮的工作方式，文件大小可能大於3個單獨文件的總和。 – Shomz

真的，在上傳之前，確保你優化你的圖片，使用壓縮，正確的緩存頭和CDN。 –

是的，謝謝。我已經意識到，即使我將3張圖像添加到精靈表中，我將只有1次調用服務器，但文件大小仍然很大。我決定爲圖像添加一些壓縮，看起來像80通常是默認的。我也會考慮製作一個媒體CDN。 – Learn12

回答