在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 的區別  引用和引入的區別