2013-04-25 88 views
1

我已經閱讀了很多關於在css中使用精靈圖標和徽標的好處,但這似乎主要用於無損格式,如gif和png。我想知道如果jpegs和圖像的好處還在嗎?我想從許多可能以不同順序顯示的較小圖片構建標題。將它們組合成單個jpg還是會有正常使用sprite的速度優勢嗎?css中的圖片精靈

回答

1

你可以收穫同樣的福利減少的往返等方面,但是:

  1. 壓縮的水平是可能遭受; JPEG被調整爲縮小單張圖像的尺寸,並且在突然轉換時效果不佳(如在拼貼中,您的元圖像基本上是這樣)

  2. 出於同樣的原因,可能您的精靈的邊緣圖像將不如現在那麼尖銳,因爲它們與相鄰的圖像數據一起被損失壓縮(並且稍微組合)。

+0

我想這導致了一個明顯的問題...有沒有更好的格式呢?我認爲,因爲PNG是無損的,它會是一個更大的文件大小?或者,也許我的想法註定要失敗? – Jamie 2013-04-26 18:22:38

+1

在大多數情況下,是的,PNG會更大。使用單獨的JPEG和混合訂單服務器或客戶端是我可能會去的方式。 – 2013-04-26 18:26:53

2

這可能取決於這些jpeg有多大。通常組合圖像以減少http回調到服務器。如果他們體型小,然後將它們結合起來,如果不是,則將它們分開並調用您需要的哪一個。

2

對於多個圖像使用精靈的主要好處是它提供了少量的頭部信息被髮送。因此,在精靈內部放大的圖片對整個項目的整體影響較小,但會有小幅增加,但使用精靈可以降低系統的適應性。如果圖片將在任何時候改變,我會將它保留在精靈之外。