[前端性能提升]--图片转化为base64
图片的 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的更多相关文章
- 前端性能优化--图片处理(Css Sprites 与 base64)
前言: 近期研究着前端性能的优化方面的知识,并以博客记之.之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 ba ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- 远程图片转化为base64
远程图片转化为base64 <?php /* * * 第一种方法 * 远程图片转化为base64,只支持http(推荐使用) * */ public static function imgUrl ...
- 怎么才能将文件流或者图片转化为base64,传到前台展示
图片转化为base64,传到前台展示 public String getBase64(){ String imgStr = ""; try { File file = new Fi ...
- 将图片转化为base64编码字符串
pom依赖 <dependency> <groupId>org.ops4j.base</groupId> <artifactId>ops4j-base- ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...
- 图片处理之 Base64
网页上的图片资源如果采用 http 形式的 url 的话都会额外发送一次请求,网页发送的 http 请求次数越多,会造成页面加载速度越慢.而采用Base64格式的编码,将图片转化为字符串后,图片文件会 ...
随机推荐
- ssis的script task作业失败(调用外部dll)
原文 ssis的script task作业失败 我的ssis作业包里用了一个script task,会查询一个http的页面接口,获取json数据后解析然后做后续处理,其中解析json引用了本地目录下 ...
- 手机网站keyup解决方案
模糊搜索keyup无效,解决方案如下 //手机网站解决keyup的方法 $(function () { $('#repairsearch').bind('focus', filter_time); } ...
- Effective C++(14) 在资源管理类中小心copying行为
问题聚焦: 上一条款所告诉我们的智能指针,只适合与在堆中的资源,而并非所有资源都是在堆中的. 这时候,我们可能需要建立自己的资源管理类,那么建立自己的资源管理类时,需要注意什么呢?. ...
- web代理进行跨域访问
通过web代理进行跨域访问,http请求返回超时的问题定位 [现象] 在ajax通过web代理跨域访问时,http第一次登陆时正常,但是第二次再下发其他命令的时候总是返回 java.net.Soc ...
- [Usaco2007 Jan]Running贝茜的晨练计划[一般DP]
Description 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运动方式是每天进行N(1 <= N <= 10,000)分钟的晨跑.在每分钟的开始,贝茜会选择下一 ...
- Competitive
- .Net 异步随手记(一)
今天要记录的内容摘要是: 什么时候异步代码能“等”在那里,什么时候不会“等” 这两天Coding的时候碰到一个事儿,就是想让异步等在那里结果却直接执行过去了,比如这样: async static vo ...
- Linux Tweak:交换 Caps_Lock 与 Control_R
很少使用的Caps_Lok键占据着键盘的黄金位置,不仅如此,它还经常被按错. 于是受到程序员神器HHKB启发(如图) 对于我,Linux程序员 + vimer来说: ESC取代`键,极大的方便了VIM ...
- mvc+linq+EF对数据表的查删改
/// <summary> /// 查询数据库中学生姓名 /// </summary> /// <returns></returns> public A ...
- IOS基础开发二(iphone计算器)
今天做了个iphone的小例子计算器:才用mvc设计模式 项目目录: 代码如下: CalculatorViewController:(MVC的控制器) // CalculatorViewControl ...