×

移动端页面图片DataURL技术

作者:admin2017.07.20来源:Web前端之家浏览:3423评论: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 转图片在线解码编码”就可以了。

总结

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/DataURL.html

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

发表评论:

最新留言

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero