【徹底解説】WebP（ウェッピー）とは？JPEG/PNGとの違いとWebサイトでの使い方
皆さん、こんにちは。ひらくです。
今回は、最近よく目にする「WebP（ウェッピー）」という画像形式について詳しく見ていきたいと思います。
Webサイトを見ていると「.webp」という拡張子の画像が増えたと感じている方も多いのではないでしょうか。これはGoogleが開発した、比較的新しい画像形式です
動画で確認したい方はこちら↓
WebPの最大の特徴：高画質と低容量の両立
WebPの最大の特徴は、「画質を高く保ったまま、データサイズを小さくできる」ことです。
これまでの画像形式と比べると、以下のような関係にあります。
- JPEG: 写真によく使われる。データサイズは小さいが、圧縮すると画質が低下しやすい。
- PNG: ロゴやアイコンによく使われる。画質は綺麗（透過も可能）だが、データサイズが大きくなりがち。
- WebP: JPEGとPNGの「いいとこ取り」。JPEGやPNGとほぼ同等の画質を保ちながら、ファイルサイズを約20～30%も小さくできます。
サイズ比較例：ファイルサイズはどれくらい変わる？
実際に、私がサムネイル用に作成した画像（白と黒のシンプルなもの）をPNGとWebPで保存し比較してみました。
- PNGの場合： 217KB
- WebPの場合： 140KB
（※注：画像のデザインや色数によって圧縮率は変わります）
このように、ファイルサイズが約40%も削減（元の約60%）されました。
サイズが小さいと何が良い？
Webサイトにおいて、画像のファイルサイズは非常に重要です。テキストに比べて画像データは容量が大きいため、読み込みに時間がかかります。
画像サイズを小さく（軽く）することで、Webページの表示速度が向上します。最近は高速な回線が増えましたが、それでも画像の軽量化は、ユーザー体験（UX）の向上に直結する重要な要素です。
WebPの多機能性：JPEGとPNGの仕事を一人でこなす
WebPのすごい点は、これまでの画像形式が持っていた特徴を幅広くカバーしていることです。
- 圧縮方法を選べる（非可逆圧縮と可逆圧縮）
・非可逆圧縮（JPEG的）
人間の目には分かりにくい部分のデータを少し間引くことで、ファイルサイズを劇的に小さくします。大きな写真などに適しています。
・可逆圧縮（PNG的）
データを一切失わずに圧縮します。ロゴや図形、イラストなど、境界線をクッキリ見せたい画像に最適です。 - 背景の透過（PNG的）
PEGではできなかった「背景の透明化」が可能です。PNGと同様に、背景を透明にしたロゴやアイコンを扱うことができます。 - アニメーション（GIF的）
GIFアニメーションのように、複数の画像を組み合わせてパラパラ漫画のようなアニメーションを作成することも可能です。
このように、WebPは「写真」「ロゴ」「透過画像」「アニメーション」といった、これまでJPEG・PNG・GIFが別々に担っていた 役割を、ほぼ全てカバーできてしまいます。
今後のWeb制作では、画像形式がWebPに統一されていく流れが加速していくかもしれません。
WebP画像の作り方：Googleの「Squoosh」が便利
WebP画像を作成する方法はいくつかありますが、簡単なのはGoogleが公開している「Squoosh（スクーシュ）」というWebツールです。
- Squooshのサイト（http://squoosh.app/）にアクセスする。
- 変換したいPNGやJPEG画像をドラッグ＆ドロップする。
- 右下のメニューで「WebP」を選択する。
- 「Quality（品質）」スライダーを調整して、画質とファイルサイズ（右下に表示）を確認しながら圧縮率を決める。
- 「ダウンロードボタンを押して保存する。
もちろん、Adobe PhotoshopやIllustratorなどのグラフィックソフトを持っている方は、書き出し設定でWebPを選択することでも作成可能です。
Webサイトでの実装方法：「picture」タグで対応ブラウザにだけ表示
WebPをWebサイトで使う際、気になるのが「古いブラウザで表示されなかったらどうしよう？」という点です。
その問題を解決するために、最近のモダンなWeb開発では「<picture>タグ」を使うことが増えています。
なぜ<picture>タグを使うのか？
<picture>タグは、ブラウザがどの画像形式に対応しているかを判断し、最適な画像を出し分けてくれるHTMLタグです。
▼ コーディング例
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpt" alt="画像の分かりやすい説明">
</picture>
▼ このコードの動き
- ブラウザはまず、type=”image/webp” を見て「自分はWebPを表示できるか？」を判断します。
- 【表示できる場合】 image.webp を読み込み、ここで処理は終了します（JPEGは読み込みません）。
- 【表示できない場合】 次の（JPEG）を読み込みます。
- <picture>タグを使う場合でも、最後の<img>タグは必須です。これは、どの形式も読み込めなかった場合の「最後の砦」であり、基本的な画像情報（alt属性など）を定義するベースとなります。
この書き方をしておけば、WebPに対応した最新のブラウザでは軽量なWebPを、対応していない古いブラウザ（主にInternet Explorerなど）では従来のJPEGを表示させることができ、安全です。
ブラウザの対応状況は？
現在、Internet Explorer（IE）を除くほとんどの最新ブラウザ（Chrome, Firefox, Safari, Edge）はWebPに対応しています。
最近のWeb制作ではIEをサポート対象外とすることも多いため、<picture>タグを使わずにいきなり<img>タグでWebPを指定する（<img src=”image.webp”>）ケースもありますが、より安全に対応するなら<picture>タグの使用をおすすめします。
まとめ
今回は、新しい画像形式「WebP」について解説しました。
- Googleが開発した形式
- 高画質なのに低容量（JPEG/PNGより20〜30%軽量）
- Webページの表示速度向上に貢献
- 透過（PNG）もアニメーション（GIF）も対応可能
- 実装は<picture>タグを使うと安全
インターネットから画像をダウンロードするとWebP形式であることが非常に増えてきました。Web制作に携わる方はもちろん、ブログ運営などをしている方も、この機会にWebPの基本知識を身につけておくと良いでしょう。