file-extension

WordPressブログ運営

jpg・png・gifとは?もう迷わない!画像ファイル形式の超簡単な選び方【初心者向け】

更新日:

「画像を保存するときって、画像ファイル形式が『.jpg』とか『.png』とかいろいろあって迷う…」

「むずかしいことはわからないから、『こんな画像を保存するときは○○○!』って簡単に選ぶコツだけ知りたいな」

画像を保存するときのファイル形式って、地味に迷いますよね。実は超簡単なコツがあります。

この記事では、

  • .jpgとは?.pngとは?.gifとは?
  • 画像ファイル形式の超簡単な選び方

について、わかりやすく見ていきます。

初心者向けな内容です。

「.jpg(.jpeg)」とは?こんなときに活躍!

「.jpg」は、最も代表的なファイル形式の一つで、読み方は「ジェイペグ」です。

ちなみに「.jpg」と「.jpeg」は、ほぼイコールと考えて大丈夫です。

「.jpg」のメリット

  • 1670万色と豊富な色数を扱えるので、色彩が鮮やか ⇒ 写真の保存に◎
  • 肉眼では判別しづらいレベルで圧縮しているため、容量を抑えつつ綺麗に表示できる

「.jpg」のデメリット

  • 保存を繰り返す度に、画質が劣化する(「不可逆圧縮」という特性。一度圧縮した画像は元には戻せないということ)。
  • シンプルなロゴやイラストなど「輪郭がハッキリしている」画像の場合、ノイズ(にじみ)が発生する。
  • 特にシンプルなロゴやイラストなど、保存を繰り返すと「ノイズ(にじみ)」が悪化して画質の劣化につながる。
  • 対象部分を切り抜いて、背景を「透明化」することができない。

「.jpg(.jpeg)」に向いている使用例:高画質な写真

↓の画像は「.jpg」形式で保存した写真です。普通に使う分には十分な画質です。

file-extension_04

画像はクリックで拡大されます

「.jpg(.jpeg)」に向いていない使用例:シンプルなイラスト

↓のようなロゴを、画像編集ソフト「ペイント」で10回「新規で開いて保存」を繰り返してみると…

file-extension_02

画像はクリックで拡大されます

↓のロゴのように、全体的に色がくすんで、輪郭のノイズ(にじみ)も悪化しているのが分かります。

file-extension_03

画像はクリックで拡大されます

これが、保存を繰り返すことにより起こる画質の劣化です。

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

「.png」とは?こんなときに活躍!

読み方は「ピング」です。「.jpg」と並んで、欠かせないファイル形式となっています。

「.png」のメリット

  • 色数が最大280兆色と超豊富(ビット数によっても変わる)。
  • 保存を繰り返しても画質が劣化しない(「可逆性圧縮」という特性。圧縮した後でも、圧縮前の状態に戻すことができる)。
  • 対象部分を切り抜いて、背景を「透明化」することができる。

「.png」のデメリット

  • 写真などの高画質な画像を保存すると、容量が非常に大きくなる。

「.png」に向いている使用例①:シンプルなイラスト

写真などではなくイラスト画像なら、容量が重くなりがちな「.png」でも全然軽く済みます。

「.png」に向いている使用例②:画像背景を透明化して、別の背景画像と重ね合わせる場合

例えば↓のようなグレーの背景に…

file-extension_09

画像はクリックで拡大されます

↓のような白地背景ロゴを重ねると…

file-extension_10

画像はクリックで拡大されます

白地背景ロゴをあらかじめ透明化していない場合、↓のように白地背景が残った状態で重なってしまいます。

file-extension_11

画像はクリックで拡大されます

でも、白地背景ロゴをあらかじめ透明化しておけば、↓のようにロゴ部分のみをグレー背景に載せることができます。

file-extension_12

画像はクリックで拡大されます

ちなみに…

「イラストの背景を透明化する方法」についてまとめています。

↓↓↓

transparent-background
GIMP2で画像背景を透過(透明化)する方法を優しく解説します【初心者向け】

続きを見る

「.png」に向いている使用例③:高画質写真を除く、WEBページのスクリーンショット

↓のようにシンプルな画面のスクリーンショットであれば、「.png」でも「.jpg(.jpeg)」とほとんど変わらない容量で保存できます。

file-extension_08

画像はクリックで拡大されます

「.png」に向いていない使用例:高画質な写真

「.png」は、色数が圧倒的に豊富であるという特徴から、一見すると「高画質写真に最適」と思いがちです。

でも、高画質に表現できるからこそ、高画質写真の保存で使うと容量が跳ね上がります。

裏を返せば、「この写真は、容量を気にせずとにかく高画質で保存したい!」というときは、「.png」がおすすめです。

「.gif」とは?こんなときに活躍!

読み方は「ジフ」です(実際は大体「ギフ」と呼ばれています)。

「.jpg」と「.png」の2つに比べると、一般的には登場シーンは少ないですが、「アニメーション用」のファイル形式として広く認知されています。

「.gif」のメリット

  • 簡単なアニメーションを扱える。
  • 容量が抑えられる。

「.gif」のデメリット

  • 扱える色数が256色と少ない。

「.gif」に向いている使用例:簡単なアニメーション

「.gif」と言えば、まずイメージするのは簡単なアニメーションだと思います。

「.gif」に向いていない使用例:高画質な写真・アニメーション

単純に、扱える色数が「.png」や「.jpg」と比べて非常に少ないためです。

画像ファイル形式の超簡単な選び方

簡潔にまとめると、

  • 写真などの高画質な画像:「.jpg」
  • ロゴなどのシンプルなイラスト画像:「.png」
  • 簡単なアニメーション:「.gif」

このようになります。

そして、3つの画像ファイル形式の特徴としては

  • 「.jpg」 ⇒ 色数はそこそこ多いが、画像のなかでは容量も軽く済む。
  • 「.png」 ⇒ 色数が非常に多いので、画像のなかでは容量が重たい。
  • 「.gif」 ⇒ 色数が非常に少ないので、アニメーションのなかでは容量も非常に軽く済む。

このようになります。

最後に結論としては、

  • 「.jpg」は(特にイラストなどの場合)保存を繰り返すと輪郭がにじんでいくため、何回も「描き直して保存」とかをするなら最初から「.png」に変換した方が良い。
  • 「.png」は、保存を繰り返しても輪郭がにじんだりはしない。
  • そもそもイラスト画像なら「.png」でも容量は全然軽く済むので、結論としてイラストなら「.png」が無難。写真なら「.jpg」。基本これでOK。
  • 画像背景などを透過(透明化)処理したい場合、「.jpg」は透過処理に対応していないので「.png」を使うのが一般的。

こんな感じです。

もちろん専門的な部分にこだわり出したらもっと複雑になるとは思いますが、一般的に使う分には上記ポイントを押さえれば実用範囲としては十分です。

おしまい♪

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

この記事を書いている人

まる

丸10年の会社員生活から独立して、WEB業界でフリーランスをやってます。このブログでは、

・『WordPressブログ』の初心者向けマニュアル

・大好きな『東野・岡村の旅猿』ネタ

この2つを中心に発信しています。

↓↓↓ 記事を気に入って頂けたらぜひシェアをお願いします♪

-WordPressブログ運営

Copyright© MAL LiFE LOG , 2018 All Rights Reserved.