Data URL和图片(前端细节优化)

Data url

1. 对比传统的图片和data url

首先在html中嵌入图片,我们通常使用<img>标签

用在服务器上的相对路径请求图片

例如:

<img src="img/123.jpg">

但是通过data url,我们可以把123.jpg转换成base64字符串,然后再嵌入到标签中

例如:
在这里插入图片描述

这张图片的base64为

data:image/png;base64,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

你只需要在浏览器中输入这个字符串,就可以访问到图片,也就是说这个字符串已经包含了图片的所有信息,只不过使用字符串的信息表示。

所以在标签中,我们可以这样使用

<img src="这里为base64编码">

大家可以在这里试试:http://tool.chinaz.com/tools/imgtobase/,把图片转base64。

2. data url优缺点

优点:
  • 用于小图片,因为一个图片占用一个HTTP请求不合适
  • 当访问外部资源很麻烦或受限时
  • 当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时。
缺点:
  • Base64编码的数据体积通常是原数据的体积4/3,也就是Data URL形式的图片会比二进制格式的图片体积大1/3
  • Data URL形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

3. 疑问

当第一次看到Data URL的作用和用法时,你也许会很不疑惑,“为什么要麻烦的将图片转换成base64编码字符串,还要嵌入的网页中,将HTML代码弄的混乱不堪,甚至还会有性能上的问题。”

诚然,无法否认缓存在浏览器性能中的重要作用——如何能将Data URL数据也放入浏览器缓存中呢?答案是:通过CSS样式文件,CSS中的url操作符是用来指定网页元素的背景图片的,而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以,我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。

(当我看到这里的时候感觉真的太妙了,完美解决了缓存和html代码混乱问题)

假设我们的页面里有一个很小的div元素,我们想用一种灰色的斜纹图案做它的背景,这种背景在当今的网站设计者中非常流行。传统的方法是制作一个3×3像素的图片,保存成GIF或PNG格式,然后在CSS的background-image属性中引用它的地址。而Data URL则是一种更高效的替代方法,就像下面这样。

css文件

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

html文件

<div class="striped_box lazy ">  
这是一个有条纹的方块  
</div>  

4. 总结

原文作者讲的很透彻,推荐大家去看看2014年的这篇博客:https://www.iteye.com/blog/justcoding-2090964

到了这一步想必在前端钻的应该挺深了,考虑的是各种优化网站,受益匪浅。

猜你喜欢

转载自blog.csdn.net/qq_40733911/article/details/112678293
今日推荐