數據URI或sprites的替代方案？

我在這裏有一個catch 22的情況。我的意圖是保存HTTP請求，這會隨着請求數量的增加自然減慢頁面加載速度。我的第一個解決方案是去找精靈。但是，我無法正確縮放相對單位的精靈，因爲它導致一個圖像的一部分出現在另一個圖像上。然後我查看了數據URI。這看起來非常有前途，直到我看到不同的瀏覽器具有（非常）不同的大小限制，其範圍可能從幾KB到幾MB。數據URI或sprites的替代方案？

目前，我被困在這種情況下，我不能選擇任何東西，只能去舊的<img src="image.png">方法。

所以問題1：是否有替代精靈和URI的方式可以實現類似的目標，即減少請求和加快加載時間？

問題2：由於最大URI大小不同，有沒有一些地方我可以找出哪些瀏覽器支持什麼尺寸？就我個人而言，我不在乎任何瀏覽器已經過時了，無法使用CSS3和HTML5，所以如果有人對此有所瞭解，這將是一個更大的幫助。

來源

2014-02-21 Hiigaran

可能[用相對單位縮放圖像精靈]的副本（http://stackoverflow.com/questions/21865122/scaling-an-image-sprite-with-relative-units） – cimmanon

您可以使用CSS3 @font-face規則來定義你的圖標集，你只需要創建自己的字體，你可以使用http://icomoon.io/爲準備一套圖標，如果你想自己再創建圖像的向量（SVG）使用Illustrator或者您擅長的工具，並導入到icomoon創建您自己的字體並保存服務器請求。

注意：需要添加各種字體的缺乏瀏覽器支持瀏覽器選秀權支持的字體

CSS嵌入創建的字體（如TTF WOFF，SVG。）：

@font-face 
{ 
font-family: myFirstFont; 
src: url(sansation_light.woff);/*need to add multiple*/ 
}

來源

2014-02-21 16:16:10 Harish

數據URI或sprites的替代方案？

回答

相關問題