※gifもありますが、最近はあまり見ないので割愛

この２つの基本的な使い分けはざっくり次の通りです。

[su_note note_color=”#d6d6d4″ radius=”5″]色数が多くなる写真など → jpg
色数の少ないキャプチャ画像など → png[/su_note]

これを覚えておけば基本的には大丈夫だと思いますが、一応補足を。

JPGは圧縮することでファイルサイズを小さくしやすく圧縮率も好きに設定できます。

ただし、圧縮方法が非可逆圧縮で、圧縮する度に画質が劣化していきます。

圧縮した後に、やっぱり大きいサイズで使うことになった…
なんてことになっても、サイズを拡大したら荒れて汚くなるので時すでに遅しです。

また、先程も書きましたがJPGは色数が多い画像向きなので、
キャプチャ画像などシンプルな画像にJPGを使うと、
画質が劣化したりファイルサイズがPNGより大きくなる場合が多いです。

JPGの特徴といえば、ファイルサイズを抑えられることなので、
これでは本末転倒ですね。

[su_box title=”JPGの特徴” radius=”5″]
・ファイルサイズを小さくしやすい
・圧縮率を好きに設定可能
・圧縮方法は非可逆圧縮なので後から戻せない
・シンプルな画像だと逆にサイズが大きくなることアリ
[/su_box]

PNGは比較的ファイルサイズが大きくなりやすいですが、
圧縮方法が可逆圧縮なので画質を落とさずに圧縮できます。

透明色を使った画像向きなので、キャプチャ画像やイラスト画像など、
シンプルな画像の場合はPNGでもそこまでサイズが大きくなりません。

また、PNGには24bitと8bitがあり、8bitにすることでサイズを抑えることが可能です。

[su_box title=”PNGの特徴” radius=”5″]
・ファイルサイズが大きくなりやすい（特に色数が多い場合）
・圧縮方法は可逆圧縮なので画質の劣化なし
・キャプチャ画像やイラスト画像に適している
[/su_box]

画像サイズの大きさはページの表示速度に影響するので、
なるべく小さくしておいた方が無難です。

実際に画像を圧縮して違いをチェックしてみました。

大きさもかなり大きく、ファイルサイズも相当ですが、
これをPNGとJPGでそれぞれリサイズしてみます。

JPGだと351kbまで落ちましたね。

一方、PNGの場合は同じサイズでも517kbとほぼ1.5倍です。

もう1パターンやってみました。（今度はPNGの画像を加工）

今回は画像サイズが小さめなので加工前は701kbです。

JPGに変換すると、320kbまで落ちました。

PNGだと458kbと、やはりJPGに比べると1.5倍の容量ですね。

今回は色数の多い写真画像なので、
写真を変換するならJPGの方がいいということがわかります。

画質の劣化は個人的にそこまで気にならないレベルです。

では、キャプチャ画像の場合はどうでしょう。

元の画像のサイズは321kbです。

JPGだと124kb、PNGだと93kbになりました。

さっきとは違って、PNGの方がサイズが小さくなっていますね。

このことから、やはりキャプチャ画像などはPNGの方が適しているようです。

※注意点としては、画像など色数が多いものをキャプチャした場合は、
キャプチャ画像とはいえ、JPGの方がサイズは小さくなります。

JPGがサイズを小さくしやすいから全部JPGにするというのではなく、
画像の種類によって使い分けないといけないということなのでご注意を。

なお、序盤に書いたようにJPGは圧縮する度に画質が劣化するので、
画像をいろいろ編集する場合は最終段階までPNGで編集しておきましょう。

そして、最後にWEBにアップする段階で、
画像の種類に応じてPNGかJPGに変換するかどうか判断しましょう。

Jpegファイルを一括変換したい場合は、「image tools」というアプリがオススメです。

以上です。