在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 的区别  引用和引入的区别

 

posted @ 2017-06-08 11:06  wupanpan  阅读(9966)  评论(0)  编辑  收藏  举报