WebP 画像を使用する

Katie Hempenius
Katie Hempenius
X

検討すべき理由

WebP 画像は JPEG や PNG の画像よりも小さく、通常はファイルサイズが 25 ～ 35% 縮小されます。これにより、ページサイズが小さくなり、パフォーマンスが向上します。

  • YouTube では、WebP サムネイルに切り替えることで、ページの読み込みが 10% 高速化されることが判明しています。
  • Facebook では、WebP の使用に切り替えると、JPEG のファイルサイズが 25 ～ 35%、PNG のファイルサイズが 80% 削減されました。

WebP は、JPEG、PNG、GIF 画像の代わりとして最適です。さらに、WebP は可逆圧縮と非可逆圧縮の両方をサポートしています。ロスレス圧縮では、データが失われることはありません。非可逆圧縮を行うとファイルサイズが小さくなりますが、画質が低下する可能性があります。

画像を WebP に変換する

通常、画像を WebP に変換するには、cwebp コマンドライン ツールまたは Imagemin WebP プラグイン（npm パッケージ）のいずれかを使用します。プロジェクトでビルドスクリプトまたはビルドツール（Webpack や Gulp など）を使用している場合は、通常、Imagemin WebP プラグインが最適です。一方、CLI は、シンプルなプロジェクトや、画像を 1 回だけ変換する必要がある場合に適しています。

画像を WebP に変換する際には、さまざまな圧縮設定を指定できますが、ほとんどのユーザーは品質設定のみを気にする必要があります。品質レベルは 0（最低）～ 100（最高）の範囲で指定できます。必要に応じて、画像の品質とファイルサイズのバランスが取れたレベルを見つけてください。

cwebp を使用する

cwebp のデフォルトの圧縮設定を使用して、1 つのファイルを変換します。

cwebp images/flower.jpg -o images/flower.webp

品質レベル 50 を使用して 1 つのファイルを変換します。

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

ディレクトリ内のすべてのファイルを変換します。

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Imagemin を使用する

Imagemin WebP プラグインは、単独で使用することも、お気に入りのビルドツール（Webpack、Gulp、Grunt など）と組み合わせて使用することもできます。通常、ビルド スクリプトまたはビルドツールの構成ファイルに 10 行程度のコードを追加します。Webpack、Gulp、Grunt でこれを行う方法の例を次に示します。

これらのビルドツールを使用しない場合は、Imagemin を単独で Node スクリプトとして使用できます。このスクリプトは、images ディレクトリ内のファイルを変換し、compressed_images ディレクトリに保存します。

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

WebP 画像を配信する

サイトが WebP 対応のブラウザのみをサポートしている場合は、この記事の続きを読む必要はありません。それ以外の場合は、新しいブラウザに WebP を配信し、古いブラウザに代替画像を配信してください。

変更前: html <img src="flower.jpg" alt="">

変更後: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

<picture> タグ、<source> タグ、<img> タグ（相対的な順序など）はすべて、この目的を達成するために相互に作用します。

<picture>

<picture> タグは、0 個以上の <source> タグと 1 つの <img> タグのラッパーを提供します。

<source>

<source> タグはメディア リソースを指定します。

ブラウザでは、リストの最初にあるサポートされている形式のソースが使用されます。ブラウザが、<source> タグ内にリストされた形式をいずれもサポートしていない場合は、<img> タグで指定された画像の読み込みにフォールバックします。

<img>

<img> タグは、<picture> タグをサポートしていないブラウザでこのコードを機能させるものです。ブラウザが <picture> タグをサポートしていない場合、サポートしていないタグは無視されます。したがって、<img src="flower.jpg" alt=""> タグのみを認識し、その画像を読み込みます。

HTTP Accept ヘッダーの読み取り

リクエストの書き換えを可能にするアプリケーションのバックエンドまたはウェブサーバーを使用している場合は、HTTP Accept ヘッダーの値を読み取ることができます。これにより、サポートされている代替画像形式がアドバタイズされます。

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

このリクエスト ヘッダーを読み取り、その内容に基づいてレスポンスを書き換えることで、画像マークアップを簡素化できます。ソースが多いと、<picture> マークアップがかなり長くなることがあります。以下は、WebP の代替ファイルを提供する Apache mod_rewrite ルールです。

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

この方法を選択する場合は、HTTP Vary レスポンス ヘッダーを設定して、画像がさまざまなコンテンツ タイプで配信される可能性があることをキャッシュに認識させる必要があります。

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

上記の書き換えルールでは、リクエストされた JPEG または PNG 画像の WebP バージョンが検索されます。WebP の代替が見つかった場合は、適切な Content-Type ヘッダーとともに配信されます。これにより、次のような画像マークアップを使用して、WebP を自動的にサポートできます。

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

WebP の使用状況を確認する

Lighthouse を使用すると、サイト上のすべての画像が WebP を使用して配信されていることを確認できます。Lighthouse パフォーマンス アудит（[Lighthouse] > [Options] > [Performance]）を実行し、次世代形式で画像を提供する監査の結果を確認します。Lighthouse には、WebP で提供されていない画像が一覧表示されます。