图片的DataURL技术

DataURL基本原理

在网页中我们通常用下面的方式来引用一张图片，这样当我们请求网页的时候，浏览器也会想服务器发起一个请求，去请求这张图片。

<img src='images/test.jpg'>

现在有一种另一种方式：

<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>

这种方式叫做DataURL技术，它是将图片对应的二进制代码，通过base64转换成可以打印的字母数字的形式。

这种方式需要有要求src具有一定的格式：

data:图片类型;base64,base64转换成的数据

图片类型可以为:images/gif,images/jpg,images/png等。

---

DataURL的优缺点

优点：

• 当图片很小时，但是占用一个HTTP请求显得太浪费时，可以用这个技术。
• 当图片是服务器端生成，并且每个用户都不一致的时候，例如验证码，有的网站的头像也可以用这种技术。

缺点：

• base64转换过后的图片会比原来的图片大1/3
• DataURL形式的图片不会被浏览器所缓存。

---

DataURL的使用

可以直接在html中以图片src的形式引用

<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>

可以在CSS样式中以url的形式引用：

background:url("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");

关于base64编码的知识，可以参考阮一峰老师的这篇文章：Base64笔记