前端性能優化--圖片處理（Css Sprites 與 base64）

時間 2019-11-09

標籤前端性能優化圖片處理 css sprites base64 base 欄目系統性能简体版

原文原文鏈接

前言：

近期研究着前端性能的優化方面的知識，並以博客記之。以前有相同系列的文章（前端性能優化--圖片懶加載(lazyload image)），此次繼續是關於圖片的處理，css sprites 和 base64 格式圖片，這兩種處理都是經過減小了http的請求來達到前端性能優化的效果，請求減小，與服務器鏈接次數減小，加載頁面的時間就快了，如是甚好。css

Css Sprites：

介紹：

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

原理：

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

優勢：

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

缺點：

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

應用例子：

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

html代碼：webpack

<!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代碼：web

.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;
}