ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。WEB関連の業界人でも明確な使い分けができていない方々もいらっしゃいます。いかに画像を綺麗に見せ、容量を軽くするかが肝心なので、本項ではそれぞれの拡張子のメリット、デメリットや、画像の内容に応じてどのように使い分けるべきかを解説致します。

拡張子とは

まず拡張子とはなんぞやということなのですが、あらゆるファイルの末尾についている「.jpeg」や「.png」などの英字のことです。ここを見れば、そのファイルがどんなファイルなのか判別できるようになっています。

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

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

JPEGとは

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

JPEGのメリット

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

JPEGのデメリット

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

JPEGは最高画質の状態でもPNGより軽量にできるので、サイズの大きい写真などを軽い容量で表示したい場合にはもっとも適しているといえるでしょう。

PNGとは

「.png」という拡張子の画像ファイルで、輪郭のはっきりした画像やイラスト、文字が含まれている図やグラフなどに用いられるファイル形式です。PNGは色数を２５６色に制限したり、フルカラーで表示することもできます。輪郭のはっきりした画像の場合は、軽さを重視し色数を制限した「PNG-8」で書き出し、画質を重視し背景を透過させたい場合は「PNG-24」で書き出しましょう。なお拡張子は双方とも「.png」になります。

PNGのメリット

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

PNGのデメリット

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

GIFとは

「.gif」という拡張子の画像ファイルで、主にgifアニメなどの作成時のファイル形式で、色数が256色以下に制限されているので容量がとても小さく、色数の少ない図表に適しています。

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

2019.03.15

2024.02.15

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

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

GIFのメリット

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

GIFのデメリット

  • 色数が２５６色以下なので、細かな色の違いを表現できない→多くの色が使われている写真等に向かない
  • 同じ理由からグラデーションの表現に向いていない

まとめ

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

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

上記の例以外で色数が少ない写真や、色数の多い写真を含むスクリーンショットなどはその都度、何を優先するかを基準に適宜ファイル形式を見直す方がベターです。それぞれの拡張子の特性を理解し、最適なファイル形式を選ぶことで、ページ表示スピードの向上にも繋がります。今一度あなたのウェブサイトに使用している画像ファイルの形式を確認してみるのも良いかもしれません。

Googleが開発した超軽量な拡張子については、下記記事が参考になります。ぜひご覧ください。サイトの表示スピードが向上するかもしれません。

2021.04.09

2022.01.13

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

2021/4/15 情報を更新いたしました。 「画像を軽量化するためにWebP対応を行いたい」 しかし、「WebP」は古いブラウザに対応していないため、直接使用するのは現実的ではありません。 そのため、対応ブラウザには「WebP」、未対応ブラウザでは従来の形式の画像（JPEG等）を配信...