WebPについて
WebPは2010年にGoogleが仕様を公開した画像フォーマットで、非可逆圧縮/可逆圧縮どちらも使用可能で、アルファチャンネル（半透明）も扱えて、ファイルの容量が小さい便利な画像フォーマットです。
主要ブラウザのWebP対応状況
chrome
Googleが作成したフォーマットのため早い時期から利用可能だった
safari
2020年9月にはiOSのsafari
2022年の9月にはmacのsafariに対応された
firefox
2019年1月に対応された
edge
2018年9月に対応された
ブラウザについて まとめ
2022年頃まではmac safariが非対応だったため、メインで使用するのが難しい難しい場面もありましたが
2022年の9月にはmacのsafariにも対応され、主要ブラウザ全てで表示可能になりました。（参照：Can I use）
積極的にWebPを使用していきましょう！
WebPを使えると何が嬉しいのか
webアプリでの画像使用時に、以下を同時に満たすことが可能で便利です。
これまではそのようなフォーマットがなく、複数の画像フォーマットを用途により使い分ける必要がありました。
・フルカラー
・ファイルサイズが小さい
・透過が使える
見た目が綺麗で、ファイルサイズが小さいのはユーザにとっても良いことですね。
▼各フォーマット比較
| フォーマット | 特徴 | 主な用途・利用シーン |
| jpg | ・フルカラー ・非可逆圧縮 ・透過使用不可 ・ファイルサイズが小さい |
・透過を使わない場合 →写真 →バナー など |
| png | ・フルカラー ・可逆圧縮可能 ・アルファチャンネル使用可能 ・アニメーション使用可能 ・ファイルサイズが大きい |
・半透明を使いたい場合 →色数が多く、かつ透過が必要な画像 |
| png8 | ・256色のインデックスカラー ・アルファチャンネル使用可能 ・透過使用可能 ・ファイルサイズが小さい |
・半透明を使いたい場合 →アイコン →縦横幅が小さい画像（色数が多くても違和感無く見れる） など ・動画ファイルを用いずにアニメーションを使いたい場合 |
| gif | ・256色のインデックスカラー ・透過させる色を1色指定可能。半透明使用不可 ※元データにアンチエイリアスが使用されている場合は、マットカラーか、ディザリング処理が必要になるので、透過を扱う時は背景色と馴染むように気を使う必要がある ・アニメーション使用可能 ・ファイルサイズが小さい |
・動画ファイルを用いずにアニメーションを使いたい場合 ※2017年頃まで、androidがアニメーションpngに対応しておらず それまではアニメーションを使う際はgifで対応する必要がありました |
| svg | ・ベクター形式 ・複雑なデザインには向かない ・透過使用可能 ・ファイルサイズが小さい |
・パソコン向け、スマートフォン向け両対応が必要な際に同一の画像ファイルで対応したい場合 →シンプルなアイコン、ボタンなど ・画面を極端に拡大された場合にも綺麗に表示したい場合 |
| webp | ・フルカラー ・非可逆圧縮/可逆圧縮選択可能 ・透過使用可能 ・アニメーション使用可能 ・ファイルサイズが小さい |
・svgのほうが良い場面を除いて、大半で使用可能 |
WebPの作り方（一例）
photoshopを使用してデータを作成する
photoshopでwebデザインデータを作成する際に「アセット生成」が非常に便利な機能ですが
アセット生成はWebP作成に対応していないのが惜しいです。
大量の画像データをまとめて変換する場合は後述の「cwebp」を活用する必要があります。（2024年2月時点）
cwebpを使用してデータを作成する
Google公式でコマンドラインツールとコンバーターが用意されています。
macの場合は、brewを使用してコマンドラインツールをインストールすることも可能です。
WebPを使用すると実際どのくらいファイルサイズが小さくなるのか
AIで生成したpng画像（294KB）を用いて比較してみます。
・jpgとgifはImageMagickのconvertを使用
・png8はpngquantを使用
・webpはcwebpを使用
| フォーマット | 設定 | ファイル サイズ |
生成方法 |
| jpg | 品質50 | 28KB | convert input.png -quality 50 output.jpg |
| jpg | 品質75 | 40KB | convert input.png -quality 75 output.jpg |
| jpg | 品質100 | 285KB | convert input.png -quality 100 output.jpg |
| png | 294KB | ※元画像 | |
| png8 | 64色 | 66KB | pngquant 64 –speed 1 input.png -o output.png |
| png8 | 128色 | 83KB | pngquant 128 –speed 1 input.png -o output.png |
| png8 | 256色 | 96KB | pngquant 256 –speed 1 input.png -o output.png |
| gif | 103KB | convert input.png output.gif | |
| webp | 品質50 非可逆圧縮 |
20KB | cwebp -q 50 input.png output.webp |
| webp | 品質75 非可逆圧縮 |
26KB | cwebp input.png output.webp |
| webp | 品質100 非可逆圧縮 |
83KB | cwebp -q 100 input.png output.webp |
| webp | 可逆圧縮 | 242KB | cwebp -lossless input.png output.webp |
※見た目上、webp品質75もあれば劣化を感じず綺麗に表示することができます。（個人的所感です）
WebPを利用するにあたり注意すること
動作保証するOSとブラウザの確認
古いOSやブラウザは、webpが対応されていない場合があるので、サービスでサポートしなければならないOSやブラウザをステークホルダーに確認し、必要に応じてwebp以外のフォーマットを併用して画像表示を行いましょう。
ユーザからの画像アップロードを受け付ける場合はWebP以外のフォーマットも受け付ける
WebPがメインで使えるようになっていても、カメラアプリや一般的に使われるフォーマットはjpg、pngがメインとなるのでwebpのみの対応とせず、jpg、pngも受け付けるようにしましょう。
また、容量削減にとことん拘るなら、アップロードされた画像をWebPに変換することも検討しましょう。
画像の品質や使用方法のレギュレーション確認
WebPは非可逆圧縮で作成すれば、ファイルサイズがjpg以上に小さくなりますが、品質によってはノイズが目立つこともあります。
プロジェクトの責任者、ステークホルダーに、基準となる品質と見た目の許容範囲を確認して、データを作成しましょう。
