使用指令列建立 WebP 圖片

Katie Hempenius

WebP 指令列工具 系統已為您安裝 ，現在可以開始設定了。這項工具 會將 JPG、PNG 和 TIFF 圖片轉換為 WebP。

將圖片轉換為 WebP 檔

1. 按一下「Remix to Edit」即可編輯專案。
2. 按一下「Terminal」(注意：如果沒有顯示「Terminal」按鈕，您可能需要使用「全螢幕」選項)。
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>

• 接著，將 flower2.jpg 和 flower3.png 的 <img> 標記替換為 <picture> 標記。

✔︎ 簽到

完成後，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 檢查是否已在 網站。

使用 Lighthouse 驗證 WebP 用量

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

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

大功告成！您現在可以在網站上放送 WebP 圖片。