【轉】合理使用CSS Sprites和內聯圖片

原文：http://blog.csdn.net/wzgdjm/article/details/50789548

在開發前端的過程當中，做爲一個前端工程師，可能不單單是作出一個頁面，而絲絕不考慮頁面的訪問速度也是不現實的，我在作過一些頁面以後，發現有時候性能確實不太理想，以致於本身都看不過去，接下來，我會從個人理解，從一些基本的方面來對前端頁面進行優化，今天先介紹一下圖片給網頁帶來的頁面緩慢解決方法：

0、普通圖片加載：用時101ms

一、CCS Sprites的使用：用時40ms

二、使用內聯圖片：用時45ms

其實我作過屢次測試，按照傳統加載方式加載大概100ms左右，後面兩個差很少都在40ms左右，因此在編碼中採用雪碧圖和內聯圖片相對來講能夠提升網頁的加載效率。

可是這裏要提醒你們注意的一點是，在採用內聯圖片的時候，最好採用引用外部css的方式，這樣效率會有很大的提升。

這裏提供一個將：image 轉 DataUrI的網址：http://tool.c7sky.com/datauri/