在html 使用img 和 在css中使用 background 的區別（Data URL和圖片的區別）

為什么今天想起來總結一下這個呢，只因為在看webpack的時候 出現一下這句話：

“我們可以配置url-loader來將小於1024字節的圖片使用DataUrl替換而大於1024字節的圖片使用url”

我就想為什么 webpack 要這樣設置？於是就搜到了一下這個好鏈接

http://justcoding.iteye.com/blog/2090964

<img src="images/myimage.gif ">

<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///  
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX  
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd  
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn  
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF  
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">  

以上的代碼，總結一下知識：

1. Data URL 和 圖片的區別

　　（1）引用   src="images/myimage.gif " 是引用外部資源，會占用一個http會話

　　　　　這就解釋為什么 webpack 配置url-loader來將小於1024字節的圖片使用DataUrl替換， 因為圖片過小，占用http會話得不償失。

　　（2）大小  Data URL 的體積比 圖片大， 所以圖片太大，對體積也有限制  就不時候使用Data URL

　　（3）緩存  img src="Data URL" 不會緩存 圖片

2. 如何解決Data URL 的緩存問題　　

　　在CSS里使用Data URL

　　

.striped_box  
  {  
  width: 100px;  
  height: 100px;  
  background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");  
  border: 1px solid gray;  
  padding: 10px;  
  }  

於是就想到一下這個問題

3. html img 和 css  background-image 的區別

加載 html img 先加載   css 后加載  所以重要的用 html img ,比如 logo

“如果你用引入了一個很大的圖片，那么在這個圖片下載完成之前，img后的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容加載完成之后，才開始加載背景圖片，不會影響你瀏覽網頁內容。”

http://www.cnblogs.com/shytong/p/5127788.html

對於自適應什么的我就不說了

4 href  和 src 的區別  引用和引入的區別