透明度在CSS精靈

所以，我做我的CSS精靈的第一個站點和保存圖像時爲.png做空白的量之間的圖像對圖像的性能產生影響我想知道？透明度在CSS精靈

例如，如果我在哪裏CRAME 10個圖像轉換成一個非常小的畫布這將是較小然後，如果我在哪裏相同的10個圖像CRAME成很好地間隔開出的圖像？

2011-07-09 endy

我瞭解到，Safari移動並不總是通過CSS背景圖像點亮標記。我傾向於在每個單獨的圖像/元素之間留出4px的空間。 Safari移動瀏覽器可能會出現的情況是，您可能會看到它不屬於的元素中的修改圖像。通常在1px寬度或高度。 – Joonas

PNG做圖像之間壓縮空白的一個不錯的工作，所以間隔出來的下載大小的影響可能是非常小的。在瀏覽器端進行解壓縮時，較大的圖像可能會對性能產生影響，但這可能僅在非常小的系統上纔會顯現。

但總體來說，沒有缺點的緊密，所以我肯定會認爲這樣做包裝的圖像。

2011-07-09 09:33:24

將它們緊緊包好讓我在結束時更難以進入座標系。 – endy

我無法想象這會更難。如果它們是矩形的，不規則的大小，並且在外觀上非常相似，我想這可能是一個小問題，但在這種情況下，單個像素值的間距可能就足夠了。 –

圖像中的多個像素，所述多個存儲器佔用時，它被轉換成在存儲器中的未壓縮的位圖。

這可能會影響性能，尤其是在低內存系統（它已經對一些在電視上的嵌入式瀏覽器的相當明顯，並設置我最近正與機頂盒）。

2011-07-09 09:30:54 Quentin

這很奇怪，因爲我得到了完全相反的結果。我在photoshop中保存了相同的圖像。一個間隔一切，另一個與所有相同的圖像真的壓在一起，並修剪。然而，間隔出來的圖像是大約6kb的小... – endy

這與所使用的壓縮算法有關（並且在將增加歸因於物理圖像變小之前，我懷疑調色板有不同的選項）。我正在討論瀏覽器內存中未壓縮映像的性能問題。 – Quentin

回答