前端base64適用場景

轉自：https://blog.csdn.net/lishuai_it_trip/article/details/106191890

　　

base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一，要求把每三個8Bit的字節轉換為四個6Bit的字節，Base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一。

使用base64來顯示圖片的優點顯而易見：

    比如可以減少頁面http請求次數，減輕服務器壓力，

    還可以避免跨域問題等。

 

但是base64不是適用於所有的圖片，只是在圖片較小的時候適用。

    IE7及以下瀏覽器不支持data url

    圖片太大編碼字節過長，字節占用的空間會超過圖片，反而會得不償失，一般適用於小於3k的圖片

    如果把大圖片編碼到 html / css 中，會造成頁面體積顯著增加，明顯影響網頁的打開速度。

　　　　　　　　　　　　　　

圖片文件在頁面中可以用base64編碼來展示。比如這樣：

 div {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAfCAMAAABEdrQOAAAAk1BMVEUAAABawfGL0qGl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23BawfGl23BawfGl23Cl23Cl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfGl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfGl23Cl23BawfEmviwqAAAAL3RSTlMApQSI7+YQCfv22syrmot4aWdVRBr27+bbzry7rZx5Rjc1NCknHBIKvr13ZlhXJtsYcd0AAADdSURBVDjLpdTZDoIwEAVQZRFXxBVEUBBx1/b/v86aCZnWZlqJ922S80DuTOm0TBg5ypyWJt3lyUOeGRsfTZrzzV7WrD9Z0vqTS4FaZOD2KA3JKtQi3jSgNCSvUYv4M8ek+So8CY0ZzikNWe/OTM5oQWlIzNSkpUnzL63Wb9dYv1039bfQWL9dY/12jXFb6O3B+CXammxaPwG79u/Oz317t4De5ZXYi6bhyWk7p3TyFLN8Ty/6vmP4VagF67p5BzBLBRMa3hgEC6Z0XuPcHBCls0qe4TipRIU6Y8H/5g0WkX6Q7rsdrwAAAABJRU5ErkJggg==);
        }

 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAfCAMAAABEdrQOAAAAk1BMVEUAAABawfGL0qGl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23BawfGl23BawfGl23Cl23Cl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfGl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfGl23Cl23BawfEmviwqAAAAL3RSTlMApQSI7+YQCfv22syrmot4aWdVRBr27+bbzry7rZx5Rjc1NCknHBIKvr13ZlhXJtsYcd0AAADdSURBVDjLpdTZDoIwEAVQZRFXxBVEUBBx1/b/v86aCZnWZlqJ922S80DuTOm0TBg5ypyWJt3lyUOeGRsfTZrzzV7WrD9Z0vqTS4FaZOD2KA3JKtQi3jSgNCSvUYv4M8ek+So8CY0ZzikNWe/OTM5oQWlIzNSkpUnzL63Wb9dYv1039bfQWL9dY/12jXFb6O3B+CXammxaPwG79u/Oz317t4De5ZXYi6bhyWk7p3TyFLN8Ty/6vmP4VagF67p5BzBLBRMa3hgEC6Z0XuPcHBCls0qe4TipRIU6Y8H/5g0WkX6Q7rsdrwAAAABJRU5ErkJggg==" alt="">