多圖像vs spritesheet

對於網站元素使用大型的spritesheet比使用多個圖像更好嗎？ Amazon sprite sheet 我的意思是，做額外的CSS圖像處理（背景定位一個大的圖像和裁剪它）補償較少的HTTP圖像請求？

2011-08-07 Cristy

number of concurrent HTTP/1 connections to a host被限制爲大約6.假設延遲爲100ms，發佈精靈中的大約60張圖片至少需要一整秒的下載時間（可能更多，因爲需要生成和解析HTTP請求和答案）。由於精靈圖像的大小與各個精靈大小相同，並且圖像處理速度非常快（我估計所有60張圖像都在100毫秒以內，所以我的估計值遠遠低於<），使用精靈可以節省亞馬遜約900毫秒的負載時間，顯而易見的影響 - 這在理論上是這樣，沒有考慮到必須服務的數量60x的巨大開銷。

總之，使用精靈爲標誌和通過HTTP/1的小圖像。

HTTP/2被設計爲不再需要變通方法。最重要的是，多個請求可以通過同一個TCP連接同時進行。此外，標頭壓縮旨在壓縮冗餘標頭，如User-Agent或Accept。

來源

2011-08-07 12:27:58 phihag

我不知道這是否仍然適用於新的HTTP/2標準和改進的並行下載。另外，如果您使用多個圖像，則只能在當前滾動高度下載所需圖像。 – Cristy

@Cristy添加了對HTTP/2的解釋。只有在滾動後才能下載小圖標是很危險的，因爲現在每個頁面加載至少需要一個RTT（並且通常比這更大），更不用說您的圖標只會在JavaScript之後加載，而且網站會如果用戶在丟失Internet連接後滾動，則會中斷。 – phihag

一般來說，使用許多小圖像的精靈更好。

每張圖片都會創建額外的http請求，並且需要時間。特別是對於HTTP 1.0，每個新請求都需要等待以前的響應。

至於非常大的圖片 - 它主要取決於將一組圖像傳輸到來自HTTP協議的時間開銷所需的時間比率。如果開銷不是很大，並且您認爲如此大的圖片會降低應用程序的速度 - 如果相關的話，您可以使用多個圖片 - 使用css精靈。

來源

2011-08-07 12:23:13

但是，如果你有一個1024 * 1024像素的圖像包含元素，你有30個元素，你必須在一個單獨的div內繪製該圖像30次，每次都有另一個背景位置。這不是渲染速度慢嗎？ – Cristy

這些天我們有四核CPU和RAM的演出。你怎麼看？ – robert

當然，當css精靈不是最好的想法時，情況就是如此 - 例如用照片集合，沒有人會把它們合併成一個更大的圖片。這是有限的。但它是一個軟的，所以你需要自己做一些測試，如果你有非標準的需求 –

當然，這是更好。瀏覽器只會對文件提出請求，而對多個文件的請求則相反。

使用精靈的許多小圖像，往往會在你的設計中重複（圖標爲前）。對於大型照片來說，如果是照片庫，這不是一個好主意。

來源

2011-08-07 12:24:58 robert

是的，對於任何合理的圖像大小，它會更快。

繪製較大圖像的一部分並不比繪製整個較小的圖像慢。它不像瀏覽器正在繪製整個圖像，也沒有移除未顯示的部分，它只是繪製正在顯示的圖像的一部分。它只是從內存中複製像素，並且如果像素在內存中靠近在一起或在較大的圖像中分散，則它很重要。

較大的圖像需要較長的時間才能加載小圖像，因此較小的圖像開始顯示得更快，但大圖像比所有小圖像加載的速度快得多。即使在圖像開始顯示之前您需要等待一段時間，所有圖像都會立即顯示，而不是一次顯示一個圖像。

來源

2011-08-07 12:38:50 Guffa

多圖像vs spritesheet

回答

相關問題