jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
web上で使われている画像ファイルには、
主にjpg,png,gifといった形式があることはご存知かと思います。
でも、それらのファイル形式の違いや、
正しい使い分け方を知ってますか?
いろんなブログを見てみると、
意外と使い分けできていない人が多いように感じたので、
画像形式の最適な使い分け方についてまとめてみました。
「ブログ書いてるけど、jpgとかpngとかって何か違いあるん?」って人は、
この記事、要チェックです。
目次
jpg,png,gif の 大まかな使い分け方を4行で
- 写真,グラデーションのある画像など、色数が多い場合 → jpg
- PC画面キャプチャ,図表,線画など、色数が少ない画像の場合 → png
- 画像ファイルサイズを気にせず、画質重視の場合 → png
- gifはpngの代わりに使うと良い場合もあるが、今はあまり使われてない。
細かい解説は抜きにして、 使い分け方を4行で、
大まかに解説するとこうなります。
分かりやすい画像で見る jpg png gif の違い比較
webページのキャプチャの場合
このブログの記事 最速最短で成果を出すための1つの絶対必要条件 の
キャプチャ画像で 各種画像形式を比較してみます。
jpg形式 画質100(最高画質) / ファイルサイズ:62KB
png形式 (png32) / ファイルサイズ:12KB
gif形式 / ファイルサイズ:9KB
jpg形式は最高画質で出力していますが
特に赤文字の部分が劣化して汚くなっているのが、
ハッキリわかりますよね。
しかも、pngやgifの場合よりも、
ファイルサイズが大きくなっています。
良いことが一つもありあません。
このようなシンプルで色数が少ない画像の場合は、
jpg形式を使うべきではありません。
pngかgifを使いましょう。
gifとpngの違いは、この画像ではほとんど分からないと思います。
写真の場合
写真素材 足成:ピクニック より
色数がそこそこ多い普通の写真の場合で比較してみます。
jpg画質の数値はPhotoshop CC での「Web用に保存」のものですが、
他の画像編集ソフトでも大体同じようになるはずです。
jpg形式 画質100(最高画質) / ファイルサイズ:92KB
jpg形式 画質60 / ファイルサイズ:31KB
jpg形式 画質30 / ファイルサイズ:16KB
jpg形式 画質0(最低画質) / ファイルサイズ:8KB
png形式 (png32) / ファイルサイズ :182KB
gif形式 /ファイルサイズ:71KB
ファイル形式とファイルサイズを表にしてみると こうなります↓
ファイル形式 | ファイルサイズ |
jpg(画質100) | 92KB |
jpg(画質60) | 31KB |
jpg(画質30) | 16KB |
jpg(画質0) | 8KB |
png | 182KB |
gif | 71KB |
このような画像の場合、jpg形式が最も適しています。
png形式にすると、
jpgの画質60と見た目はほとんど違いはないのに、
ファイルサイズが6倍にもなっています。
このような場合には、png形式を使うことはおすすめしません。
見た目がほとんど変わらないのに、
ページ表示速度が遅くなって、ユーザーに優しくない上に、
転送量も大きくなって、サーバーにも優しくないので。
画質にそれほどこだわらずに、表示速度を重視する場合は
jpgの画質60~30くらいが丁度良いかと思います。
(使用しているソフトで適切な値を指定してください)
さすがにjpgの画質0(最低画質)にすると、
初期のYoutubeの動画みたいに、かなり汚くなってしまいますので、
やめた方がいいです。
gif形式でもファイルサイズをそこそこ小さくできていますが、
左下のバッグの赤い部分などをよく見てみると、
ノイズが発生していたりと、キレイに表現できてません。
グラデーションがあり、色数が多い画像の場合
カラーチャートの場合、どうなるか比較してみます。

jpg(画質60) / ファイルサイズ:11KB
png(png24) / ファイルサイズ:22KB
gif / ファイルサイズ:44KB
このような画像の場合も、jpgが一番適しています。
しかし、gifは256色しか扱えないので、
このように色数が多い画像だと正確に表現できず
ノイズが目立ってしまいます。
一方で、jpg,pngは16777216色(256x256x256)を扱えるため、
このようなグラデーションもキレイに表現できます。
以下、各種画像形式の
特徴,メリット,デメリットのちょっと細かい解説です↓
jpgの特徴と メリット/デメリット
◆メリット
- 比較的高画質で、画像ファイルサイズを小さくできる。
◆デメリット
- 画像が粗くなり、ノイズが出る(特にwebページのキャプチャや、図形など)
- 画質が確実に劣化する。
◆特徴
人間の目には判別しにくいように画像を圧縮することで、
画質を維持したまま、画像容量を小さくすることができます。
転送量やページの表示速度を高めるために、
ブログやwebサイトに画像を載せる時には、
基本的にはjpg形式の画像を使うことをおすすめします。
ただし、たとえ画質を最高に設定しても、
PC画面のキャプチャ、図表、線画 など、
輪郭がシャープな画像の場合、ノイズが目立ってしまいます。
(jpgの圧縮プログラムの特性のため)
そのような場合は、png形式を使うことをおすすめします。
pngの特徴と メリット/デメリット
◆メリット
- 画質が全く劣化しない
- 透明・半透明の画像も扱える
- シンプルな画像の場合、jpgよりもファイルサイズが小さくなる
◆デメリット
- 画像ファイルサイズが大きくなりがち(特に写真などの場合)
◆特徴
画質を全く劣化させない画像形式です。
画像の容量を気にしないで、
画質を重視する時や、シンプルで色数の少ない画像の場合に使います。
jpgよりファイルサイズが大きくなる事が多いですが、
場合によっては、jpgよりファイルサイズを小さくできます。
PC画面のスクリーンショットを撮る時や、編集の途中で保存する時など、
web上にアップロードする前は、必ずpng形式で保存しておきましょう。
途中でjpg形式にしたりすると、
たとえ最高画質にしても劣化してしまうので。
gifの特徴と メリット/デメリット
◆メリット
- シンプルな画像の場合、ファイルサイズを小さくできる
- 透明な画素も使える
- アニメーションgifとしても使える
◆デメリット
- 256色しか使えないので、色数の多い写真などには不向き
◆特徴
pngと似ていますが、
一つの画像で色を256色しか使用できません。
そのため、色数が多い写真やグラデーションなどは
キレイに表現することができません。
シンプルで色数が少ない画像の場合は、
png形式よりファイルサイズを若干小さくできることもありますが、
実際のところ、あんまり変わらないです。
webデザイナーの仕事として、
画像のファイルサイズを極限まで減らしたい場合は別ですが、
通常のブログの場合は、
gifを使う必要は無いです。pngで十分です。
また、256色という制限はありますが、
gifアニメーションというちょっとした動画も作れます。
まとめ
大事なことなのでもう一度
画像形式の最適な使い分け方を4行で
- 写真,グラデーションのある画像など、色数が多い場合 → jpg
- PC画面キャプチャ,図表,線画など、色数が少ない画像の場合 → png
- 画像ファイルサイズを気にせず、画質重視の場合 → png
- gifはpngの代わりに使うと良い場合もあるが、今はあまり使われてない。
とりあえず、↑この4つ抑えておけば間違いないはずです。
保存時の設定をちょこっと変えるだけで、
画像のファイルサイズを抑えつつ、キレイに表示できるので、
ぜひとも覚えておきましょう!
この記事では、なるべく簡単に解説するため、
画像形式についての細かい話はだいぶ割愛しています。
技術的な話など、もっと細かい話について知りたい方は
以下の記事も参考になります。
画像の微妙なにじみとか
こういった細かい部分ってめちゃ気になりますよね。
でも、拡張子で解決できるとは知りませんでした。
さいぞうさんコメントありがとうございます!
これ、画像扱う人にはかなり基本的な事なんですが、以外とみんな知らない事なんですよね^^;
高画質にしたいなら、とりあえずpngで。
大量にアクセスが集まるトレンドブログとかで、容量気にする必要がある場合はjpgを使うのもアリってところです。
[…] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]
[…] JPEGのグラデーション画像 GIFのグラデーション画像 参照:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]
すごくわかりやすかったですう。
このページはpdfで印刷・保存しました。
m(_ _)m ありがとうございます
参考になりました!
画像によって使い分けさせてもらいます!
[…] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]
[…] く知りたいというのであればこちらの記事が参考になります。 […]
[…] しょう。 参考:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]
[…] 参考:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]
[…] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 WEBの画像の話【保存形式】JPG?PNG?GIF?それぞれの違いって?【拡張子】 […]
[…] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 – 全力ネオニート […]