PNG・JPG・WebP: どの画像形式を使うべき?

まとめ

JPG

JPGは、ほとんど気づかない細部を省くことで写真をとてもよく圧縮します。透明には対応しておらず、保存を繰り返すと少しずつ画質が落ちます。どの端末やサイトでも使えます。

PNG

PNGはロスレスで、すべてのピクセルが正確に残り、透明にも対応しています。スクリーンショットや輪郭のはっきりした図に最適ですが、写真をPNGにするとJPGの数倍の大きさになります。PNGを圧縮なら、色数を減らして図を大きく小さくできます。

WebP

GoogleのWebPは、同じ画質ならたいていJPGより25〜35%小さく、透明とアニメーションにも対応しています。最近のブラウザはすべて表示できますが、古いアプリやアップロードフォームには受け付けないものもあり、その場合はWebPをJPGにで解決できます。

AVIF

AVIFはさらに新しく、もっと小さくなります。最近のChrome、Edge、Firefox、Safariでは開けますが、まだ多くのソフトでは開けません。

HEIC

HEICはiPhoneが写真を保存する形式です。JPGの約半分の大きさですが、Windowsや多くのサイトはそのままでは開けません。HEICをJPGにで変換できます。

GIF

GIFは256色までなので、写真より簡単なアニメーションに向いています。動画から作るなら、動画をGIFにがクリップごとに最適な256色を選びます。

同じ画像を各形式で保存すると

1200 × 800の画像での目安です。中身によって上下します。

写真はなめらかな階調なので、JPGやWebPがよく縮みます。スクリーンショットは輪郭がはっきりして色数が少なく、PNGはそれをそのまま保存し、JPGはにじませます。

よくある間違い

• 写真をPNGで保存する。見た目は変わらないのにファイルは10倍になります。PNGは図版と透過用に取っておいてください。
• JPGを何度も保存し直す。保存のたびに少しずつ劣化します。元のファイルを残し、そこから編集して、毎回新しいJPGを書き出してください。
• JPGで透過が残ると思う。JPGに透過はなく、透明だった部分は黒か白になります。PNGかWebPを使ってください。
• 申請フォームにWebPやHEICを出す。JPGかPNGしか受け付けないフォームが多いです。拡張子を書き換えても中身は変わらないので、変換してください。