移动端页面图片DataURL技术 - Web前端

最近公司APP终端需要内嵌WEB端的一些活动页面，后续有测试人员反应打开速度比较慢，体验比较差，经分析后，主要一方面是图片有点多。

众所周知，图片的优化处理，是WEB性能优化的一部分；对于PNG格式的可以使用雪碧图，JPG的可以适当的优化，当然还有DataURL技术，这个就是我们要分享的内容。

了解dataurl

说到DataURL技术，简单的说就是图片另外一种显示方法而已。举个例子来说：

<img src="images/xxx.jpg">
.CSS{background:url(xxx.png)}

这个是常用的图片应用格式。这种方式中，src&background属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与html成为一体，它的形式如下：

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

background-image:url(data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yh5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==)

从上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的图片写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果，但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL，而后者减少了图片的请求。

DataURL兼容性

几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。ie8也支持，但有部分限制，ie9完全支持。

DataURL的优缺点

在本次项目的优化中，我发现并不是所有的图片都能用DataURL技术的，有时候你用它会起到反作用，这个不是我们想看到的结果。比如我们有张50K的PNG图，经过DataURL处理后，发现现在css的文件大小比原有的CSS要大了80K，这时候你可以放弃治疗了，果断放弃它，保持原来的png。当然这里想提醒下大家，如果要用DataURL技术，尽量要把图片压缩到最小，这样占用内存会小很多。关于图片压缩先前分享一篇文章“【分享】现在流行的图片压缩实用工具”。那我们如何正确使用DataURL技术呢。

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

最后补充下，如何将图片转化成base64字符串格式，大家可以百度下关键词“base64 转图片在线解码编码”就可以了。

总结

金无足赤，人无完人。没有一项技术是完美的，我们使用它时尽量发挥它的长处。

标签：页面图片技术WebDataURL