PNG vs JPG

PNGは可逆圧縮を使うため、すべてのピクセルを完全に保持します。JPGは非可逆圧縮を使い、一部のデータを破棄してファイルを小さくします。写真ではその画質差に気づきにくいことが多いですが、エッジの鮮明なグラフィックスや文字では、PNGのほうが明らかにきれいです。

PNGは可逆圧縮のため、データが破棄されません。一方JPGは、人の目では気づきにくい視覚情報を取り除くことでファイルを小さくします。そのため写真の場合、JPGファイルは同等のPNGより通常50–80%小さくなります。

JPGは非可逆圧縮を使うため、PNGからJPGに変換すると多少の画質低下が生じます。ただし、高品質の設定(90–95%)なら、写真では違いにほとんど気づかないのが一般的です。なお、JPGは透過に対応していないため、透過部分は失われます。

コンテンツによって異なります。写真にはJPGを使うと、ページの読み込みを速く保てます。透過やくっきりしたエッジが必要なロゴ、アイコン、グラフィックスにはPNGを使いましょう。両方の長所を求めるなら、どちらよりも圧縮率の高いWebPも検討してください。

標準のPNGはアニメーションに対応していません。ただし、拡張仕様のAPNG(アニメーションPNG)なら、完全なアルファ透過つきのアニメーションが可能です。ブラウザの対応はGIFより限られています。

最新のWebプロジェクトでは、PNGやJPGより圧縮率の高いWebPやAVIFを検討しましょう。拡大縮小が必要なロゴやアイコンにはSVGを使います。アニメーションにはGIFまたはWebPを使いましょう。