WebP 画像を使用する

Katie Hempenius
Katie Hempenius
X

検討すべき理由

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

WebP は、JPEG、PNG、GIF 画像の代わりとして最適です。また WebP は、可逆圧縮と非可逆圧縮の両方に対応しています。可逆圧縮ではデータなし 失われます。非可逆圧縮はファイルサイズを縮小しますが、その代わりに 画質の低下を招くことがあります。

画像を WebP に変換する

ユーザーは一般に、次のいずれかの方法を使用して画像を変換します。 : cwebp コマンドライン ツール または Imagemin WebP プラグイン（npm パッケージをご覧ください）。 プロジェクトでビルドを使用する場合は、一般的に Imagemin WebP プラグインが最適です。 ビルドツール（Webpack や Gulp など）を使用できますが、CLI を使用することをおすすめします。 シンプルなプロジェクト向けや、イメージを一度変換するだけでよい場合にも適しています。

画像を 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/etc.).これには通常、最大 10 行のコードを ビルド スクリプトまたはビルドツールの構成ファイル。 この例は Cloud Monitoring で Webpack、 Gulp うめき声。

これらのビルドツールを使用しない場合は、Imagemin を単独で使用できます。 使用します。このスクリプトは、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> タグに対応していない API 呼び出しはありません。 ブラウザが <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 を使用すると、サイト上のすべての画像が配信されていることを確認できます。 作成しますLighthouse のパフォーマンス監査を実行します（[Lighthouse] > [Options] > パフォーマンス）を確認し、次世代の画像を提供する フォーマットの監査。配信されていない画像がすべて Lighthouse に表示されます。 WebP。