WebPとAVIFの比較と違い!どっち!?

覚書です。

WebPとAVIFのGUIとCLIの比較表！違いは？どっちを使う？

容量はこうなります。

AVIF < WebP < JPEG

特に写真では WebPより20〜40%小さい ケースが珍しくありません。

WebPとAVIFまわりのツールを調査しました。

次の条件で探しました。

• 一括変換可
• 無料
• 使用ライブラリが明記されている

GUIのツールは決め手に欠け、結局、コマンドラインを採用することにしました。買い切り有料版のZipic Proでもいいかもしれません。Alicはよさそうだったけど、ライブラリの中身がよくわかりませんでした(ぱっと見で詳しくは調査していません)

個人的にコードを書くこともあり、CLIにあまり抵抗がないためCLIを採用しました。

libwebpとは?

libwebp はライブラリです。

libwebp の開発元と公式

Google

正式には

Google / WebM Project

です。

WebP のダウンロードとインストール  |  Google for Developers

developers.google.com

GitHub - webmproject/libwebp: Mirror only. Please do not send pull requests. See https://chromium.googlesource.com/webm/libwebp/+/HEAD/CONTRIBUTING.md.

Mirror only. Please do not send pull requests. See - webmproject/libwebp

github.com

libwebpのインストール

brew install webp

入るもの。

• cwebp
• dwebp
• img2webp
• gif2webp
• webpmux

など。

cwebp -version

libwebpの使い方

cwebp input.png -q 80 -m 6 -mt -o output.webp

ただし、二重圧縮には注意です。

WebPはJPEGと同じ「非可逆圧縮（Lossy）」です。

つまり

PSD
↓
WebP(100%)

でも、100%だからといって元画像と完全一致ではありません。

Googleの cwebp の -q 100 も「最高品質の非可逆圧縮」であり、「可逆圧縮（Lossless）」ではありません。

つまり

PNG
↓
WebP(100%)

と

WebP(100%)
↓
WebP(80)

では後者は二度圧縮になります。

cwebp -q 80 image.png -o image.webp

WebPの場合はどうしたらいいのでしょう。

Lossless WebPならOKです。理論上 PNGと同等品質 です。Photoshopの「劣化なし」は Lossless WebP です。

フォルダ内のファイルを一括置換

バックアップは取得の上、一括置換するサンプルです。

for f in *.webp; do tmp="${f%.webp}.tmp.webp"; cwebp -q 85 -m 6 -mt "$f" -o "$tmp" && mv "$tmp" "$f"; done

改行するとこうなります。

for f in *.webp
do
    tmp="${f%.webp}.tmp.webp"
    cwebp -q 85 -m 6 -mt "$f" -o "$tmp" && mv "$tmp" "$f"
done

for f in *.webp

意味は「このフォルダにあるすべての .webp ファイルを1つずつ取り出す」

例えばフォルダが

manga01.webp
manga02.webp

なら、シェルは内部的に

1回目
f="manga01.webp"

2回目
f="manga02.webp"

として実行します。

つまりfは

現在処理しているファイル名が入る変数です。

do

doは

ここから繰り返し処理を始めます

という意味です。

例えばC言語なら

for (...) {

Pythonなら

for ...:

に相当します。

tmp="${f%.webp}.tmp.webp"

cwebp は入力ファイルと出力ファイルを同じ名前にすることはできません。

cwebp -q 85 -m 6 -mt input.webp -o input.webp

上書きしたい場合、一度テンポラリファイルを作って、成功したら置き換えるのが一般的です。

${f%.webp}

${f%.webp} は「拡張子を外す」と覚えるとよいです。

f="manga01.webp"

だったとします。

manga01

になります。

つまり

.webp

だけを削除しています。

その後ろに

.tmp.webp

を付けます。

結果

tmp="manga01.tmp.webp"

になります。

つまり

f
↓
manga01.webp

tmp
↓
manga01.tmp.webp

になります。

-q 85

Quality（画質）

0 ～ 100

• 100 = 最高画質
• 80〜85 = ブログ画像では非常におすすめ
• 75 = 容量重視
• 60以下 = かなり劣化が見え始める

写真なら80前後がよく使われます。

イラストなら85くらいから試すのがおすすめです。

-m 6

Method（圧縮アルゴリズム）

0 ～ 6

これは

画質ではありません。

圧縮にどれだけ時間をかけるかです。

画質は同じです。

違うのは

容量

だけです。

なので

常に6がおすすめです。

-mt

Multi Thread

CPUを全部使います。

MacBookなら

8コア
10コア
12コア

全部使います。

付けない理由がありません。

cwebp … "$f" -o "$tmp"

出力ファイル

-o output.webp

という意味です。

現在のファイル

↓

一時ファイル

へ変換しています。

つまり

manga01.webp

↓

manga01.tmp.webp

です。

&&

これはシェルでよく使います。

意味は

前が成功したら次を実行する

例えば

mkdir test && cd test

なら

mkdir成功

↓

cd

です。

もし

mkdir失敗

なら

cd

は実行されません。

&&

これはシェルでよく使います。

意味は

前が成功したら次を実行する

例えば

mkdir test && cd test

なら

mkdir成功

↓

cd

です。

もし

mkdir失敗

なら

cd

は実行されません。

mv "$tmp" "$f"

mv

つまり

Move（移動）

です。

でも同じフォルダなので、

実際は

名前変更

になります。

つまり

manga01.tmp.webp

↓

manga01.webp

になります。

結果的に

元ファイルが置き換わります。

done

繰り返し終了です。

libavifとは?

GitHub - AOMediaCodec/libavif: libavif - Library for encoding and decoding .avif files

libavif - Library for encoding and decoding .avif files - AOMediaCodec/libavif

github.com

AOMediaCodecは、そうそうたるメンバーが集まった団体のようですね。

次のサイトのフッター部にGitHUBのリンクがあります。

Members

An Alliance of Global Media Innovators

aomedia.org

代表的なメンバーには

• Google
• Apple
• Microsoft
• Amazon
• Meta
• Netflix
• Intel
• NVIDIA

などが参加しています。

libavifのインストール

brew install libavif

入るもの。

• avifenc
• avifdec

など。

libavifの使い方

WebPからAVIFに変換しようとしたらエラーがでました。

Homebrew Formula が WebPの読み込みをサポートしていないためです。

少し調査してみると、ビルド時のオプションで対応できるようですが、少々、面倒そうだったのでPNGからAVIFに変換することにしました。

avifenc -q 50 -s 4 -j all manga01.png manga01.avif

-q 50

画質を指定します。

0 ～ 100

• 100 = 最高画質
• 60 = 高画質
• 50 = GoogleやNetflixなどでもよく使われる実用的な設定
• 40 = 容量重視

WebPとはスケールが異なるため、WebPの85 ≒ AVIFの50前後と考えてください。

-s 4

圧縮速度です。

0 ～ 10

cwebp の -m に近い役割です。ただし数値の向きは逆で、avifenc の -s は「小さいほど低速・高圧縮」、cwebp の -m は「大きいほど低速・高圧縮」です。

4 をおすすめします。

-j all

CPUを全部使います。

cwebp の

-mt

に相当します。

manga01.png

入力ファイルです。

manga01.avif

出力ファイルです。

libavifで一括変換の方法

for f in *.png; do avifenc -q 50 -s 4 -j all "$f" "${f%.png}.avif"; done

for f in *.png;

このフォルダにある すべての PNG を1枚ずつ処理します。cwebpの場合と同様です。

"${f%.png}.avif"

例えば

manga01.png

↓

manga01

↓

manga01.avif

になります。

つまり

拡張子だけ .avif に変えているわけです。

ご参考になれば幸いです。