淺析用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 {
    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/

 聲明:本博客原創文字只代表本人工作中在某一時間內總結的觀點或結論,與本人所在單位沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接。

如果大家感覺我的博文對大家有幫助,請推薦支持一把,給我寫作的動力。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM