WebP 画像を使用する

Katie Hempenius
Katie Hempenius
X

なぜ重要なのでしょうか。

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

  • 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 のデフォルトの圧縮設定を使用して単一のファイルを変換します。

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

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

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]）を実行し、[Serve images in next-gen format]（次世代形式で画像を提供する）監査の結果を確認します。Lighthouse には、WebP で配信されていない画像が一覧表示されます。