jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

  • button only@2x jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

thumb jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

web上で使われている画像ファイルには、
主にjpg,png,gifといった形式があることはご存知かと思います。

でも、それらのファイル形式の違いや、
正しい使い分け方を知ってますか?

いろんなブログを見てみると、
意外と使い分けできていない人が多いように感じたので、
画像形式の最適な使い分け方についてまとめてみました。

「ブログ書いてるけど、jpgとかpngとかって何か違いあるん?」って人は、
この記事、要チェックです。

jpg,png,gif の 大まかな使い分け方を4行で

  • 写真,グラデーションのある画像など、色数が多い場合 → jpg
  • PC画面キャプチャ,図表,線画など、色数が少ない画像の場合 png
  • 画像ファイルサイズを気にせず、画質重視の場合 → png
  • gifpngの代わりに使うと良い場合もあるが、今はあまり使われてない。

細かい解説は抜きにして、 使い分け方を4行で、
大まかに解説するとこうなります。

分かりやすい画像で見る jpg png gif の違い比較

webページのキャプチャの場合

このブログの記事 最速最短で成果を出すための1つの絶対必要条件 の
キャプチャ画像で 各種画像形式を比較してみます。

nns capture jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg形式 画質100(最高画質) / ファイルサイズ:62KB

nns capture png24 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
png形式 (png32) / ファイルサイズ:12KB

nns capture jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
gif形式 / ファイルサイズ:9KB

jpg形式最高画質で出力していますが
特に赤文字の部分が劣化して汚くなっているのが、
ハッキリわかりますよね。

しかも、pnggifの場合よりも、
ファイルサイズが大きくなっています。
良いことが一つもありあません。

このようなシンプルで色数が少ない画像の場合は、
jpg形式を使うべきではありません。
pnggifを使いましょう。

gifpngの違いは、この画像ではほとんど分からないと思います。

写真の場合

写真素材 足成:ピクニック より
色数がそこそこ多い普通の写真の場合で比較してみます。

jpg画質の数値はPhotoshop CC での「Web用に保存」のものですが、
他の画像編集ソフトでも大体同じようになるはずです。

f0e9816eca47d8498fb668c163c31e6e jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg形式 画質100(最高画質) / ファイルサイズ:92KB

fcf62890950d9f6a27fda3b29a82352d jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg形式 画質60 / ファイルサイズ:31KB

8d553e4b3a0c67717c2fd90f0d572c30 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg形式 画質30 / ファイルサイズ:16KB

b0b85fd84bbb09482c5111098a801db2 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg形式 画質0(最低画質) / ファイルサイズ:8KB

9934bb7da699ef23e23d0bd4d2c6ae71 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
png形式 (png32) / ファイルサイズ :182KB

b07f015fefd97769ba80f421f2b1cbf2 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
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形式でもファイルサイズをそこそこ小さくできていますが、
左下のバッグの赤い部分などをよく見てみると、
ノイズが発生していたりと、キレイに表現できてません。

グラデーションがあり、色数が多い画像の場合

カラーチャートの場合、どうなるか比較してみます。

8318b7b1d0049e4242079e7861945e75 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
jpg(画質60) / ファイルサイズ:11KB

 

868c4538dcc73fd28ea7ec904caef4ca jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 png(png24) / ファイルサイズ:22KB

868c4538dcc73fd28ea7ec904caef4ca jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方
gif / ファイルサイズ:44KB

このような画像の場合も、jpgが一番適しています。

しかし、gif256色しか扱えないので、
このように色数が多い画像だと正確に表現できず
ノイズが目立ってしまいます。

一方で、jpg,png16777216色(256x256x256)を扱えるため、
このようなグラデーションもキレイに表現できます。

以下、各種画像形式の
特徴,メリット,デメリットのちょっと細かい解説です↓

jpgの特徴と メリット/デメリット

jpg 2 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

◆メリット

  • 比較的高画質で、画像ファイルサイズを小さくできる。

◆デメリット

  • 画像が粗くなり、ノイズが出る(特にwebページのキャプチャや、図形など)
  • 画質が確実に劣化する。

◆特徴

人間の目には判別しにくいように画像を圧縮することで、
画質を維持したまま、画像容量を小さくすることができます。

転送量やページの表示速度を高めるために、
ブログやwebサイトに画像を載せる時には、
基本的にはjpg形式の画像を使うことをおすすめします。

ただし、たとえ画質を最高に設定しても、
PC画面のキャプチャ図表線画 など、
輪郭がシャープな画像の場合、ノイズが目立ってしまいます。
(jpgの圧縮プログラムの特性のため)

そのような場合は、png形式を使うことをおすすめします。

pngの特徴と メリット/デメリット

png 36 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

◆メリット

  • 画質が全く劣化しない
  • 透明・半透明の画像も扱える
  • シンプルな画像の場合、jpgよりもファイルサイズが小さくなる

◆デメリット

  • 画像ファイルサイズが大きくなりがち(特に写真などの場合)

◆特徴

画質を全く劣化させない画像形式です。

画像の容量を気にしないで、
画質を重視する時や、シンプルで色数の少ない画像の場合に使います。

jpgよりファイルサイズが大きくなる事が多いですが、
場合によっては、jpgよりファイルサイズを小さくできます。

PC画面のスクリーンショットを撮る時や、編集の途中で保存する時など、
web上にアップロードする前は、必ずpng形式で保存しておきましょう。

途中でjpg形式にしたりすると、
たとえ最高画質にしても劣化してしまうので。

gifの特徴と メリット/デメリット

gif 7 jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

◆メリット

  • シンプルな画像の場合、ファイルサイズを小さくできる
  • 透明な画素も使える
  • アニメーションgifとしても使える

◆デメリット

  • 256色しか使えないので、色数の多い写真などには不向き

◆特徴

pngと似ていますが、
一つの画像で色を256色しか使用できません。

そのため、色数が多い写真グラデーションなどは
キレイに表現することができません。

シンプルで色数が少ない画像の場合は、
png形式よりファイルサイズを若干小さくできることもありますが、
実際のところ、あんまり変わらないです。

webデザイナーの仕事として、
画像のファイルサイズを極限まで減らしたい場合は別ですが、

通常のブログの場合は、
gifを使う必要は無いです。pngで十分です。

また、256色という制限はありますが、
gifアニメーションというちょっとした動画も作れます。

まとめ

大事なことなのでもう一度
画像形式の最適な使い分け方を4行で

  • 写真,グラデーションのある画像など、色数が多い場合 → jpg
  • PC画面キャプチャ,図表,線画など、色数が少ない画像の場合 png
  • 画像ファイルサイズを気にせず、画質重視の場合 → png
  • gifpngの代わりに使うと良い場合もあるが、今はあまり使われてない。

とりあえず、↑この4つ抑えておけば間違いないはずです。

保存時の設定をちょこっと変えるだけで、
画像のファイルサイズを抑えつつ、キレイに表示できるので、
ぜひとも覚えておきましょう!

この記事では、なるべく簡単に解説するため、
画像形式についての細かい話はだいぶ割愛しています。

技術的な話など、もっと細かい話について知りたい方は
以下の記事も参考になります。

「いいね!」「フォロー」「RSS購読」で最新情報をチェック!
応援していただけるとブログ更新の励みになります。


follow us in feedly
このボタンについて
にほんブログ村 ライフスタイルブログ 自由人へ
  ↑応援ポチもよろしくです↑

“jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方” への11件のフィードバック

  1. さいぞう より:

    画像の微妙なにじみとか
    こういった細かい部分ってめちゃ気になりますよね。
    でも、拡張子で解決できるとは知りませんでした。

    • せーや より:

      さいぞうさんコメントありがとうございます!
      これ、画像扱う人にはかなり基本的な事なんですが、以外とみんな知らない事なんですよね^^;
      高画質にしたいなら、とりあえずpngで。
      大量にアクセスが集まるトレンドブログとかで、容量気にする必要がある場合はjpgを使うのもアリってところです。

  2. […] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]

  3. […] JPEGのグラデーション画像 GIFのグラデーション画像 参照:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]

  4. マロン より:

    すごくわかりやすかったですう。

    このページはpdfで印刷・保存しました。
    m(_ _)m ありがとうございます

  5. PP より:

    参考になりました!
    画像によって使い分けさせてもらいます!

  6. […] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]

  7. […] く知りたいというのであればこちらの記事が参考になります。 […]

  8. […] しょう。 参考:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]

  9. […] 参考:jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 […]

  10. […] jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方 WEBの画像の話【保存形式】JPG?PNG?GIF?それぞれの違いって?【拡張子】 […]

JPEGとPNGブログで使うならどっち?まとめ にコメントする

このページの先頭へ