こんにちは、ハヤマです。
今回は、比較的新しい画像ファイルのフォーマット「WebP（ウェッピー）」について紹介したいと思います。
WebP（ウェッピー）とは
2010年に米Googleが開発した画像ファイルのフォーマットのことで、ファイルの拡張子は「.webp」です。
公開当時はまだ対応ブラウザが少なく、しばらくは普及しない状態が続きましたが、現在ではご覧の通り。
（2024年1月現在）
WebP image format | Can I use... Support tables for HTML5, CSS3, etc
IEのサポートも終了していることから、活用しているサイトも増えてきました。
特徴
① JPEG同様の色数
24ビット（1677万色）のフルカラーに対応しています。
② 可逆圧縮と非可逆圧縮に対応
可逆圧縮（※1）と非可逆圧縮（※2）が可能なため、従来では「PNG」「JPG」のように、用途に応じ、異なる拡張子で用意していたものを同じファイル形式で保存することができます。
※1 可逆圧縮…PNGのように、圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法。圧縮後のデータから、圧縮前のデータを復旧することが可能。
※2 非可逆圧縮…JPEGのように、圧縮により一部のデータは欠落するが、人間の感覚に伝わりにくい部分は情報を大幅に減らし、伝わりやすい部分の情報を多く残すことで劣化を目立たなくする圧縮方法。圧縮後のデータから、圧縮前のデータを復旧することは不可能。
③ 画像ファイルの軽量化
WebPは、Webサイトのトラフィック量（ネットワーク回線で送受信される通信データ量）の軽減と表示速度短縮を目的としており、画像の画質を保持したまま軽量化した画像を書き出すことができます。
ページの読み込み速度改善は、SEO評価の向上に繋がります。
Webサイト上で大きな画像を使ったり、画像枚数の多いページである程度の画質を保ったJPGやPNGを使用するとページが重くなり、コンテンツの表示速度が遅くなります。これは離脱率にも影響するため、注意が必要です。
Googleの公式事例によると、以下のようにファイルサイズの軽量化ができると発表されています。
- WebP 可逆圧縮：PNGと比較して26%縮小
- WebP 非可逆圧縮：（同一画像、同等画質の）JPEGと比較して25〜34%縮小
④ 非可逆圧縮でもアルファチャンネル対応
WebPではPNGやGIF同様、アルファチャンネルに対応しています。
ポイントは、非可逆圧縮でもアルファチャンネルが対応している点（JPEGファイルで、背景透過ができるようになったイメージ）。
これにより、背景透過の有無によりファイル形式を変更する必要もなくなります。
⑤ アニメーションも作成可能
GIFよりも表現できる色数が多いため、より繊細なアニメーションを作成することが可能です。
さいごに
特徴を整理すると、JPEG以上の圧縮率なのに劣化が少なく、JPEG・PNG・GIFそれぞれの特性を兼ね備えたフォーマットであることがわかりました。
Photoshopをお使いの方は、Photoshop 23.2よりWebPのファイル形式が完全にサポートされているので、ぜひお手持ちの画像ファイルを変換して試してみてください。
