如何優化網站背景圖片

一、選擇合適的圖片格式

在選擇背景圖片時，要考慮圖片的格式。不同的格式適用於不同的場景。JPEG格式適用於照片和藝術圖片等複雜場景，PNG格式適用於透明的圖形和文本，GIF格式適用於帶有動畫的圖片，WebP格式適用於頁面顯示速度較慢的情況下。在不同的情況下，正確地選擇圖片格式可以提高頁面載入速度。

  <style>
    body {
      background-image: url('background.png');
    }
  </style>

二、壓縮背景圖片

壓縮背景圖片可以減小其文件大小，從而降低頁面載入時間。常用的圖片壓縮工具有Photoshop、TinyPNG等。除此之外，還有一些在線的圖片壓縮網站，比如compressor.io、squoosh.app等。

  <style>
    body {
      background-image: url('background.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
  </style>

三、使用Base64編碼的背景圖片

將背景圖片使用Base64編碼成字元串，並直接在CSS文件中引用，可以減少HTTP請求次數，提高頁面載入速度。但是，將圖片轉換為Base64編碼會增加文件大小，所以在選擇是否使用Base64編碼時，要綜合考慮文件大小和HTTP請求次數。

  <style>
    body {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAMElEQVR42mP8zwAjqgGjAyFBgBRQNGoApqvM06X3AAAAAElFTkSuQmCC);
      background-repeat: no-repeat;
      background-position: center;
    }
  </style>

四、使用緩存

使用緩存可以減少HTTP請求次數，提高頁面載入速度。如果背景圖片不經常更改，可以設置緩存時間為較長時間。在伺服器端，可以使用ETag或者Last-Modified頭信息來判斷圖片是否有變更。

  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/png "access 1 month"
    ExpiresByType image/jpeg "access 1 month"
  </IfModule>

五、使用CSS Sprites

CSS Sprites是將多張小圖片合併成一張大圖片，通過CSS來顯示小圖片的一部分，從而減少HTTP請求次數。使用CSS Sprites可以大大提高頁面載入速度，特別是對於背景圖片比較多的網站。

  <style>
    #icon1 {
      background-image: url('sprite.png');
      background-position: -50px -30px;
    }
    #icon2 {
      background-image: url('sprite.png');
      background-position: -80px -10px;
    }
  </style>
  <div id="icon1"></div>
  <div id="icon2"></div>

六、使用LazyLoad

LazyLoad是一種延遲載入圖片的技術，可以在用戶需要查看圖片時再去載入它，從而減少頁面對圖片的請求。這種技術特別適用於背景圖片比較大的網站，可以大大減少頁面載入時間。

  <script src="jquery.min.js"></script>
  <script src="jquery.lazyload.min.js"></script>
  <script>
    $(function() {
      $("img.lazy").lazyload();
    });
  </script>
  <img class="lazy" data-original="img.jpg" src="blank.gif">

七、結論

通過選擇合適的圖片格式、壓縮背景圖片、使用Base64編碼的背景圖片、使用緩存、使用CSS Sprites和使用LazyLoad等方式，可以優化網站的背景圖片，提高頁面載入速度。