【結局どっちがいいの？】JPEG形式（.jpg・.jpeg）とPNG形式（.png）の違いを正しく理解して、使い分けよう！

こんにちは。
GOSHIMMERです。

今回は、Webデザインでもよく使用する画像フォーマットJPEG形式とPNG形式について正しく理解したうえで、最適な方を選べるように解説します！

Webサイトに利用される、画像フォーマットって何？

【結局どっちがいいの？】JPEG形式（jpg）とPNG形式（png）の違いを正しく理解して、使い分けよう！

Webサイトに利用される画像フォーマットとは、主に「JPEG形式」、「PNG形式」、「GIF形式」があります。
今回はその中でもよく利用し、どちらを使えばいいのか迷いやすい、「JPEG形式」と「PNG形式」にフォーカスして説明していきます。

JPEG形式とは

JPEG形式とは、静止画像データの圧縮方式の一つです。一度画像を圧縮した状態で保存してしまうと、元に戻せない「非可逆圧縮」方式を採用しているのが大きな特徴です。
非可逆圧縮とは、劣化を伴う代わりに、小さなデータへ圧縮することができ、保存するときに圧縮率を設定することができます。
24Bit（1,677万色）のフルカラーを表現することができるので、色にグラデーションがあったり、色の情報が多い、写真などに向いています。
また、JPEG形式の画像には、「.jpg」「.jpeg」という拡張子があります。

「.jpg」「.jpeg」って何が違うの？

結局「.jpg」と「.jpeg」は何が違うのって話ですが、機能面での違いはありません。
なぜ、二つ拡張子が存在しているのかというと、1980年代に普及していた、「MS-DOS」というOSの仕様が関係しています。
「MS-DOS」では拡張子は3文字までという制約があり、「.jpg」という拡張子が長年使用されていました。
しかし、現在のOSでは3文字までという制約がなくなり、「.jpeg」と表記されるようになりました。
ただ、「.jpeg」という拡張子はまれにエラーが起こることもあり、「.jpg」の拡張子の方が多く普及されています。

拡張子の大文字と小文字はどちらを使う方がいいの？

こちらもよく見かける2パターンですが、大文字の「.JPG」と、小文字「.jpg」はどちらがいいのでしょうか。
大文字の「.JPG」という拡張子は、デジタルカメラなどで撮影した画像などによくあるパターンです。
写真自体を表示させる、PCやスマートフォンで直接見るなどの場合は、どちらであっても全く問題ありませんが、Webサイトで表記する場合は注意が必要です。
Webサイトを表示させるためのサーバー（レンタルサーバーなど）では、大文字と小文字を区別するLinux系のコンピュータが使われているからです。
大文字と小文字が混同してしまう事で、ローカル環境で表示されても、サーバーにUPすると表示されないなんてことも起こりえますので、
極力小文字に統一することをおすすめします。

JPEG2000ってなに？

JPEG2000はその名の通り、2000年に入ってから仲間に加わった、JPEG形式の発展版といえます。
より高い圧縮率で、ノイズを軽減させた鮮明な画像へ圧縮することが可能になりました。
ただ、主要ブラウザのほとんどが対応しておらず、Webデザインにおいてはあまり使われることがありません。

PNG形式とは

PNG形式も、画像データを圧縮して記録するファイル形式の一つです。ビットマップ画像を「可逆圧縮」できるのが大きな特徴です。
可逆圧縮は、「ロスレス圧縮」とも呼ばれますが、保存するときにデータを欠落させずに圧縮することができるので、解凍すると完全に元の状態に戻すことができます。
256色を扱える「PNG-8」形式と、JPEG形式同様にフルカラーを扱える「PNG-24」「PNG-32」形式があり、一部の色を透過色として指定することもできるので、グラデーションを使用した画像や、背景を透過した画像にも適しています。
拡張子には、「.png」を使用します。

「PNG-8」「PNG-24」「PNG-32」は何が違うの？

簡単に言えば、色数の違いです。
「PNG-8」は、GIFと同じく256色のみをサポートする形式のことを指します。透過もでき、ファイルサイズを小さくできるのが特徴です。
「PNG-24」「PNG-32」はフルカラーを扱える形式のことを指します。数字が上がるにつれ、より高画質になり、容量も大きくなるため、Web上では、「PNG-8」や「PNG-24」がよく使われます。

PNGはRGBの情報しか持たないので印刷物には向かない？

PNG形式の画像ファイルは、主にWebページで扱うための形式として開発されたもので、RGBでしか取り扱うことができません。
印刷物はCMYKのカラーモードで作られますので、PNGデータをそのままCMYKで扱うことはできなくなっていますので、JPEG形式などに変換する必要があります。

Webサイトにおいては、結局どっちを使えばいい？

【結局どっちがいいの？】JPEG形式（.jpg・.jpeg）とPNG形式（.png）の違いを正しく理解して、使い分けよう！
ここまでご紹介した特徴をもとに、最適な選び方を考えてみましょう。

JPEG形式（.jpg、.jpeg）	JPEG形式の画像は、色数やグラデーションが多い、写真画像に適していて、ファイルサイズを小さくすることができる。
PNG形式（.png）	色数が多い、透過させたい、文字や図形が含まれる画像。JPEGよりもファイルサイズは重くなるが、書き出し形式によって極力小さくすることができる。

簡単に言えば、自然に作られたものには「JPEG」、人工的に作られたものには「PNG」と覚えておくといいと思います。