图片的 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. codeblock 设置背景颜色

    今天觉得codeblock看着刺眼,想了想,能不能跟vs利用dark背景一样可以设置一个舒服的背景.于是就开始各种点击,各种摸索了. 1. 背景和各种颜色设置 不妨先说下vs中的设置是:工具(Tool ...

  2. 【转】【Android应用开发详解】第01期:第三方授权认证(一)实现第三方授权登录、分享以及获取用户资料

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9057257 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字 ...

  3. HTML的框架,表格

    #2 HTML的框架,表格   [以下是个人笔记,由于水平有限,因此有错误的地方,希望M我.谢谢] 表格|表单|框架---------------表格:布局     ----现在很少用到好处: 适合做 ...

  4. Google Dataflow

    十分钟了解分布式计算:Google Dataflow 介绍 Google Cloud Dataflow是一种构建.管理和优化复杂数据处理流水线的方法,集成了许多内部技术,如用于数据高效并行化处理的Fl ...

  5. Oracle琐碎笔记2

    备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...

  6. SZU:B85 Alec's Eggs

    Description Eggs Alec has a lot of eggs. One day, he want to sort them in a ascending sequence by we ...

  7. Stub和Mock的理解

    我对Stub和Mock的理解 介绍 使用测试驱动开发大半年了,我还是对Stub和Mock的认识比较模糊,没有进行系统整理. 今天查阅了相关资料,觉得写得很不错,所以我试图在博文中对资料进行整理一下,再 ...

  8. (转)最大似然估计&贝叶斯估计

    最大似然估计&贝叶斯估计 与传统计量模型相对的统计方法,存在 1)参数的解释不同:经典估计:待估参数具有确定值它的估计量才是随机的.如果估计量是无偏的,该估计量的期望等于那个确定的参数.bay ...

  9. 如何编写makefile

    一:Makefile介绍: Makefile是为自动化编译而生.我们写好makefile文件后,只需要一个make命令,就可以完成整个项目的编译工作,大大提高了开发效率. 也许刚开始学习编程时,你不会 ...

  10. GeoHash核心解析

    GeoHash核心解析 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐馆,并选了其中 ...