我已經閱讀了很多關於在css中使用精靈圖標和徽標的好處,但這似乎主要用於無損格式,如gif和png。我想知道如果jpegs和圖像的好處還在嗎?我想從許多可能以不同順序顯示的較小圖片構建標題。將它們組合成單個jpg還是會有正常使用sprite的速度優勢嗎?css中的圖片精靈
1
A
回答
1
你可以收穫同樣的福利減少的往返等方面,但是:
壓縮的水平是可能遭受; JPEG被調整爲縮小單張圖像的尺寸,並且在突然轉換時效果不佳(如在拼貼中,您的元圖像基本上是這樣)
出於同樣的原因,可能您的精靈的邊緣圖像將不如現在那麼尖銳,因爲它們與相鄰的圖像數據一起被損失壓縮(並且稍微組合)。
2
這可能取決於這些jpeg有多大。通常組合圖像以減少http回調到服務器。如果他們體型小,然後將它們結合起來,如果不是,則將它們分開並調用您需要的哪一個。
2
對於多個圖像使用精靈的主要好處是它提供了少量的頭部信息被髮送。因此,在精靈內部放大的圖片對整個項目的整體影響較小,但會有小幅增加,但使用精靈可以降低系統的適應性。如果圖片將在任何時候改變,我會將它保留在精靈之外。
相關問題
- 1. CSS - 圖片精靈過度使用
- 2. CSS圖像精靈
- 3. CSS圖像精靈
- 4. CSS圖像精靈錯誤
- 5. 內聯樣式中的圖片精靈?
- 6. IE6中的css精靈
- 7. 在pixi v3中加載精靈圖片
- 8. 語法幫助 - 背景圖片精靈的CSS
- 9. 精靈動畫片
- 10. Css,精靈動畫
- 11. css精靈或圖像地圖?
- 12. 用於SVG圖像的css精靈
- 13. 如何動畫所有精靈圖片?
- 14. CSS精靈而不是圖像?
- 15. CSS - 精靈作爲背景圖像
- 16. 爲動態圖像生成CSS精靈
- 17. 從PIXI.JS中的精靈圖片加載圖像時,精靈圖紙的順序或數量是否重要?
- 18. 什麼是CSS中的精靈技術
- 19. CSS精靈和漸變
- 20. CSS精靈 - 多次調用
- 21. CSS精靈,指定類名
- 22. 如何使用精靈CSS
- 23. CSS精靈背景大小
- 24. CSS精靈如何工作?
- 25. 問題實現CSS精靈
- 26. css動畫精靈表
- 27. imagefilter創建CSS精靈
- 28. -webkit-border-image與css精靈
- 29. CSS精靈位置問題
- 30. CSS精靈混淆了iPhone
我想這導致了一個明顯的問題...有沒有更好的格式呢?我認爲,因爲PNG是無損的,它會是一個更大的文件大小?或者,也許我的想法註定要失敗? – Jamie 2013-04-26 18:22:38
在大多數情況下,是的,PNG會更大。使用單獨的JPEG和混合訂單服務器或客戶端是我可能會去的方式。 – 2013-04-26 18:26:53