PNGとJPEGの違い　ーWebサイト制作での使い分けー

えんどう

【結論】：ロゴ・グラフィックはPNG。写真はJPEG

Webのポピュラーな画像形式であるPNGとJPEG。画像データを保存する際、どちらの形式で保存すればいいか悩む方や、あまり違いがよくわかっていない、という方も多いのではないでしょうか。

例えば、この記事のサムネイル画像はPNGかJPEG、どちらであるべきでしょうか？この記事ではPNGとJPEGの違いと、Web制作におけるそれぞれの適切な用途について解説していきます。

記事内に広告を含みます

PNGの特性

PNGの特徴は以下の通りです。

PNGは可逆圧縮をサポートしています。可逆圧縮では画像データを削減することなくデータサイズを減らせるため、圧縮されたPNG画像を編集して再度保存しても、画質の劣化が生じません。

ひと口にPNGと言っても色々あって、サポートしている色数によってPNG-8、PNG-24、PNG-32に分類されます。

256色で表現し、透過もできます。表現できる色数が少ない分、容量が軽いのがメリットです。

1,677万色のフルカラーを表現できますが、透過情報を持ちません。透明にすることはできますが、「透明な色を表現している」のであってPNG-8やPNG-32のような厳密な透過ではありません。フルカラーのため容量は重くなりがちです。

PNG-24をより高画質にしたものです。1,677万色フルカラーに加えて透過情報を持ちます。ファイルサイズが膨大になるためWebサイトには適しません。

PNG-8とPNG-32は完全なアルファチャンネルの透明度をサポートしており、透明な背景や透過効果を持つ画像を扱うことができます。

可逆圧縮のため、同じ画像で比較した場合、基本的にはJPEGよりも重くなります。

JPEGは非可逆圧縮であり、保存するたびに情報が削られて劣化します。劣化した画像をオリジナルに戻すことはできません。ツイッターでよくネタにされる「使い古されたガビガビの画像」はまさに非可逆圧縮の例です。

PNG-24やPNG-32と同じく1,677万色フルカラーを表現できます。

JPEGは透過情報を持ちません。保存される画像は通常、不透明な背景を持つものとして処理されます。

JPEGは非可逆圧縮であり、人間の目ではギリギリ分からない色の差異などを削除することによって大幅な容量削減を可能にしています。そのため、高品質な画像を低容量で扱うことが可能です。

PNG-8とJPEGの比較

可逆圧縮であり透過を扱えることから、PNG（PNG-8）は主にロゴやグラフィックに適しています。

対してJPEGは高画質フルカラーでありながら容量を抑えられるため、写真に適しています。

逆に言えば、写真をPNGで扱えばファイルサイズが膨大になり、ロゴやグラフィックをJPEGで扱ってしまうと粗が目立ってしまいます。用途に合った適切な拡張子を使うことが大切です。

冒頭に挙げた例で言うと、この記事のサムネイルは色数少なめのグラフィックであるため、PNGが適切です。

以上、PNGとJPEGに違いについて解説しました。