ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。一般的な仕事をしている方はもちろん、ウェブ関係の仕事に携わっている人たちでも明確な使い分けができていない方々もおられるでしょう。いかに画像を綺麗に見せ、容量を軽くするかが肝心なので、本項ではそれぞれの拡張子のメリット、デメリットや、画像の内容に応じてどのように使い分けるべきかをシンプルに解説致します。

拡張子とは

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

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

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

JPEGとは

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

JPEGのメリット

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

JPEGのデメリット

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

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

PNGとは

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

PNGのメリット

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

PNGのデメリット

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

GIFとは

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

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

GIFのメリット

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

GIFのデメリット

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

まとめ

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

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

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