我應該使用字體圖標或精靈圖像來獲得更好的性能?什麼將 加載更快,重量輕?我應該使用字體圖標還是精靈圖像?
1
A
回答
2
您使用的字體圖標或精靈圖像時,你有很多的小的獨立的圖像,你基本上他們捆綁成一個圖像,這樣一個請求做是爲了讓所有的圖像。
那些通常被用於小圖標的按鈕,或者在導航欄的圖標,以及類似的東西。有關頂部(粗體,斜體等),例如StackOverflow上的編輯按鈕可能會使用到的字體圖像爲:
試想一下,你不得不加載像10個不同的圖像只是該案件按鈕欄,這將是非常低效的。
另一個例子是emojies。有數以千計的表情符號,想象一下,如果你必須在單獨的請求中加載它們中的每一個。
目前與現代的網站,通常字體圖標比精靈圖像中使用更多。
這也降低了服務器負載。這一切都是出於提高效率的目的,因爲我們有時使用小圖像來表示按鈕而不是文本。
2
有兩個關鍵點,我覺得圖標字體可以有一個優勢:
- 整個文件的大小
- Internet Explorer的支持
當你有一組圖標,你」 d喜歡在給定的項目上使用,圖標集合越大,圖標字體的整體文件佔用空間就越小。
談起演出,最近的一次測試中,我一組約30圖標製作的過程中,圖標字體可以比精靈圖像達到約240%的推動。另外,圖標字體的工作時間可以追溯到IE6。
在另一方面,矢量圖標可以調整大小上下而不失品位,對視網膜顯示額外的銳利。它也可以支持多色圖標。
我建議this後任何進一步的參考。
希望這可以幫助, L.
相關問題
- 1. 社交圖標:精靈還是不精靈?
- 2. 使用AlphaImageLoader應用精靈圖像
- 3. CSS圖像精靈
- 4. CSS圖像精靈
- 5. 我應該使用Dockerfiles還是圖像提交?
- 6. 使用精靈合併兩張圖像
- 7. 在Android上使用圖像精靈
- 8. 使用精靈圖像與setDragImage
- 9. 如何像圖像類一樣使用精靈圖像?
- 10. GWT UiBinder和圖像精靈
- 11. CSS圖像精靈錯誤
- 12. 文本和圖像精靈
- 13. CSS精靈而不是圖像?
- 14. 我應該使用FXG還是位圖圖像來創建自定義外觀?
- 15. 我應該使用字體大小:0的圖像鏈接?
- 16. 試圖創建平鋪的滾動圖標,我應該使用GridView還是GridLayout?
- 17. 我應該使用span標籤還是i標籤作爲圖標?
- 18. css精靈或圖像地圖?
- 19. 使用圖像精靈作爲CSS背景圖像的響應式網格
- 20. 如何使用iText在我的pdf中添加精靈圖像?
- 21. 用於SVG圖像的css精靈
- 22. 用於導航的圖像精靈
- 23. CSS3漸變應該使用背景圖像還是背景?
- 24. 製作精靈圖像播放/暫停圖標突出顯示
- 25. 我可以疊加精靈圖像上的文字嗎?
- 26. 我應該繪製還是加載圖像?
- 27. 如何使來自兩個圖像目標C精靈節點
- 28. 使畫布內的圖像精靈跟隨鼠標
- 29. 如何用圖像數組cocos2d更改精靈圖像?
- 30. 我應該使用HTTP還是FTP從北極上傳圖片?
感謝您寶貴的評論,這是真正有用的。但遺憾的是,現在我無法對您的評論投票,因爲我沒有那麼多的聲譽。 –
@AnupMishra沒關係:) – OverCoder
幹得好。很多細節+一個很好的解釋!我會爲此贊成你。 –