ここ最近、拡張子が「webp」のファイルを見かける機会が多くなりました。
「画像はJPGとかPNGじゃないの？」という方に向けて、Webpについて解説します。
WebpはGoogle開発の新しい画像フォーマット
WebpはGoogleが開発した次世代画像フォーマットで、2010年に発表されました。
なので、実はWebpは結構昔から存在しています。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としたフォーマットで、Webページで広く使われている「jpg」や「gif」、「png」の置き換えを意図して開発されています。
次世代の規格なので、「jpg」や「png」と比較して様々な強みがあります。（もちろん弱点もあります）
Webpの特長
Webpの特長としては主に以下の項目が挙げられます。
可逆圧縮と非可逆圧縮の両保存形式に対応
画像の可逆圧縮とは、圧縮されたデータを損失なく元の状態に復元できる技術です。
可逆圧縮では、元のデータの品質を保ちながら圧縮をおこなう代わりに圧縮率は低くなります。
一方、非可逆圧縮は、圧縮時にある程度のデータが損失し元のデータを完全に復元できなくなりますが、大幅にデータサイズを削減でき、元画像の画質を極力維持しながら高い圧縮率を実現します。
「jpg」「png」「gif」は非可逆圧縮なので、圧縮後のデータを圧縮前のデータに戻すことができません。
一方、WebPはこれら両方の圧縮方法に対応しています。
高い画像圧縮率
通常、圧縮率を高めてファイルサイズを落とすと、圧縮率に比例して画質は劣化します。
しかし、Webpでは元の画質を極力そのまま保ちつつ、容量だけを減らすことが可能です。
Webpは「jpg」以上の高い圧縮率でありながら、画質の劣化はほぼなく容量のみ軽くすることができます。
Googleの示した事例では、WebPのファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなっています。
WebPを利用することにより画像サイズを軽量化できるため、特にウェブページの読み込み高速化に有利に働きます。
フォーマットを使い分ける必要がない
ホームページ知識のある方やPhotoshop・illustratorを触ったことがある方は分かると思うのですが、画像をアニメーションにしたいときは「gif」、背景を透過したいときは「png」のフォーマットにしなければなりません。
しかし、Webpは透過効果とアニメーションに対応しているため、こうしたフォーマットを気にせず使うことができます。
制作物をある程度Webpで統一することができます。
Webpのデメリット
大きく3つです。
サービスによっては対応していない
以前は対応しているブラウザが少ないことが弱点でしたが、2024年8月時点では、ほとんどのブラウザとOSがWebpに対応しています。
WebPフォーマットについて解説します。WebPは、Googleが開発した画像フォーマットで、ウェブページでの画像表示を高速化するために設計されています。JPEGやPNG、GIFといった従来の画像フォーマットに比べて、高い圧縮率と高品質を両立しているのが特徴です。
WebPの主な特徴
- 高い圧縮率: 同じ画質であれば、JPEGよりも大幅にファイルサイズを小さくできます。可逆圧縮（元のデータに戻せる圧縮方式）と非可逆圧縮（多少のデータ損失を伴う代わりに高い圧縮率を実現する方式）の両方に対応しています。
- 優れた画質: 高い圧縮率にもかかわらず、画質の劣化が少ないのが特徴です。特に非可逆圧縮では、JPEGと同等以上の画質を保ちながらファイルサイズを大幅に削減できます。
- アニメーション対応: GIFアニメーションと同様に、アニメーション画像を表現できます。GIFよりもファイルサイズが小さくなるため、アニメーションを多用するウェブサイトに適しています。
- 透過（アルファチャンネル）対応: PNGと同様に、背景を透過させた画像を扱えます。透過画像でも高い圧縮率を維持できるため、ウェブデザインの自由度を高めます。
従来の画像フォーマットとの比較
WebPは、従来の画像フォーマットの利点を兼ね備えています。
- JPEGとの比較: JPEGよりも高い圧縮率で、同じ画質ならファイルサイズを小さくできます。特に写真などの自然画に適しています。
- PNGとの比較: PNGと同等の可逆圧縮と透過に対応し、さらに高い圧縮率を実現します。ロゴやアイコンなどの図形画像に適しています。
- GIFとの比較: GIFアニメーションと同等のアニメーション機能を持ち、より小さいファイルサイズで表現できます。
WebPのメリット
- ウェブページの高速化: ファイルサイズが小さくなることで、画像のダウンロード時間が短縮され、ウェブページの表示速度が向上します。これにより、ユーザーエクスペリエンスの向上やSEO対策にも効果があります。
- サーバー負荷の軽減: サーバーに保存する画像ファイルの容量が小さくなるため、サーバーの負荷を軽減できます。ストレージコストの削減にもつながります。
- モバイル環境に最適: 回線速度が遅いモバイル環境でも、WebPを使用することで快適なウェブ閲覧体験を提供できます。
WebPのデメリット
- 対応していないブラウザが以前はあった: 以前はInternet Explorerなど一部のブラウザがWebPに対応していませんでしたが、現在では主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）はほぼ全て対応しています。そのため、以前ほどデメリットではなくなっています。
- 編集ソフトの対応: 一部の古い画像編集ソフトではWebPの読み書きに対応していない場合があります。しかし、Photoshopなど主要な画像編集ソフトではプラグインなどで対応可能です。
WebPの使い方と変換方法
WebPは、以下の方法で利用できます。
- 画像編集ソフトで保存: PhotoshopやGIMPなどの画像編集ソフトでWebP形式で保存できます。
- オンライン変換ツール: オンラインでJPEGやPNGなどの画像をWebPに変換できるツールが多数提供されています。
- コマンドラインツール: Googleが提供する
cwebpというコマンドラインツールを使って変換できます。
まとめ
WebPは、ウェブページの高速化に大きく貢献する画像フォーマットです。高い圧縮率と高品質、アニメーションや透過への対応など、多くのメリットがあります。現在の主要ブラウザはほぼ全て対応しており、積極的に活用することでウェブサイトのパフォーマンスを向上させることができます。ウェブサイトの高速化を検討している場合は、WebPの導入を検討することをお勧めします。