cwebpを用いた画像変換。JPEGをWebPに変換


# JPGとWebPの概要
## JPGとは
- JPG（またはJPEG）は、写真などの高品質画像を保存するために広く使われている画像フォーマット
- ファイルサイズを抑えつつ、十分な画質を維持することができますが、非可逆圧縮のため画質が劣化することある

## WebPとは
- WebPはGoogleが開発した画像フォーマット
- 高い圧縮率と優れた画質を両立している
- 静止画とアニメーション画像の両方をサポートし、ウェブサイトの読み込み速度を向上させるために最適化されている

# webpコマンド
Googleが開発した画像フォーマット
[Google WebP Tools](https://developers.google.com/speed/webp?hl=ja)

## 使い方
基本的なコマンド構文:
```
cwebp [オプション] 入力ファイル -o 出力ファイル
```

### 例

JPEG画像 example.jpgをWebPに変換する:
```bash
cwebp example.jpg -o example.webp
```

### オプション(一部抜粋):
- `-q [品質値]`: 圧縮品質(0-100、デフォルトは75)
- `resize [幅] [高さ]`: 画像を指定したサイズにリサイズ

# 準備

## macOS
```bash
# Homebrewを利用してインストール
brew install webp

# バージョン確認
cwebp -version
```

## Ubuntu/Linux
```bash
# APTパッケージマネージャーを使ってインストール
sudo apt update
sudo apt install webp

# バージョン確認
cwebp -version
```

## Windows

1. [公式ダウンロードページ](https://developers.google.com/speed/webp/download?hl=ja) からバイナリをダウンロード

2. パスを通す

3. コマンドプロンプトで動作確認:
```bash
cwebp -version
```

# 実行
複数ファイルをまとめて処理するためにスクリプトを書いて実行する方法を記載します。

## 環境
```bash
$ tree
.
├── apple.jpg
├── kiwi.jpg
└── banana.jpg
```

## スクリプト例
```sh:jpg2webp.sh
#!/bin/bash

echo "start!!"

for file in *.jpg; do
  cwebp "$file" -o "${file%.jpg}.webp"
done

echo "end!!"
```
## 手順
1. 上記のスクリプトを`jpg2webp.sh`という名前で保存
1. 実行権限付与
    ```bash
    chmod +x jpg2webp.sh
    ```
1. 実行
    ```bash
    ./jpg2webp.sh
    ```
1. 結果
    ```bash
    $ tree
    .
    ├── apple.jpg
    ├── apple.webp
    ├── kiwi.jpg
    ├── kiwi.webp
    ├── banana.jpg
    └── banana.webp
    ```

## 出力結果(jpg2webp.sh)
```bash
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!!
```

### ログ

#### **基本構造**
```plaintext
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!!
```

---

#### 各項目の確認ポイント

##### **出力ファイルと入力ファイル**
```plaintext
Saving file '<出力ファイル名>'
File:      <入力ファイル名>
```
- **Saving file**: 生成されたWebPファイルの名前
- **File**: 変換元のJPEGファイル名

---

#### **画像の寸法**
```plaintext
Dimension: <画像の幅 x 高さ>
```
- **Dimension**: 入力画像の解像度（ピクセル単位)

---

#### **出力サイズと画質**
```plaintext
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ピクセルあたりの平均ビット数（値が低いほど高圧縮）

---

#### **マクロブロック情報**
```plaintext
block count:  intra4:        <ブロック数>  (<割合>%)
              intra16:       <ブロック数>  (<割合>%)
              skipped:       <ブロック数>  (<割合>%)
```
- **intra4**: 4x4ピクセル単位で圧縮されたブロック数（小さい領域の詳細を保持）
- **intra16**: 16x16ピクセル単位で圧縮されたブロック数（広域の情報を効率的に保持）
- **skipped**: 圧縮中にデータとしてスキップされたブロック数（高圧縮の目安）

---

#### **バイト使用量**
```plaintext
bytes used:  header:          <サイズ>  (<割合>%)
             mode-partition:  <サイズ>  (<割合>%)
```
- **header**: WebPファイルのヘッダー部分のサイズ
- **mode-partition**: 圧縮モードのデータサイズ

---

#### **圧縮詳細（残差情報）**
```plaintext
Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |   <割合>%|   <割合>%|   <割合>%|   <割合>%|  <合計数>
```
- **segment 1-4**: 圧縮時に使用された各セグメントの割合
- **total**: 画像全体のマクロブロック数

---

#### **量子化とフィルタ情報**
```plaintext
      quantizer:  |      <値> |      <値> |      <値> |      <値> |
   filter level:  |      <値> |      <値> |      <値> |      <値> |
```
- **quantizer**: セグメントごとの量子化レベル（低い値ほど画質が高い）
- **filter level**: 画像を滑らかにするためのフィルタリング強度

---

#### ログ確認の具体例

以下は、サンプル出力の確認例です。

##### サンプル出力
```plaintext
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)
```

##### 確認ポイント
1. **生成ファイル名**: `apple.webp` として正しく保存されたことを確認
2. **画像の解像度**: 456x286ピクセル
3. **出力サイズ**: 14,176バイト（14KB）
4. **画質評価**: PSNR 39.48 dB（高画質）
5. **圧縮率**: bpp 0.87（適切な圧縮率）

---

### 注意点とトラブルシューティング
- **エラー例**: 
  ```plaintext
  Error! Could not process file example.jpg
  ```
  - 原因: ファイルが存在しない、またはフォーマットが不正
  - 対処: 入力ファイルを再確認

- **出力サイズが大きい場合**: 
  - オプション `-q`（品質）を調整して、より高圧縮を試みる


# 参考リンク
- [Google WebP公式ドキュメント](https://developers.google.com/speed/webp)
- [cwebp詳細オプション](https://developers.google.com/speed/webp/docs/cwebp)