webp とは
Google が開発している静止画像フォーマット。web サイトのトラフィック量削減と表示速度短縮を目的としており、他の画像形式よりもファイルサイズが小さくなることを特徴としている。
2022年現在では主要なブラウザの対応がほぼ完了しており、個人的にも色々なページで利用されているのを見かけるようになってきた印象。
ただ、カメラで撮影した画像やペイントツールで作成した画像は、普通は jpg や png といった形式なので、webp にする際には変換が必要である。 変換のためのツールは Google から提供されているので、これを使って webp への変換と、webp からの変換を試してみる。
インストール方法
Mac の場合は Homebrew でインストールできる。
% brew install webp
Windows の場合は Chocolatey でインストールできる。こちらは初版リリースの 1.0.0 から更新されておらず、若干情報が古い可能性がある。
> choco install webp
上記パッケージ管理ツールが使えない場合は、公式サイトからコンパイル済みパッケージをダウンロードすると良い。
webp 画像に変換する
適当に撮影したスクリーンショットのファイル（png）を webp 形式に変換してみる。今回は Mac で Homebrew を使ってインストールしたパッケージを利用した。動作環境は以下。
% sw_vers ProductName: Mac OS X ProductVersion: 10.15.7 BuildVersion: 19H1519 % brew --version Homebrew 3.3.11 Homebrew/homebrew-core (git revision f3bf95be57f; last commit 2022-01-23) Homebrew/homebrew-cask (git revision 23e5e5cdae; last commit 2022-01-23) % cwebp -version 1.2.2
webp 画像に変換するためには cwebp コマンドを使う。
% cwebp screenshot.png -o screenshot.webp
Saving file 'screenshot.webp'
File: screenshot.png
Dimension: 3104 x 1882 (with alpha)
Output: 190428 bytes Y-U-V-All-PSNR 45.95 52.61 53.52 47.30 dB
(0.26 bpp)
block count: intra4: 3499 (15.28%)
intra16: 19393 (84.72%)
skipped: 18455 (80.62%)
bytes used: header: 515 (0.3%)
mode-partition: 24399 (12.8%)
transparency: 38206 (99.0 dB)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 2%| 3%| 15%| 81%| 22892
quantizer: | 36 | 35 | 30 | 24 |
filter level: | 11 | 7 | 19 | 4 |
Lossless-alpha compressed size: 38205 bytes
* Header size: 333 bytes, image data size: 37872
* Precision Bits: histogram=6 transform=5 cache=0
* Palette size: 99
ls コマンド*1でファイルサイズを比較してみると、約80%小さくなっている。デフォルトの圧縮率は 75% に設定されており、これはオプションで変更することができる。
1028730 screenshot.png 190428 screenshot.webp
実際の画像で比較できれば良かったのだが、はてなブログでは「写真を投稿」から webp 形式の画像をアップロードしようとすると「未対応のファイル形式です」とエラーになってしまった。
webp 画像を他の形式に変換する
上記のように webp 形式で対応できない場合もあるため、webp 画像を他の形式に変換する際には dwebp コマンドを使う。
dwebp in_file [options] [-o out_file]
試しに先ほど webp 画像に変換したファイルを、再度 png 画像に変換してみる。
% dwebp screenshot.webp -o screenshot_decode.png Decoded screenshot.webp. Dimensions: 3104 x 1882 (with alpha). Format: lossy. Now saving... Saved file screenshot_decode.png
ファイルサイズを比較すると以下のようになり、変換後の方が容量が大きくなっている。一度変換したファイルをそのまま元に戻すことはできないようである。
1028730 screenshot.png 190428 screenshot.webp 1229876 screenshot_decode.png
参考サイト
*1:ファイルサイズと名前のみに加工している
