使用base64:URL的優缺點
個人覺得base64:URL傳輸圖片文件的好處在於:
1.減少了HTTP請求
2.某些文件可以避免跨域的問題
3.沒有圖片更新要重新上傳,還要清理緩存的問題
不足在於:
1.瀏覽器支持
使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支持的(IE9瀏覽器IE7模式下支持,這里被@前端的那點破事鄙視了 )。對於目前PC頁面,兼容性問題使沒有文件上傳以及無需更新緩存的優點不存在了。
2.增加了CSS文件的尺寸
base64編碼圖片本質上是將圖片的二進制大小以一些字母的形式展示,例如一個1024字節的圖片,base64編碼后至少1024個字符,這個大小會被完全嵌入到CSS文件中(不過幸運的是也可以被gzip了,而圖片文件被gzip效果不明顯)。
3.編碼成本
圖片完成后還需要base64編碼,目前估計手工完成的多,因此,增加了一定的工作量,雖然不多。
五、優缺點權衡下的實際應用價值
權衡上面所展示的優缺點,貌似base64:URL圖片沒有什么用武之地啊,實際上非也,有一種情況時有base64編碼作為background-image背景圖片利要遠大於弊的。何種情況呢?
在web頁面制作的時候,由於某些現實原因,我們可以會用到下面這一類圖片:
1.這類圖片不能與其他圖片以CSS Sprite的形式存在,只能獨行
2.這類圖片從誕生之日起,基本上很少被更新
3.這類圖片的實際尺寸很小
4.這類圖片在網站中大規模使用