主要な画像ファイルには大きく分けてJPEG、PNG、GIFの3種類の拡張子があります。それぞれ特性に違いがあるので、各種拡張子のメリットやデメリット、使い分け方をご紹介いたします。

拡張子とは

拡張子とは、ファイル名の末尾についている「.jpeg」や「.png」などの英字のことです。拡張子を見れば、どんなファイルなのかを判別できます。

  • 「.jpeg」なら画像ファイル
  • 「.png」なら画像ファイル
  • 「.mp4」なら動画ファイル
  • 「.mp3」なら音楽ファイル

以上の例のように同じ画像ファイルでも拡張子が違うケースがあります。今回は、そんな画像ファイルの拡張子について以下で説明致します。

画像の拡張子による特性の違い

画像ファイルの主要な拡張子であるJPEG、PNG、GIFについて、それぞれの特性をご紹介いたします。

JPEG

色数の多いjpgファイルのサンプル

JPEG画像の例

JPEGとは「.jpg」や「.jpeg」という拡張子の画像ファイルで、色数の多い写真やグラデーションを多様しているイラストなどに用いられるファイル形式です。

メリット

  • フルカラー（約1670万色）を扱える
  • 写真など、色数が多いものを綺麗に表示できる
  • 同じ理由からグラデーションなどの表現にも向いている
  • 色数を保ったまま圧縮率を変更できる→高画質でもファイルを小さくできる

デメリット

  • 輪郭のはっきりした画像（グラフやべた塗りの図等）はぼやける
  • 背景を透明にできない
  • ロゴなどの場合は他のファイル形式より容量が大きくなりがち
  • 画像を保存しなおす度に劣化する→何度も編集が必要な画像には向いていない

PNG

Tool Stock ロゴ

PNG画像（ロゴ）の例

PNGとは「.png」という拡張子の画像ファイルで、輪郭のはっきりした画像や、↑のようなロゴに使われることの多いファイル形式です。

PNGは色数を２５６色に制限したり、フルカラーで表示することもできます。輪郭のはっきりした画像の場合は、軽さを重視し色数を制限した「PNG-8」で書き出し、画質を重視し背景を透過させたい場合は「PNG-24」で書き出しましょう。なお拡張子は双方とも「.png」になります。

メリット

  • フルカラー（約1670万色）を扱える（PNG-24）
  • 写真など、色数が多いものをJPEG以上に綺麗に表示できる（PNG-24）
  • 画像の背景を透過できるのでロゴ等に使用できる（PNG-24）
  • 加工してもJPEGのように劣化せず綺麗な画質を保てる

デメリット

  • フルカラーのPNG-24の場合、容量が大きくなる
  • 古いブラウザでは表示されない場合がある

GIF

GIFアニメーションの例

GIFアニメーションの例

GIFとは「.gif」という拡張子の画像ファイルで、主にこのようなGIFアニメーションに使われます。色数が256色以下に制限されているので画質が落ちます。画像として使うか、短いGIFアニメーションなら軽量です。

下記記事ではgifアニメを作れる無料ソフトを紹介しております。

2019.03.15

2024.02.15

アニメーション付きキャプションの挿入までできるフリーのMac専用GIFアニメ作成ソフト「GIPHY CAPTURE」

本稿ではMacユーザー向けのgifアニメ作成Appをご紹介いたします。美しいUIで、高い操作性を実現していること、GIFアニメーション内にキャプションを入れられることが特徴です。 GIFアニメとは そもそもgifアニメとはなんぞやということなのですが、一言でいうと多少の動き（アニメーション）を表...

メリット

  • パラパラ漫画のような短いgifアニメーションが作れる
  • 容量が軽い
  • 画像の背景を透過できるのでロゴ等に使用できる
  • 加工してもJPEGのように劣化せず綺麗な画質を保てる

デメリット

  • 色数が２５６色以下なので、細かな色の違いを表現できない→多くの色が使われている写真等に向かない
  • 同じ理由からグラデーションの表現に向いていない
  • 色数が多かったり、長時間のGIFアニメーションは容量が重たくなる

目的に応じて適切な拡張子を使おう

箇条書きでまとめると以下のようになります。

  • 色数の多い写真や、グラデーションのあるイラスト → JPEG
  • グラフや図、べた塗りの面積が大きい画像 → PNG（PNG-8）
  • 色数が少なくグラデーションが無いスクリーンショット（操作画面等） → PNG（PNG-8）
  • ロゴ等で背景を透過する必要のある画像 → PNG（PNG-24）
  • 短いアニメーションを作成したい → GIF

画像の美しさや軽量化など。何を優先するかを基準に適切な拡張子を選ぶといいでしょう。最適な拡張子を選べば、画質をキープしたまま、ページ表示速度も改善できるかもしれません。

Googleが開発した超軽量な拡張子「WebP」については、下記記事が参考になります。ぜひご覧ください。

2021.04.09

2024.04.24

WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」

「画像を軽量化するためにWebP対応を行いたい」 しかし、「WebP」は古いブラウザに対応していないため、直接使用するのは現実的ではありません。 そのため、対応ブラウザには「WebP」、未対応ブラウザでは従来の形式の画像（JPEG等）を配信するのが理想的です。ただし、このような振り分けは...