JPGとWebPの概要
JPGとは
- JPG（またはJPEG）は、写真などの高品質画像を保存するために広く使われている画像フォーマット
- ファイルサイズを抑えつつ、十分な画質を維持することができますが、非可逆圧縮のため画質が劣化することある
WebPとは
- WebPはGoogleが開発した画像フォーマット
- 高い圧縮率と優れた画質を両立している
- 静止画とアニメーション画像の両方をサポートし、ウェブサイトの読み込み速度を向上させるために最適化されている
webpコマンド
Googleが開発した画像フォーマット
Google WebP Tools
使い方
基本的なコマンド構文:
cwebp [オプション] 入力ファイル -o 出力ファイル
例
JPEG画像 example.jpgをWebPに変換する:
cwebp example.jpg -o example.webp
オプション(一部抜粋):
-
-q [品質値]: 圧縮品質(0-100、デフォルトは75) -
resize [幅] [高さ]: 画像を指定したサイズにリサイズ
準備
macOS
# Homebrewを利用してインストール
brew install webp
# バージョン確認
cwebp -version
Ubuntu/Linux
# APTパッケージマネージャーを使ってインストール
sudo apt update
sudo apt install webp
# バージョン確認
cwebp -version
Windows
-
公式ダウンロードページ からバイナリをダウンロード
-
パスを通す
-
コマンドプロンプトで動作確認:
cwebp -version
実行
複数ファイルをまとめて処理するためにスクリプトを書いて実行する方法を記載します。
環境
$ tree
.
├── apple.jpg
├── kiwi.jpg
└── banana.jpg
スクリプト例
jpg2webp.sh
#!/bin/bash
echo "start!!"
for file in *.jpg; do
cwebp "$file" -o "${file%.jpg}.webp"
done
echo "end!!"
手順
- 上記のスクリプトを
jpg2webp.shという名前で保存 - 実行権限付与
chmod +x jpg2webp.sh - 実行
./jpg2webp.sh - 結果
$ tree . ├── apple.jpg ├── apple.webp ├── kiwi.jpg ├── kiwi.webp ├── banana.jpg └── banana.webp
出力結果(jpg2webp.sh)
start!!
Saving file 'apple.webp'
File: apple.jpg
Dimension: 456 x 286
Output: 14176 bytes Y-U-V-All-PSNR 39.67 39.50 38.78 39.48 dB
(0.87 bpp)
block count: intra4: 396 (75.86%)
intra16: 126 (24.14%)
skipped: 5 (0.96%)
bytes used: header: 120 (0.8%)
mode-partition: 2018 (14.2%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 8%| 14%| 38%| 40%| 522
quantizer: | 36 | 32 | 27 | 19 |
filter level: | 11 | 7 | 6 | 30 |
Saving file 'entrance_ceremony.webp'
//snip..
end!!
ログ
基本構造
start!!
Saving file '<出力ファイル名>'
File: <入力ファイル名>
Dimension: <画像の幅 x 高さ>
Output: <出力ファイルサイズ> bytes Y-U-V-All-PSNR <PSNR値>
(<bpp> bpp)
block count: intra4: <ブロック数> (<割合>%)
intra16: <ブロック数> (<割合>%)
skipped: <ブロック数> (<割合>%)
bytes used: header: <サイズ> (<割合>%)
mode-partition: <サイズ> (<割合>%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | <割合>%| <割合>%| <割合>%| <割合>%| <合計数>
quantizer: | <値> | <値> | <値> | <値> |
filter level: | <値> | <値> | <値> | <値> |
end!!
各項目の確認ポイント
出力ファイルと入力ファイル
Saving file '<出力ファイル名>'
File: <入力ファイル名>
- Saving file: 生成されたWebPファイルの名前
- File: 変換元のJPEGファイル名
画像の寸法
Dimension: <画像の幅 x 高さ>
- Dimension: 入力画像の解像度（ピクセル単位)
出力サイズと画質
Output: <出力ファイルサイズ> bytes Y-U-V-All-PSNR <PSNR値>
(<bpp> bpp)
- Output: 生成されたWebPファイルのサイズ（バイト単位）
-
Y-U-V-All-PSNR: 画質評価値（PSNR: Peak Signal-to-Noise Ratio）。以下の成分ごとに確認します：
- Y: 輝度（明るさ）成分のPSNR
- U, V: 色成分（色相）のPSNR
- All-PSNR: 全体のPSNR値（高いほど画質が良い）
- bpp (bits per pixel): 1ピクセルあたりの平均ビット数（値が低いほど高圧縮）
マクロブロック情報
block count: intra4: <ブロック数> (<割合>%)
intra16: <ブロック数> (<割合>%)
skipped: <ブロック数> (<割合>%)
- intra4: 4x4ピクセル単位で圧縮されたブロック数（小さい領域の詳細を保持）
- intra16: 16x16ピクセル単位で圧縮されたブロック数（広域の情報を効率的に保持）
- skipped: 圧縮中にデータとしてスキップされたブロック数（高圧縮の目安）
バイト使用量
bytes used: header: <サイズ> (<割合>%)
mode-partition: <サイズ> (<割合>%)
- header: WebPファイルのヘッダー部分のサイズ
- mode-partition: 圧縮モードのデータサイズ
圧縮詳細（残差情報）
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | <割合>%| <割合>%| <割合>%| <割合>%| <合計数>
- segment 1-4: 圧縮時に使用された各セグメントの割合
- total: 画像全体のマクロブロック数
量子化とフィルタ情報
quantizer: | <値> | <値> | <値> | <値> |
filter level: | <値> | <値> | <値> | <値> |
- quantizer: セグメントごとの量子化レベル（低い値ほど画質が高い）
- filter level: 画像を滑らかにするためのフィルタリング強度
ログ確認の具体例
以下は、サンプル出力の確認例です。
サンプル出力
Saving file 'apple.webp'
File: apple.jpg
Dimension: 456 x 286
Output: 14176 bytes Y-U-V-All-PSNR 39.67 39.50 38.78 39.48 dB
(0.87 bpp)
確認ポイント
-
生成ファイル名:
apple.webpとして正しく保存されたことを確認 - 画像の解像度: 456x286ピクセル
- 出力サイズ: 14,176バイト（14KB）
- 画質評価: PSNR 39.48 dB（高画質）
- 圧縮率: bpp 0.87（適切な圧縮率）
注意点とトラブルシューティング
-
エラー例:
Error! Could not process file example.jpg- 原因: ファイルが存在しない、またはフォーマットが不正
- 対処: 入力ファイルを再確認
-
出力サイズが大きい場合:
- オプション
-q（品質）を調整して、より高圧縮を試みる
- オプション