CSS - 單個圖像文件vs多個文件的優點

我注意到現在有很多網站，所有的圖像都放在單個文件中，然後使用背景位置來抵消屏幕上顯示的矩形。CSS - 單個圖像文件vs多個文件的優點

這是出於性能原因？如果是這樣，爲什

來源

2010-05-25 Hamish

這是出於性能的原因？如果是這樣，爲什

單個請求裝置向所述服務器意其它東西可裝載更少併發連接。 TCP連接也會花費服務器上的資源。每個用戶的總連接數量越少意味着更多的用戶可以一次使用它（如果您的性能確實是連接限制的話）。
單個精靈通常比一堆單個圖像略小一些的文件大小，雖然這不能保證，而且不同的格式會有所不同。
對象狀態全部立即加載意味着交互比直接加載另一個狀態更直接。
即使部分精靈未在當前頁面上使用，通過加載它（以及瀏覽器緩存它），這將在用戶查看其他頁面時稍後加速用戶的瀏覽體驗。

精靈不解決一切，你，直到你預測交通繁忙可能不應該過於肛門關於它和/或你移動到你每次請求收取CDN。

當然，如果你有一個16x16的圖標在一個地方使用的整個負載，你可以快速精靈它們。我發現有幾個特定的東西像這樣的精靈實際上使CSS更加清潔。

來源

2010-05-25 16:34:12 Oli

對一張大圖像進行壓縮通常可以更有效地壓縮多個相似圖像。

更重要的是，HTTP請求相對昂貴。

來源

2010-05-25 16:17:10 Quentin

@david沒有提到的另一件事是，它將花費大量的服務器時間來加載幾個小圖像，而不是一次加載一個大圖像（請求）並將其作爲您的選擇進行操作

來源

2010-05-25 16:20:05 Starx

這被稱爲CSS sprites。它有以下幾個原因使用：

對服務器的請求較少。
稍小的文件大小，因爲大圖像比單獨的圖像稍小。
預加載圖像，以便例如用於懸停效果的圖像已加載，因爲它使用與非懸停狀態相同的圖像。

其缺點是管理和更新圖像的工作量更大。

來源

2010-05-25 16:21:44 Guffa

感謝您的回答。此外，如果我有四個CSS sprites，其中兩個用於說'page1'，另外兩個用於'page2'。通常的做法是有兩個圖像文件（每個頁面一個）或一個包含所有文件的圖像文件。 – Hamish 2010-05-25 21:35:30

@Hamish：這很大程度上取決於圖像。您可能想要將具有相似大小或類似用法的圖像放在同一個精靈中。 – Guffa 2010-05-26 06:13:42

您可以查看一個優秀的雅虎的「最佳實踐加快您的網站」： http://developer.yahoo.com/performance/rules.html#opt_sprites

來源

2010-05-25 17:56:04

您也可以在A List Apart中查看舊Dave Shea的帖子，描述所提到的技巧： http://www.alistapart.com/articles/sprites 至於今天，您還可以對base64編碼感興趣一些圖片（也許對於這些重量約爲1k的圖片），只是在IE6中工作有些棘手（但可能）。爲了做到這一點，你需要在這裏挖掘：http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ – 2010-05-25 17:56:19

CSS - 單個圖像文件vs多個文件的優點

回答

相關問題