JPG・PNG・WebP・AVIF、どれを使う？同じ画像で比べてみました
作成 · 更新 · 運営者（個人）
ブログに載せる写真は小さくしたいのに、応募書類はJPGしか受け付けない、ということはありませんか？答えは使う場所によって変わります。提出用はJPG、Web用はWebPから選び、透明な背景をくっきり残したいときはPNGを使ってみましょう。
今回の画像では、どれがよかったですか？
MiruKitで保存した結果、WebPは68.9KB、JPGは106.9KBでした。WebPのほうが35.5%小さく、元の画像との差を測るPSNRはJPGより約0.5dB低い値でした。この画像をWebに載せるなら、容量の面で有利なWebPをまず選びます。下の同じ位置の拡大図を見て、文字や線に問題がないか確認してください。
AVIFは145.5KBと2つの形式より大きくなりましたが、PSNRは最も高い値でした。PNGは830.0KBで、ピクセルは元の画像と同じです。そのため今回の結果では、小さなWeb用のファイルならWebP、ピクセルをそのまま残すファイルならPNG、という選び方がはっきりします。提出先がJPGを求めているなら、JPGで保存してください。
何を同じ条件にそろえましたか？
自分で描いた1600×1000の画像1枚に、グラデーション・細かな模様・図形・文字を入れて比べました。JPG・WebP・AVIFの画質設定はすべて85、PNGは色数を保ったままです。85という数値の意味は形式ごとに違うので、表では実際の容量と元の画像との差をあわせて読んでください。
PSNRは元のサイズのすべての色の値を比べた数値で、大きいほど元の画像に近いことを示します。人の目にとって大事な文字や髪の毛は、拡大図で直接見てください。Webページに置くときの大きさでも一度見ておくと、保存容量と見た目の画質のバランスを選びやすくなります。
提出用には、なぜJPGからすすめるのですか？
JPGは写真の添付によく使われ、古いソフトでも開きやすい形式です。応募書類のように使える形式が決まっている場合は、その一覧に合わせて選びましょう。透明なロゴをJPGに変えるときは、空いた部分を埋める背景色を先に確認する必要があります。
JPGで保存するときは、まず標準の画質で一度比べ、容量の制限があれば目標のサイズを入力してください。小さな文字がぼやけたり、輪郭のまわりにノイズが出たりしたら、サイズを少し小さくした候補もあわせて見ましょう。すでに小さいJPGを編集せずに使えるなら、そのまま送るのがいちばん簡単です。
PNGが向いているのはどんな画像ですか？
ロゴ、図表、スクリーンショットのように、線や文字が大事な画像から考えてみましょう。色数を保ったPNGは今のピクセルをそのまま保存し、透明な背景も含められます。今回の画像のようにグラデーションや模様が多いとファイルが大きくなることがあるので、Web用のコピーと保管用を分けておくと便利です。
透明な輪郭は、明るい背景と暗い背景の両方に置いて確認してください。白い文字や半透明の影は、片方の背景だけで見ていると見落としがちです。容量のために色数を減らした場合は、なめらかな背景が段々に分かれていないか、小さな文字の輪郭がどうなっているかも見てみましょう。
WebPとAVIFはどう比べればいいですか？
Webに載せる写真なら、まずWebPのコピーを作り、載せるサービスで開いてみましょう。AVIFも同じ画像で保存し、容量・見た目・待ち時間を比べます。今回のようにAVIFのほうが大きくなる場合は、その分の細部の違いが必要かどうかを見て選べます。
複数枚を処理するときも、1枚で設定を決めておくとスムーズです。風景なら木の葉と空、人物なら目と髪の毛、スクリーンショットなら小さな文字を比べるポイントにしましょう。保管する元の画像はそのままにして、掲載用のフォルダーに新しいコピーを集めておくと、形式を変え直すときに便利です。
今保存するなら、この順番で選びましょう
- 受け取る側で使える形式を確認します。書類の提出用にJPGが指定されていれば、その形式から選びましょう。
- 透明な背景や文字を生かしたいファイルはPNGを、小さなWeb用のコピーはWebPを先に比べてください。
- 保存した結果を開き直して輪郭・向き・容量を確認し、実際に載せる場所で1枚試してみましょう。
形式を決めたら、次は必要な幅・高さを合わせましょう。ファイルを何度も変換して保存するより、元の画像から必要なコピーを1回ずつ作るほうが管理しやすくなります。目的が変わったら、元の画像から別のコピーを作れば大丈夫です。
関連するツールを開くMiruKitで実際に確認した結果
| 設定 | 実際の容量 | 元の画像との近さ |
|---|---|---|
| JPG | 106.9 KB | 42.9 dB |
| PNG | 830.0 KB | 元の画像と同じ |
| WebP | 68.9 KB | 42.4 dB |
| AVIF | 145.5 KB | 44.9 dB |
PSNRは元の画像の色の値と比べた数値で、大きいほど近いことを示します。拡大図で大事な部分もあわせて見てください。容量は1KBを1,024バイトとして計算しています。
知っておきたいこと
この結果は、上のテスト画像1枚での比較です。ご自身の写真でも、大事な部分を同じ倍率で確認してください。
色数を減らしたPNGは色合いが変わることがあり、JPGをPNGに変えても、すでに失われた細部は戻りません。
動く画像や複数枚を含む入力は最初の1枚を扱うので、動き全体を残したい元のファイルは別に保管しておきましょう。