網頁圖像優化

2.1 選擇正確的圖像格式

網頁圖像優化是個重要的過程，目的是在不大幅降低質量的前提下減少圖像文件大小。圖像優化可以加速網頁加載速度，提升用戶體驗，也有助於提高網站在搜索引擎的排名。

在移動互聯網時代，這個過程尤為重要，因為加載速度是關鍵因素。

選擇正確的圖像格式

選擇正確的圖像格式是有效優化的第一步。每種格式都有其優勢和應用場景：

JPEG

• 應用：照片和包含多種顏色的圖像
• 優勢：高損失壓縮，可顯著減小文件大小
• 缺點：重複保存時質量會下降

PNG

• 應用：具透明度的圖像和具有明確線條的圖形、文字
• 優勢：無損壓縮，保持高質量圖像
• 缺點：文件大小比JPEG大

GIF

• 應用：動畫和有限色彩的圖像（最多256色）
• 優勢：支持動畫和透明度
• 缺點：色彩範圍有限

WebP

• 應用: 現代格式適用於各類型圖像
• 優勢：支持有損和無損壓縮、動畫和透明度。高壓縮率
• 缺點：不是所有瀏覽器都支持（雖然支持情況在改善中）

SVG

• 應用：矢量圖像、標誌和圖標
• 優勢：可縮放不失真，小文件大小
• 缺點：僅適用於矢量圖形

2.2 圖像壓縮

圖像壓縮是優化過程中的一個重要步驟。它能減小文件大小，同時保持可接受的圖像質量。

有損壓縮

這種方法刪除部分圖像數據，從而減少文件大小，帶來微小的質量損失。適用於JPEG和WebP。

工具示例：

• TinyPNG/TinyJPG: 在線工具，壓縮PNG和JPEG圖像，同時保持高質量
• ImageOptim: macOS應用程序，壓縮圖像而不顯著降低質量
• Squoosh: Google的工具，支持各種格式和壓縮方法

無損壓縮

這種方法減少文件大小但不刪除數據，保留圖像原始質量。適用於PNG和WebP。

工具示例：

• PNGGauntlet: 提供免費Windows工具，利用多種壓縮方法來減少PNG圖像大小而無損失
• OptiPNG: 命令行工具，用於優化PNG文件，刪除多餘數據

2.3 改變圖像尺寸

在將圖像加載到網站前先調整到所需尺寸有助於減小其大小，並加快頁面加載速度。這對於響應式網頁設計特別重要。

調整尺寸的工具：

• Adobe Photoshop: 功能強大的圖像編輯器，允許調整尺寸並保存帶有最佳網頁設置的圖像
• GIMP: 免費的圖像編輯器，具備調整尺寸和豐富的編輯功能
• Online Image Resizer: 在線工具，無需安裝其他軟件即可更改圖像尺寸

在HTML中使用寬度和高度屬性

在<img>標籤中指定width和height屬性，可以讓瀏覽器在加載圖像前保留空間，防止頁面加載時內容“跳動”。這提升了用戶的便利性，避免布局偏移。

示例：

    
      <img src="images/photo.jpg" alt="自然照片" width="800" height="600">
    
  

此代碼確保了瀏覽器為圖像預留空間，防止內容移位。

2.4 實用建議

Lazy Loading

Lazy Loading（懶加載）允許在圖像進入可見區域後再進行加載。這可以減少初始頁面加載時間，也能節省流量。

示例：

    
      <img src="example.jpg" alt="圖像描述" loading="lazy">
    
  

loading="lazy"屬性告訴瀏覽器僅在圖像可見時進行加載。

圖像快取

為圖像設置伺服器快取可讓重複使用的圖像從瀏覽器快取加載，從而加快頁面重新加載速度。

我們將在第二單元更詳細地討論快取，屆時你會更深入地學習HTTP協議和Web伺服器設置。

網頁圖像優化是個綜合性過程，包括選擇正確的格式、壓縮、改變尺寸、在HTML中使用屬性，以及實施最佳實踐來提升網站性能。應用這些方法能改善用戶體驗，加速頁面加載，並提升SEO。