JPG・PNG・WebP・AVIF の比較

4つの形式を並べて比較

各形式が得意なこと

JPG は、細部を 8 × 8 ピクセルのブロック単位で精度を落として保存し、通常は色の情報を明るさよりも低い解像度で記録します。写真ではこれがほとんど目立ちませんが、文字やくっきりした輪郭のまわりには、モスキートノイズと呼ばれるもやのようなノイズが出ます。JPG は編集して保存し直すたびに再エンコードされ、そのたびに細部が少しずつ失われるのが普通です。品質の数値については画像圧縮設定の解説をご覧ください。

PNG は可逆圧縮で、繰り返しや予測しやすいパターンを見つけてデータを小さくします。そのため、スクリーンショット、グラフ、ロゴは小さく収まりますが、写真はそうはいきません。1,200万画素の写真には 3,600万バイト分の色の値が含まれます（4,000 × 3,000 ピクセル × 3 バイト）。カメラのノイズにはほとんど繰り返しがないため、PNG で保存すると、適切に保存した JPG の数倍の大きさになるのが一般的です。

WebP には非可逆モードと可逆モードがあり、どちらも透過に対応しています。非可逆 WebP は色の情報を縦横それぞれ半分の解像度で保存するため、細い色付きの線や赤い文字がぼやけて見えることがあります。WebP 画像は縦横どちらの辺も 16,383 ピクセルを超えられないため、非常に縦長のスクリーンショットには使えません。JPG 形式では最大 65,535 ピクセルまで扱えます。

AVIF は動画コーデック AV1 から生まれた形式です。写真では4つの中で最も効率が良いことが多く、品質を低めにしたときに特にその差が出ます。また、10 ビットや 12 ビットの色、HDR も保存できます。ただし、エンコードには一般に時間がかかり、ブラウザ以外での対応状況は WebP に後れを取っています。

実測例: 1枚のスクリーンショットから6つのファイル

1280 × 800 のダッシュボードのスクリーンショット（ベタ塗りの色、文字、棒グラフ）を描画して作成し、Python Pillow 12.3（libjpeg-turbo 3.1、libwebp 1.6、libavif 1.4）で保存しました。品質を指定する形式では、LeedyBox の変換ツールがブラウザに渡す固定値 0.92 に合わせて、品質 92 を使っています。可逆 WebP は、最も時間がかかる代わりに圧縮効果が最も高い設定で保存しました。これは合成した1枚の画像での結果にすぎません。ブラウザのエンコーダーは別の設定を使うため数値は変わり、写真では傾向も異なります。1 KB = 1,024 バイトです。

このようなフラットなグラフィックでは、JPG が最も不向きでした。サイズは2倍以上になり、しかもピクセルが元と一致しなくなります。可逆 WebP はすべてのピクセルを保ったまま最も小さくなった一方、非可逆 WebP ではほとんど小さくなりませんでした。JPG を PNG に戻しても、何も元には戻りません。PNG は JPG のアーティファクトをそのまま正確に保存しなければならず、元の PNG の4.5倍にまで膨らみました。

透明な背景の 512 × 512 のロゴでは、PNG が 31.6 KB、非可逆 WebP が透過を保ったまま 18.4 KB、AVIF が 16.6 KB、可逆 WebP が 12.7 KB でした。JPG は 25.2 KB で、透明だった部分は白い四角になりました。ここでも、最も小さいファイルになり、すべてのピクセルを保っていたのは可逆 WebP でした。

変換でできること・できないこと

• 失われた細部は戻りません。 JPG を PNG として保存しても、アーティファクトはそのまま残ります。
• 非可逆から非可逆への変換では劣化が重なります。 JPG を WebP や AVIF に変換すると、元のアーティファクトをもう一度エンコードすることになります。手元にある最も質の良い元画像から変換しましょう。
• 透過を残すには、透過を保存できる形式が必要です。 JPG にはアルファチャンネルがないため、LeedyBox の変換ツールは JPG や BMP で保存するときに透明な部分を白で塗りつぶし、柔らかい輪郭もその白と混ぜ合わせます。ロゴや切り抜き画像は PNG か WebP のままにしてください。
• 多くの場合、ピクセル数のほうが重要です。 4,000 × 3,000 の写真を 1,200 × 900 で表示すると、108万ピクセルで足りるところに1,200万ピクセルを使うことになり、約11倍の量になります。ピクセル密度が2倍の画面でも、必要なのは 2,400 × 1,800、つまり432万ピクセルだけです。画像のリサイズをご覧ください。

LeedyBox の画像変換で変換する

1. 画像変換を開き、「ファイルを選択、またはここへドラッグ＆ドロップ」をクリックするか、ボックスに画像をドロップします。PNG、JPG、WebP、BMP、GIF、AVIF のファイルを、お使いのブラウザで開ける場合に読み込めます。
2. 各ファイルは、ピクセルサイズと形式メニューとともに一覧に表示されます。形式メニューの初期値は JPG で、ほかに PNG、WebP、BMP、AVIF、ICO を選べます。ファイルごとに変更するか、「一括変換オプション:」の横にある「すべての形式を設定...」メニューで全ファイルをまとめて変更します。透過のある画像には、PNG、WebP、AVIF のいずれかを選びましょう。
3. 「変換してダウンロード」をクリックします。画像が1枚なら、元の名前に「_converted」を付けたファイル名（例: holiday_converted.webp）でダウンロードされ、複数なら leedybox_converted_images.zip にまとめて保存されます。

変換ツールは画像の縦横のピクセル数を変えません。例外は ICO で、256 × 256 ピクセルに収まるよう縮小されます。JPG、WebP、AVIF では、ブラウザに品質 0.92（0〜1 の尺度）を指定し、品質を変更する設定はありません。Chrome と Edge はこの値で非可逆 WebP を作成しますが、ほかのブラウザのエンコーダーでは動作が異なる場合があります。JPG と BMP では背景が白になります。BMP は1ピクセルあたり 24 ビットの非圧縮で保存されるため、6,000 × 4,000 の写真は 72,000,054 バイトになります。AVIF を作成できないブラウザは少なくありません。変換ツールはページを開いたときにこれを確認し、作成できない場合はその選択肢を無効にして「AVIF (このブラウザは非対応)」と表示します。

変換はブラウザ内で行われ、変換のために画像が LeedyBox に送信されることはありません。各画像は描き直されるため、EXIF データ、GPS 位置情報などのメタデータは引き継がれません。品質を指定して圧縮前後を見比べたい場合は画像圧縮（JPG、WebP、PNG に対応し、初期値 75 の品質スライダーか目標ファイルサイズを指定可能）を、縦横のサイズを小さくしたい場合は画像リサイズを使いましょう。

用途別のおすすめ形式

ウェブページ用の画像については、ウェブに適した画像形式の選び方もご覧ください。

よくある問題と対処法

• 透明な背景が白くなった。 出力形式が JPG（最初に選択されている形式）か BMP でした。PNG、WebP、AVIF のいずれかでもう一度変換しましょう。
• ファイルが大きくなった。 写真や JPG を PNG で保存した場合や、非圧縮の BMP で保存した場合によく起こります。写真には JPG か WebP を使うか、元のファイルをそのまま使いましょう。
• AVIF を選択できない。 お使いのブラウザは AVIF を作成できません。WebP を選ぶか、別のブラウザを試しましょう。
• ZIP の中のファイルが、追加した数より少ない。 WebP に変換すると、logo.png と logo.jpg はどちらも logo_converted.webp になり、後のファイルが先のファイルを上書きします。先にどちらかの名前を変更しましょう。
• 何もダウンロードされなかった。 選んだ形式をブラウザが作成できない場合、そのファイルの変換は失敗します。WebP を作成できないブラウザもあり、また WebP 形式では幅または高さが 16,383 ピクセルを超える画像は扱えません。非常に大きな画像は、ブラウザが扱えるキャンバスのサイズを超えてしまうこともあります。一括変換では、1つのファイルが失敗すると、ZIP が作成される前に変換ツールが停止します。そのファイルの形式を変更するか、一覧から削除しましょう。
• アニメーションが静止画になった。 残るのは1フレームだけで、通常は最初のフレームです。

変換後に確認すること

• 結果を等倍で表示し、文字、輪郭、顔、グラデーションを確認しましょう。
• ファイルサイズを比べ、新しいファイルが小さくなっていなければ元のファイルを残しましょう。
• 透過のある画像は、明るい背景と暗い背景の両方で確認しましょう。
• 実際に使う場所でファイルを試しましょう。メールソフトやアップロードフォームによっては、WebP や AVIF を受け付けないことがあります。

よくある質問