×

移动端页面图片DataURL技术

作者:Terry2017.07.20来源:Web前端之家浏览:15616评论:0
关键词:DataURL

321.png

最近公司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 转图片在线解码编码”就可以了。

总结

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/DataURL.html

网友评论文明上网理性发言 已有0人参与

发表评论: