图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址

意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性)。

图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,base64可以随着 HTML 的下载同时下载到本地.减少https请求。

1
2
3
4
//在css里的写法
#fkbx-spch, #fkbx-hspch {
  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}
1
2
//在html代码img标签里的写法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

什么样的图片可以转为成base64编码:

如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新

更便捷的将图片转化为Base64编码  

将图片转化为 base64 编码有许多工具,例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ,

方法2;

在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码,是不是很方便。

[前端性能提升]--图片转化为base64的更多相关文章

  1. 前端性能优化--图片处理(Css Sprites 与 base64)

    前言: 近期研究着前端性能的优化方面的知识,并以博客记之.之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 ba ...

  2. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  3. 远程图片转化为base64

    远程图片转化为base64 <?php /* * * 第一种方法 * 远程图片转化为base64,只支持http(推荐使用) * */ public static function imgUrl ...

  4. 怎么才能将文件流或者图片转化为base64,传到前台展示

    图片转化为base64,传到前台展示 public String getBase64(){ String imgStr = ""; try { File file = new Fi ...

  5. 将图片转化为base64编码字符串

    pom依赖 <dependency> <groupId>org.ops4j.base</groupId> <artifactId>ops4j-base- ...

  6. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  7. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  9. 图片处理之 Base64

    网页上的图片资源如果采用 http 形式的 url 的话都会额外发送一次请求,网页发送的 http 请求次数越多,会造成页面加载速度越慢.而采用Base64格式的编码,将图片转化为字符串后,图片文件会 ...

随机推荐

  1. ssis的script task作业失败(调用外部dll)

    原文 ssis的script task作业失败 我的ssis作业包里用了一个script task,会查询一个http的页面接口,获取json数据后解析然后做后续处理,其中解析json引用了本地目录下 ...

  2. 手机网站keyup解决方案

    模糊搜索keyup无效,解决方案如下 //手机网站解决keyup的方法 $(function () { $('#repairsearch').bind('focus', filter_time); } ...

  3. Effective C++(14) 在资源管理类中小心copying行为

    问题聚焦:     上一条款所告诉我们的智能指针,只适合与在堆中的资源,而并非所有资源都是在堆中的.     这时候,我们可能需要建立自己的资源管理类,那么建立自己的资源管理类时,需要注意什么呢?. ...

  4. web代理进行跨域访问

    通过web代理进行跨域访问,http请求返回超时的问题定位   [现象] 在ajax通过web代理跨域访问时,http第一次登陆时正常,但是第二次再下发其他命令的时候总是返回 java.net.Soc ...

  5. [Usaco2007 Jan]Running贝茜的晨练计划[一般DP]

    Description 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运动方式是每天进行N(1 <= N <= 10,000)分钟的晨跑.在每分钟的开始,贝茜会选择下一 ...

  6. Competitive

  7. .Net 异步随手记(一)

    今天要记录的内容摘要是: 什么时候异步代码能“等”在那里,什么时候不会“等” 这两天Coding的时候碰到一个事儿,就是想让异步等在那里结果却直接执行过去了,比如这样: async static vo ...

  8. Linux Tweak:交换 Caps_Lock 与 Control_R

    很少使用的Caps_Lok键占据着键盘的黄金位置,不仅如此,它还经常被按错. 于是受到程序员神器HHKB启发(如图) 对于我,Linux程序员 + vimer来说: ESC取代`键,极大的方便了VIM ...

  9. mvc+linq+EF对数据表的查删改

    /// <summary> /// 查询数据库中学生姓名 /// </summary> /// <returns></returns> public A ...

  10. IOS基础开发二(iphone计算器)

    今天做了个iphone的小例子计算器:才用mvc设计模式 项目目录: 代码如下: CalculatorViewController:(MVC的控制器) // CalculatorViewControl ...