検討すべき理由
WebP 画像は JPEG や PNG よりも小さくなります(通常は ファイルサイズを 25 ~ 35% 削減できますこれによりページサイズが小さくなり パフォーマンスが向上します
- YouTube は、WebP サムネイルへの切り替えによって 10% ページの読み込みを高速化できます
- Facebook 経験したことがある JPEG では 25 ~ 35%、PNG では 80% のファイルサイズを削減 WebP の使用に切り替えました
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。