想必大家都知道網頁加載的過程,從開始請求,到加載頁面,開始解析和顯示網頁,遇到圖片就再次向服務器發送請求,加載圖片。如果圖片很多的話,就會產生大量的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="150" height="150"/>
顯示如下圖:
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, 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>
顯示結果如圖:
我們可以看到,上面那么小的一張圖片,轉換成base64字符串后,會變成很長的一串字符串,如果我們將所有的圖片都轉換的話,雖然是網頁打開速度會略有提升,但是代碼會變的臃腫,難以維護。所以,我們可以將一些很小的圖片轉換成base64編碼,嵌入到css文件中,如小的圖標。
作者:雲霏霏
QQ交流群:243633526
博客地址:http://www.cnblogs.com/yunfeifei/
聲明:本博客原創文字只代表本人工作中在某一時間內總結的觀點或結論,與本人所在單位沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接。
如果大家感覺我的博文對大家有幫助,請推薦支持一把,給我寫作的動力。