浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程，从开始请求，到加载页面，开始解析和显示网页，遇到图片就再次向服务器发送请求，加载图片。如果图片很多的话，就会产生大量的http请求，从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起，这样在打开页面的时候只需要一次http请求就可以加载多张图片，然后通过设置图片的背景偏移量来正确的显示。现在我们可以将图片转成base64编码，然后直接写在html页面或者css里面，这样在加载页面或者css的时候就可以直接将图片加载过去，这样也省去了设置图片背景偏移量带来的浏览器兼容性问题。
1、在html中img标签中显示base64编码的图片
下面我们来看一下如何显示一张图片：
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="" height=""/>
显示如下图：
aaarticlea/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" />
2、将base64编码的图片嵌入到css中
在css里面的实现如下：
.main {
width: 600px;
height: 300px;
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}
下面来说一下如何在C#中将图片转化成base64字符串，由于比较简单，这里只写一些主要的实现方法，大家可以自己画界面，做成一个工具。这里我新建一个控制台的项目。编写如下代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO; namespace ConvertImgToBase64
{
class Program
{
static void Main(string[] args)
{
FileInfo file = new FileInfo("1.png");
var stream = file.OpenRead();
byte[] buffer = new byte[file.Length];
//读取图片字节流
stream.Read(buffer, , Convert.ToInt32(file.Length));
//将base64字符串保存到base64.txt文件中
StreamWriter sw = new StreamWriter("base64.txt",false, Encoding.UTF8);
//将字节流转化成base64字符串
sw.Write(Convert.ToBase64String(buffer));
sw.Close();
Console.WriteLine("Convert successful!");
Console.Read();
}
}
}
然后我们打开base64.txt文件，讲里面的代码复制到img标签里面，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Before | After</title>
<meta charset="UTF-8">
</head>
<style>
.main {
width: 200px;
height: 100px;
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}
</style>
<body>
<div class="main"></div>
<img src="data:image/gif;base64,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"
alt="Base64 encoded image" />
</body>
</html>
显示结果如图：
我们可以看到，上面那么小的一张图片，转换成base64字符串后，会变成很长的一串字符串，如果我们将所有的图片都转换的话，虽然是网页打开速度会略有提升，但是代码会变的臃肿，难以维护。所以，我们可以将一些很小的图片转换成base64编码，嵌入到css文件中，如小的图标。
作者：雲霏霏
QQ交流群：243633526
博客地址：http://www.cnblogs.com/yunfeifei/
声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。
如果大家感觉我的博文对大家有帮助，请推荐支持一把，给我写作的动力。
浅析用Base64编码的图片优化网页加载速度的更多相关文章
- Web前端性能优化总结——如何提高网页加载速度
一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...
- 对WEB标准以及W3C的理解与认识 - 提高网页加载速度
在写代码的时候应该注意: 1.标签闭合 2.标签小写 3.不能随意嵌套 提高被搜索引擎搜到几率: mate中的name变量[其中keywords和description尤其重要] Meta name= ...
- Google Fonts导致网页加载速度慢
最近在做商城项目时候发现在加载一个html页面反应非常慢,查看发现是Google Font导致的网页加载速度缓慢,删除掉该样式会发现很多内容出错. 上网百度发现问题在于: 谷歌香港(google.co ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- BASE64编码的图片在网页中的显示问题的解决
BASE64位转码有两种: 一种是图片转为Base64编码,这种编码是直接可以在页面通过<img src='base64编码'/>的方式显示 Base64 在CSS中的使用 .demoIm ...
- 网页加载速度优化2--先加载css，然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- webpack 打包图片 能否提高加载速度
正常加载: 打包图片: 结论:当加载资源 数量很多 时,可以提高加载速度
- 基于Vue的SPA如何优化页面加载速度
常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使 ...
- base64编码的图片在网页中显示
<img @error="changeImgSrc(user)" :src="user.src" width="42" height= ...
随机推荐
- 你不知道的CSS背景—css背景属性全解
CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...
- Jquery便利对象
xhr=[object object] $.each(xhr, function (key, val) { alert(key + '=' + val); ...
- DataGridView控件行标题显示序号
Rectangle rectangle = new Rectangle(e.RowBounds.Location.X, e.RowBounds.Location.Y, dataGridViewX1.R ...
- c语言快速入门1
如果你想快速入门计算机,可以参考我的上一篇帖子,先了解一些必备的软知识,然后再来进行语言的快速入门 计算机入门基础知识 目录 1.1.1 计算机与程序 现代计算机可以自动完成计算任务 程序就是按 ...
- linux 查看端口号
在使用Linux系统的过程中,有时候会遇到端口被占用而导致服务无法启动的情况.比如HTTP使用80端口,但当启动Apache时,却发现此端口正在使用. 这种情况大多数是由于软件冲突.或者默认端口设置不 ...
- 多个jar包合并成一个jar包的办法
步骤: 1.将多个JAR包使用压缩软件打开,并将全包名的类拷贝到一个临时目录地下. 2.cmd命令到该临时目录下,此时会有很多.class文件,其中需要带完整包路径 3.执行 jar -cvfM te ...
- 【虚拟机】在VMware中安装Server2008之后配置网络连接的几种方式
VMware虚拟机的网络连接方式分为三种:桥接模式.NAT模式.仅主机(Host Only) (1)桥接模式 桥接模式即在虚拟机中虚拟一块网卡,这样主机和虚拟机在一个网段中就被看作是两个独立的IP地址 ...
- c#比较两个List相等
1.if(ListA.Count == ListB.Count && ListA.Count(t => !ListB.Contains(c)) == 0) 数量相等,元素值相等即 ...
- T-SQL Recipes之Customized Database Objects
The Problem 创建灵活自定义对象决非是一个简单的任务.比如HR想看每种工作职称在所有年限里面的入职累计情况 The Solution 我们一步一步来拆解吧: 获取入职年限的集合,如1999, ...
- The method setPositiveButton(int, DialogInterface.OnClickListener) in the type AlertDialog.Builder is not applicable for the arguments
The method setPositiveButton(int, DialogInterface.OnClickListener) in the type AlertDialog.Builder i ...