コマンドラインを使用した WebP 画像の作成

webp コマンドラインツールはすでにインストールされているので、すぐに作業を開始できます。このツールは、JPG、PNG、および TIFF 画像を WebP に変換します。

画像を WebP に変換する #

  1. Click Remix to Edit to make the project editable. 1. Click Tools.

  2. Click Logs.

  3. Click Console.

  4. 次のコマンドを入力します。

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

このコマンドは images/flower1.jpg ファイルを品質レベル 50 (0 が最低、100 が最高) で変換し、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 に変換されました。

しかし、1 つの画像ごとにいちいち cwebp コマンドを実行していたのでは、多くの画像を変換するには時間がかかってしまうため、その場合は、代わりにスクリプトを使用するとよいでしょう。

  • コンソールで以下のスクリプトを実行します (バッククォートをお忘れなく)。
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

このスクリプトは、images/ ディレクトリ内のすべてのファイルを品質レベル 50 で変換し、それらを新しいファイルとして同じディレクトリに保存します (同じ名前を使うが拡張子は .webp にする)。

✔ チェックイン #

結果、images/ ディレクトリに以下 6 つのファイルが作成されます。

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

次に、WebP 画像をサポートするブラウザに WebP 画像を提供するように Glitch を更新します。

<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.jpgflower2.jpgflower3.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 を使用して、WebP 画像がサイトに正しく実装されていることを確認します。

WebP が使用されていることを Lighthouse で確認する #

Lighthouse のServe images in next-gen formats (画像を次世代フォーマットで提供する) パフォーマンス監査を使用すると、サイト上のすべての画像に WebP のような次世代フォーマットが使用されているかどうかを確認できます。

  1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. Make sure the Performance checkbox is selected in the Categories list.

  4. Click the Generate report button.

  5. Serve images in next-gen formats 監査に合格していることを確認します。

Lighthouse の 'Serve images in next-gen formats' 監査に合格

うまく出来ましたね!これで、サイトに WebP 画像が表示されるようになりました。

最終更新: 記事を改善する