更快加載圖片

Question

您好，我對網絡技術的概念很陌生，我有兩個問題。

Q.1）假設我有一個大小爲400KB的圖像，我想將它加載到我的網頁上。我想知道以下步驟中的哪一步更快

a）一次加載整個400KB圖像。 b）有4張上面的圖片（每張100KB）並逐一加載它們。 Q.2）如果網頁上有4張圖片需要加載，每隔一段時間申請一張圖片還是一次申請一張圖片是否合適。

如果問題很愚蠢，請耐心等待。

Answer 1

1. 捆綁成一個擁有多張圖像被稱爲「精靈」 - 見here，並且通常保留較小，圖標般的畫面，很少用於大的背景和內容的圖像。

2. 還有一個圖像創建過程，GIF和PNG的，使您可以控制感知或真實的性能 - 隔行和逐行圖像：here和here。

Answer 2

當您在一個頁面中有多個圖像時，通常的方法是使用圖像精靈。它總是更好地將網絡流量限制到最小，其中包括很多延遲。

Answer 3

1. 爲web優化圖像 - 400kB是非常高的，即使你把它分成4個部分。考慮使用2G或其他慢速網絡在移動設備上打開您的網站的用戶。僅適用於辦公場所內的企業使用網站/應用程序。

2. 如Hanish所示 - 使用Sprite圖像 - check example on W3Schools。

3. 儘可能使用CSS效果而不是圖像。我知道這不適用於橫幅廣告或廣告圖片，但仍可能有助於減少整體網絡使用量。

Answer 4

即使瘋狂者將圖像作爲base64文本嵌入到html中。這確實將圖像的實際尺寸增加到比圖像本身更多，但是沒有任何要求。

http://www.base64-image.de

Answer 5

雖然你的問題是不是真正的編程本身，我會幽默你的問題。

有了這樣的情況，最好總是建立一些可行的工作，如果速度是問題在實踐中，通過準確計算事情來找出問題所在。 Stack Overflow有很多處理時間的帖子，所以我不會在這裏深入，因爲你應該研究這個。

這就是說，考慮到對於大多數人在互聯網400KiB是微不足道事情要擔心。（雖然我正在打字，但我正在以4.5MiB/s的速度下載音樂，並在單獨的選項卡中播放音樂 - 我知道我比世界其他地方幸運，但這是說明您不應該這樣做的事實。不用擔心太多關於這個）。我會強烈建議你在擔心這一點之前進行一些分析。

最簡單的方法是使用運行的開發人員工具（通常爲F12或Ctrl-Shift-C）在您的瀏覽器上進行全新的頁面加載。這是今天裝載的guardian.co.uk的時機如何看起來鉻：

畢竟那然而，常見的建議是minimze HTTP請求，如果可能的每一個引入延遲到頁面加載。如果資源是從單獨的域中檢索到的，那麼額外的DNS查找會增加更多的延遲時尤其如此。

所以：

檔案！

然後儘量減少HTTP請求並壓縮圖像。

爲了回答您的具體問題

1A：一次加載整個圖像，將在技術上需要較少的時間比分成4，因爲通過使額外的HTTP請求引入的延遲的相同尺寸的圖像。但是，瀏覽器在完全下載之前可能無法呈現它（實際上很少出現問題）。

2：不需要。除非您非常喜歡，否則讓您的瀏覽器和操作系統安排您的請求時間。