使用指令列建立 WebP 圖片

凱蒂漢佩尼斯
Katie Hempenius
X

因為系統已為您安裝 Webp 指令列工具，所以您將可開始使用。這項工具會將 JPG、PNG 和 TIFF 圖片轉換為 WebP。

將圖片轉換為 WebP 檔

  1. 按一下「Remix to Edit」，讓專案可供編輯。
  2. 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
  3. 輸入以下指令：
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

這個指令會以 50 的品質轉換 (0 是最差，100 是最佳選擇)，並將 images/flower1.jpg 檔案儲存為 images/flower1.webp。

完成之後，控制台中應會顯示類似下方的內容：

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

您剛剛已成功將圖片轉換為 WebP。

但是，一次執行一個cwebp指令，會需要很長的時間才能轉換許多圖片。如需執行這項作業，您可以改用指令碼。

  • 在控制台中執行這個指令碼 (別忘了倒引號)：
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

這個指令碼會以 50 的品質轉換 images/ 目錄中的所有檔案，並將其儲存為相同目錄中的新檔案 (檔案名稱相同，但副檔名為 .webp)。

✔✔ 簽到

images/ 目錄中現在應有 6 個檔案：

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

接下來，更新這個 Glitch，即可向支援 WebP 的圖片瀏覽器提供 WebP 圖片。

使用 <picture> 標記新增 WebP 圖片

<picture> 標記可讓您將 WebP 提供給新版瀏覽器，同時繼續支援舊版瀏覽器。

  • 在 index.html 中，將 <img src="images/flower1.jpg"/> 替換為下列 HTML：
<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
  • 接著，使用 <picture> 標記取代 flower2.jpg 和 flower3.png 的 <img> 標記。

✔✔ 簽到

完成後，index.html 中的 <picture> 標記應如下所示：

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

接下來，請使用 Lighthouse 來驗證網站是否已正確實作 WebP 圖片。

使用 Lighthouse 驗證 WebP 用量

Lighthouse 的「以新一代格式提供圖片」效能稽核功能可讓您瞭解網站上的所有圖片是否使用 WebP 等新一代格式。

  1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。
  2. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  3. 按一下「Lighthouse」分頁標籤。
  4. 確認您已在「類別」清單中勾選「成效」核取方塊。
  5. 按一下「產生報表」按鈕。
  6. 確認已通過「以新一代格式提供圖片」稽核。

在 Lighthouse 中通過「提供新一代格式的圖片」稽核

太好了，您的網站現在已提供 WebP 圖片。