Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • 画像を WebP に変換する
    • cwebp を使用する
    • Imagemin を使用する
  • WebP 画像を提供する
    • 写真
    • ソース
    • img
  • WebP が使用されていることを確認する

WebP 画像の使用

Nov 5, 2018 — 更新済み Apr 6, 2020
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: 読み込み時間の高速化
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
このページ内
  • 画像を WebP に変換する
    • cwebp を使用する
    • Imagemin を使用する
  • WebP 画像を提供する
    • 写真
    • ソース
    • img
  • WebP が使用されていることを確認する

なぜ重要視するべきか? #

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 プラグインが最適な一方で、シンプルなプロジェクトや画像を 1 回だけ変換する必要がある場合は、CLI が適切な選択肢とされています。

画像を 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 を新しいブラウザーに、フォールバックイメージを古いブラウザーに提供します。

ビフォー:

<img src="flower.jpg" alt="">

アフター:

<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> タグは、0 個以上の <source> タグと 1 つの<img> タグに対してラッパーを提供します。

ソース #

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

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

問題の原因

- 「好ましい」画像形式 (この場合は WebP) の <source> タグは、他の <source> タグよりも先に記述する必要があります。 - type 属性の値は、画像形式に対応する MIME タイプでなければいけません。画像の MIME タイプとそのファイル拡張子はよく似ていますが、必ずしも同じではありません (たとえば、.jpg と image/jpeg)。

img #

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

問題の原因

- <img>タグはいつも含める必要があり、常にすべての<source>タグの後に続いて一番最後に記述する必要があります。 - <img>タグで指定されるリソースは、フォールバックとして使用できるように、一般的にサポートされている形式 (JPEGなど) である必要があります。

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

Lighthouse を使用すれば、サイト上のすべての画像が WebP を使用して提供されていることを確認できます。Lighthouse Performance Auditを実行し (Lighthouse> Options> Performance)、Serve images in next-gen formats (次世代フォーマットで画像を提供) 監査の結果を探します。Lighthouse は、WebP で提供されていない画像をリストアップします。

パフォーマンス
最終更新: Apr 6, 2020 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Creating WebP Images with the Command Line
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.