精靈圖（雪碧圖）和base64如何選擇

時間 2019-11-30

標籤精靈雪碧 base64 base 如何選擇简体版

原文原文鏈接

Css Sprites：

介紹：

Css Sprites（雪碧圖或css精靈），是網頁圖片處理的一種方式，它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。javascript

原理：

將許多的小圖片整合到一張大圖片中，利用css中的background-image屬性，background-position屬性定位某個圖片位置，來達到在大圖片中引用某個部位的小圖片的效果。css

優勢：

減小網頁的http請求，提高網頁加載速度。
合併多張小圖片成大圖，能減小字節總數（大圖大小<=多張小圖大小）.

缺點：

前期須要處理圖片將小圖合併，多些許工程量。
對於須要常常改變的圖片維護起來麻煩。

應用例子：

生成雪碧圖：我這裏使用了網頁雪碧圖製做專家，固然還有不少其餘的工具
合成的圖片如圖所示：
html代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代碼：html

```
.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
```
適用場景：
- 對於一些不須要多變更的小圖片，表情，標誌等等均可以使用。
- 通常都是應用於小圖片，太大的圖片不利於合併，且定位麻煩，一次的加載時間長，致使所有圖片出現時間延遲，效果不友好。
  
  base64：
  
  介紹：
  
  base64是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一，要求把每三個8Bit的字節轉換爲四個6Bit的字節，Base64是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一。java
  
  通俗點講：將資源本來二進制形式轉成以64個字符基本單位，所組成的一串字符串。
  好比一張圖片轉成base64編碼後就像這樣，圖片直接以base64形式嵌入文件中（很長沒截完）webpack
- 生成base64編碼：
  
  圖片生成base64能夠用一些工具，如在線工具，但在項目中這樣一個圖片這樣生成是挺繁瑣。
  特別說下，webpack中的url-loader能夠完成這個工做，能夠對限制大小的圖片進行base64的轉換，很是方便。web
  
  優勢：
  - base64的圖片會隨着html或者css一塊兒下載到瀏覽器,減小了請求.
  - 可避免跨域問題
  缺點：
  - 老東西（低版本）的IE瀏覽器不兼容。
  - 體積會比原來的圖片大一點。
  - css中過多使用base64圖片會使得css過大，不利於css的加載。
  適用場景：