More than 1 year has passed since last update.

WebPとは？

Posted at 2023-03-04

WebP（ウェブピー）は、Googleが開発した画像フォーマットで、Web上の画像をより高品質に、かつ小さなファイルサイズで表示することができます。WebPは、静止画像とアニメーションGIFの両方をサポートしています。

WebPは、ハイブリッド方式と呼ばれる、静止画像には有効なVP8圧縮技術を使用し、アニメーションGIFには有効なアルゴリズムを使用することで、高圧縮率と高品質を両立しています。そのため、JPEGやPNGなどの従来の画像フォーマットよりも、ファイルサイズが小さくなります。

高圧縮率と高品質

WebPは、ハイブリッド方式を採用しており、圧縮率と品質を両立しています。そのため、同じ画像をJPEGやPNGで保存した場合よりも、小さなファイルサイズで高品質な画像を表示することができます。
高速な表示速度

WebPは、小さなファイルサイズで高品質な画像を表示することができるため、ページの読み込み速度を向上させることができます。また、Google ChromeやOperaといったブラウザは、WebPに最適化されているため、より高速な表示速度を実現することができます。
多様な環境で利用可能

WebPは、Googleが開発したフォーマットであるため、Google ChromeやOperaといったブラウザでの利用に適しています。しかし、FirefoxやSafariといった他のブラウザでもWebPをサポートするプラグインやライブラリが開発されており、幅広い環境で利用することができます。

対応していないブラウザがある

WebPは、Googleが開発したフォーマットであるため、Google ChromeやOperaといったブラウザでの利用に適しています。しかし、FirefoxやSafariといった他のブラウザでは、WebPに対応していない場合があります。
オリジナル画像との互換性が低い

WebPは、VP8圧縮技術を使用するため、従来のJPEGやPNGとは異なる圧縮方式を採用しています。そのため、オリジナル画像との互換性が低く、従来の画像フォーマットからWebPに変換する必要があります。また、WebPで保存された画像を従来の画像フォーマットに変換する場合にも、品質の低下やファイルサイズの増大が発生する可能性があります。
編集ソフトの対応が不十分

WebPは、比較的新しいフォーマットであるため、一部の編集ソフトに対応していない場合があります。そのため、WebPで保存された画像を編集する場合には、専用のソフトウェアを使用する必要がある場合があります。

WebPに変換するための変換ソフトとしては、Googleが提供している「WebP Codec for Windows」や「WebP Codec for Mac」、またはオープンソースの「ImageMagick」などがあります。

WebP画像ファイルをWebページに組み込む場合には、imgタグにsrc属性としてWebP画像ファイルのパスを指定するだけで使用することができます。

<img src="image.webp" alt="WebP image">

また、WebPをサポートしているブラウザであるかどうかを判定し、対応していない場合には代替となる画像ファイルを読み込む方法もあります。以下は、JavaScriptを使用したブラウザの判定例です。

if (typeof(document.createElement('img').webp) == "string") {
  // WebPがサポートされている場合の処理
} else {
  // WebPがサポートされていない場合の処理
}