WebPとは


最近よく見かけるようになった形式。新しい規格なんだろうなと思っていたけど、実際どういうものかよく知らなかったので調べてみたまとめ。

拡張子は[.webp]
読み方は[ウェッピー]

Googleが作ったweb用の画像フォーマットの一つ。実は10年以上前からあるがブラウザの互換性や書き出しでの対応がなかったので思ったより普及しなかった。最近の主要ブラウザが軒並み対応したので最近よく見るようになってきた。そのうちウェブ画像のスタンダードになりそうです。カンタンにまとめると以下の特徴を持つ。

  • JPEGは約25〜34%、PNGは約28%、元の75%程度に圧縮。
  • PNG同様アルファチャンネルを持つことができる。
  • GIFのようにアニメーションを持つことができる。

と言うようにJPEGとPNGとGIFの特徴を足して、さらに75%くらいの軽量化できるといった感じか。

作り方


とはいえWebPはまだ作る方法が限られている。自分が普段趣味の制作用で使っているAffinity Designer / Photoは直接書き出しが出来ない。Adobe PhotoshopはGitHubに公開されているGoogle公式のプラグイン「WebPShop」を使うことによって直接作成できる。

他のやりかたはGoogleが用意している画像変換ウェブサービス「Squoosh」(スクワッシュ)を使って変換するのが分かりやすい。

コマンドラインを叩いて変換もできるらしいが少々難易度は高め。しばらくはSquooshを使って慣れたらコマンドラインをやって見ようかと思う。

Squoosh


https://squoosh.app/

作業画面はこちら、何で書き出すか？どれくらいの圧縮率にするか？何%圧縮できるか等の設定できる。中央のスライダーは元と加工後の比較用。今の画像をWebP形式にすると45%削減できますよ、と右下の数値に出ている状態。


本当にそれくらい削減できるかは不明だったので、この写真を元に少し試してみる。画像は16:9の4K(3840 x 2160)サイズ。


元画像 JPEG
1.16MB



変換後 WebP
0.67MB


見た目上の違いは全くわからないが、70%以上軽量化された。ただ毎回これをやるのは結構面倒。。。Affinityが対応したら積極的に使ってみたい。Photoshop使う時は毎回これでいいかも。

今日の一曲


Sakura Chill Beats
kensuke ushio - parkside in bloom