zoukankan      html  css  js  c++  java
  • 浅析用Base64编码的图片优化网页加载速度

       想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片。如果图片很多的话,就会产生大量的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 {
         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 {
         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/

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

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

  • 相关阅读:
    微软面试问题 情商测试
    SQL游标使用实例
    如何减小与“大牛”的差距
    Dotnet面试题
    排序算法对冒泡排序的优化改进算法
    一个SQL实现薪水大于所在部门平均薪水的员工
    ASP.NET中TextBox设置为Readonly后无法取值的解决办法
    jQuery.Autocomplete实现自动完成功能(详解)
    php发送get、post请求的几种方法
    ISO Latin1字符集
  • 原文地址:https://www.cnblogs.com/yunfeifei/p/4165351.html
Copyright © 2011-2022 走看看