data:URL方式可以免去向服務器發出HTTP請求,從而提高響應速度。原本的<img src="images/pic.gif">
現在可以變爲如下形式
<img src="data:image/gif;base64, R0lGODlhMwAxAIAAAAAAAPyH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw">
將圖片變爲base64編碼來插入HTML代碼中,從而不必向服務器請求圖片資源。
但這種形式的圖片不會被瀏覽器緩存,因此每次都要下載這樣的HTML頁面。
解決辦法是利用CSS文件,瀏覽器會緩存CSS文件,而data:URL方式適合放入CSS文件中,這樣就可以實現緩存。圖片放入CSS文件中採用背景圖片的方式,如下
background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP......