用途に合わせて画像形式を選ぶ
公開日 · 更新日 読了目安 1分
JPG、PNG、WebP、AVIFは、同じ画像に向いているわけではありません。選び方は、画像に写っているもので決まります。写真か、文字のあるスクリーンショットか、透明な背景のロゴか。
リファレンスが述べること
MDNのドキュメントによると、JPEGは写真に向き、くっきりした図には向きません。PNGはすべてのピクセルを正確に保ち、スクリーンショット、図表、ロゴに向きます。WebPは両方より高く圧縮でき、透明にも対応します。AVIFはさらに高く圧縮でき、透明にも対応します。
同じ画像を4つの形式で
テストには3つの自作画像を使いました。写真に近い2,400 × 1,600ピクセルの場面、1,400 × 900ピクセルのスクリーンショット、900 × 900ピクセルの透明なロゴで、どれも最初はPNGです。
| 画像 | 元のPNG | JPG | WebP |
|---|---|---|---|
| 写真 | 2,36 MB | 1,08 MB | 1,02 MB |
| スクリーンショット | 67 KB | 115 KB | 49 KB |
| 透明なロゴ | 9 KB | 35 KB（白い背景） | 14 KB（透明を保持） |
ここから分かること
写真では、JPGとWebPでサイズが半分以下になります。スクリーンショットやロゴでは、JPGは元のPNGより重くなり、リファレンスもくっきりした縁には勧めていません。PNGかWebPのほうが向いています。PNGをもう一度PNGに変換しても軽くはなりません。写真は2.36 MBから3.28 MBになりました。
AVIF
AVIFの書き出しはブラウザに依存します。使えない場合、ツールはそう伝え、ファイルは作りません。
確認する
- 得られたサイズを元のサイズと比べます。
- 拡大して、文字の縁とグラデーションを見ます。
- 元の画像は取っておきます。
どの形式がどこでも読めるかは、どこでも使える画像形式はどれかをご覧ください。