Data URL和图片,及Data URI的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img
标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。
1. Data URL基本原理
图片在网页中的使用方法通常是下面这种利用img
标记的形式:
<img src="data:images/myimage.gif ">
这种方式中,img
标记的src
属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,如果一个 网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
从上面的base64字符串中你看不出任何跟图片相关的东西,但下面,我们将传统的img
写法和现在的Data URL用法左右对比显示,你就能看出它们是完全一样的效果。但实际上它们是不一样的,它们一个是引用了外部资源,一个是使用了Data URL。
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9完全支持。
2. 为什么Data URL是个好东西
Data URL能用在很多场合,跟传统的外部资源引用方式相比,它有如下独到的用处:
- 当访问外部资源很麻烦或受限时
- 当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时。
- 当图片的体积太小,占用一个HTTP会话不是很值得时。
Data URL也有一些不适用的场合
- Base64编码的数据体积通常是原数据的体积4/3,也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
- Data URL形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
然而,Data URL这些不利的地方完全可以避免或转化。本文的重点就是要讨论这个问题。
3. 在CSS里使用Data URL
当第一次看到Data URL的作用和用法时,你也许会很不疑惑,“为什么要麻烦的将图片转换成base64编码字符串,还要嵌入的网页中,将HTML代码弄的混乱不堪,甚至还会有性能上的问题。”
诚然,无法否认缓存在浏览器性能中的重要作用——如何能将Data URL数据也放入浏览器缓存中呢?答案是:通过CSS样式文件。CSS中的url
操作符是用来指定网页元素的背景图片的,而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以,我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。
假设我们的页面里有一个很小的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>
实际输出效果就是下面这样
在这个例子中,Data URL的使用是完全符合场景的。它避免了让这个小小的背景图片独自产生一次HTTP请求,而且,这个小图片还能同CSS文件一起被浏览器缓存起来,重复使 用,不会每次使用时都加载一次。只要这个图片不是很大,而且不是在CSS文件里反复使用,就可以以Data URL方法呈现图片降低页面的加载时间,改善用户的浏览体验。
4. 将图片转换成Data URL格式的方法
用Data URL来展示图片的例子以及它的好处我们说完了,下面我们转入下一个问题,如何将图片转换成Base64编码的字符串。其实网上有很多工具都可以使用,下面列举了几个。其中一个是在线工具,一个Mac OS X桌面应用。
- DataURLMaker在线工具
- DataURLMaker Mac OS X 桌面
Data URL总结
IE6/7是不支持Data URL技术的,不幸的是在中国还有很多用户在使用这种古老的浏览器。希望各方面包括官方和民间都多做努力工作,让现代浏览器(谷歌浏览器,火狐浏览器,IE11+)尽快的占领市场,这是我们Web程序员最大的愿望。
原文:http://www.webhek.com/data-url/
最近Data URI似乎热了起来,特别是从淘宝UED上发了一篇《 Data URI小试 —— 在旺旺点灯(JS)上的应用 》后,陆续出现这方面的文章。看到不少人提到Data URL时都只是提到了优点,我也好奇了一把,借这机会更全面了解了下。
说到Data URI的优点,自然少不了“减少链接数”,把图片转为Base64编码,以减少图片的链接数。我们先想当然一下,同样一张图片,如果不用发起一个下载请求,打开速度是会更快的。但是,有几个问题需要关注下:
- 图片始终是要下载的,那么下载一张图片的速度快还是下载一堆编码快?
- 浏览器对图片的显示,处理效率哪个更快?
- 图片的缓存问题
做了几个Demo,我们来看对比下:
多小图的处理对比: Demo1 DataURI ; Demo2 img
单图处理对比: Demo1 DataURI ; Demo2 img
多刷新几次,可以发现,使用Data URI方式的Demo在渲染时会比不使用 多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍 。由此可见,使用Data URl方式还是需要更多的考量,在可接受的范围内适量使用。
有关Data URI的介绍可以看下《 data URI scheme 》和《 利用 Data URL 加速你的網頁 》,里面提到的IE8以下浏览器不支持的问题,相应的解决方案可以看《 MHTML – when you need data: URIs in IE7 and under 》,当然使用这种方法的代价就是为了兼容IE6\7,使代码量多出一倍;优点是可以被Cache和Gzip压缩。
在 CSS森林 下方使用了另一种兼容IE6\7的方式,有兴趣的同学可以找找。
文章地址:http://www.cssforest.org/blog/index.php?id=152
Data URL和图片,及Data URI的利弊相关推荐
- 使用Data URL将图片嵌入到网页中
早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...
- Data URL和图片(前端细节优化)
Data url 1. 对比传统的图片和data url 首先在html中嵌入图片,我们通常使用<img>标签 用在服务器上的相对路径请求图片 例如: <img src=" ...
- Data URL 图片内联 简介
参考文章:https://www.cnblogs.com/yzhihao/p/6400680.html Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统 ...
- 如何将html转换成url,HTML之Data URL(转)
Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base6 ...
- 编码 data:text/html;c,关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- data:image data url 文件上传
一些场景,比如canvas获取的图片,或者微信开发sdk返回的图片格式是data:img格式的,我们需要上传到服务器上,那就需要进行转化. 1.将dataURL转成Blob // base64 转 b ...
- python:微信支付链接转化成图片(data格式、PNG格式)
微信支付的链接基本格式如下: weixin://wxpay/bizpayurl?pr=szIyqLmzz 拿到链接后,需要把它转成图片二维码,用来手机可扫描. import base64import ...
- 【Data URL】【RE】【bugku】逆向入门writeup
在写wp之前先来了解一下Data URL是什么 Data URL 在浏览器向服务端发送请求来引用资源时,一般浏览器都有同一时间并发请求数不超过4个的限制.所以如果一个网页需要引用大量的服务端资源,就会 ...
- Java将前端Data Url (data:image/jpg;base64,)转为数据流
DATA URL解释 Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用. data:image/jpg; 声明数据协议及类型名称 base64, 编码 ...
最新文章
- xlrd.biffh.XLRDError: Excel xlsx file; not supported解决方法
- 算法---------数组-----------翻转单链表
- 下载CentOS源码、Hyper-V虚拟机联网、拷贝文件到Hyper-V虚拟机中的Linux系统
- Spark On YARN 集群安装部署
- java 多线程的使用_Java的多线程1:线程的使用
- ecshop静态、 ecshop伪静态、ecshop伪静态设置详细方法、ECSHOP静态化方法
- DrawImage内存不足问题
- 信息学奥赛一本通 1108:向量点积计算 | OpenJudge NOI 1.6 09
- html选择树形菜单代码,jquery+css实现html选择树或树形菜单
- Red Hat Cormier发布OpenShift.io和容器状态指数
- 开发笔记1 关于指针,结构体使用指针的问题
- 金融直播三大常用场景一文解析
- CnPack源码模板功能快速添加注释
- HTML5期末大作业:明星个人网站设计——权志龙(10页) 含设计报告HTML+CSS++JavaScript 个人网站模板下载 大学生简单DW个人网页作品代码 个人网页制作 学生个人网页...
- Sql 中text类型字段判断是否为空
- 消灭害虫V1.0 | EliminatePests V1.0
- 批量转换——颜色代码(16进制)与RGB
- lcd显示数字+0x30
- 重保防护 全力以赴丨一文看懂盛邦安全重保专项服务方案
- Git下载代码--git clone命令
热门文章
- 吃糖果(信息学奥赛一本通-T1193)
- 22 FI配置-财务会计-定义收益留存科目(Retained Earning Account)
- C语言 strcpy函数实现
- android view过度动画,为View的切换添加过渡动画
- 合肥注册公司(各区注册地点说明)
- oracle 10g db_file,oracle 10g的db_file_multiblock_read_count参数
- XnSay临时网盘程序v1.0全开源
- JQuery EasyUI-1.5.x-Of-Insdep-Theme后台模板
- Jshop小程序商城,小程序端。后台采用Thinkphp5.1框架开发
- RiPro小八子主题V1.5.5美化版+优惠码折扣+工单系统+任务系统