浅析用Base64编码的图片优化网页加载速度

简介:   想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片。如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起,这样在打开页面的时候只需要一次http请求就可以加载多张图片,然后通过设置图片的背景偏移量来正确的显示。

   想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片。如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起,这样在打开页面的时候只需要一次http请求就可以加载多张图片,然后通过设置图片的背景偏移量来正确的显示。现在我们可以将图片转成base64编码,然后直接写在html页面或者css里面,这样在加载页面或者css的时候就可以直接将图片加载过去,这样也省去了设置图片背景偏移量带来的浏览器兼容性问题。

 

 一、在网页中显示base64编码的图片

1、在html中img标签中显示base64编码的图片 

 下面我们来看一下如何显示一张图片:

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////  
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML  
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="  
alt="Base64 encoded image" width="150" height="150"/> 

 显示如下图:

Base64 encoded image

2、将base64编码的图片嵌入到css中

在css里面的实现如下:

.main {
    width: 600px;
    height: 300px;
    background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}

 二、将图片转化为base64字符串

   下面来说一下如何在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, 0, 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>
View Code

显示结果如图:

 小结

   我们可以看到,上面那么小的一张图片,转换成base64字符串后,会变成很长的一串字符串,如果我们将所有的图片都转换的话,虽然是网页打开速度会略有提升,但是代码会变的臃肿,难以维护。所以,我们可以将一些很小的图片转换成base64编码,嵌入到css文件中,如小的图标。

 

 作者:雲霏霏

QQ交流群:243633526

 博客地址:http://www.cnblogs.com/yunfeifei/

 声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

如果大家感觉我的博文对大家有帮助,请推荐支持一把,给我写作的动力。

目录
相关文章
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
16013 1
|
3月前
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
178 0
|
4月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
6月前
|
缓存 前端开发 JavaScript
如何优化网页加载速度?
【5月更文挑战第8天】如何优化网页加载速度?
69 2
|
6月前
|
存储 缓存 前端开发
提高网页加载速度可以从以下几个方面进行优化
【4月更文挑战第25天】提高网页加载速度可以从以下几个方面进行优化
46 5
|
6月前
|
JavaScript 前端开发
基于html+javascript开发的base64解码工具
base64在线解码工具可以帮助你将Base64编码的字符串解码为原始的文本或数据。
52 0
|
缓存 前端开发 算法
如何优化网页加载速度
在今天互联网高速发展的时代,快速加载网页成为了用户体验的重要因素之一。如果一个网页加载速度过慢,不仅会让用户感到烦躁,还可能导致用户流失和降低搜索引擎排名。因此,优化网页加载速度变得至关重要。
120 0
|
编解码 JavaScript 安全
我把文件重新编码后,加载速度提升300%!(下)
我把文件重新编码后,加载速度提升300%!
105 0
我把文件重新编码后,加载速度提升300%!(下)
|
前端开发 Java
将图片的base64编码直接嵌入到html文件的css中
将图片的base64编码直接嵌入到html文件的css中
505 0
|
编解码 JSON 缓存
我把文件重新编码后,加载速度提升300%!(上)
我把文件重新编码后,加载速度提升300%!
101 0