WEBで使う画像ファイルには、複数の種類があります。
同じ画像ファイルでも、ファイルの形式（フォーマット）が複数あり、「.jpeg」などの拡張子と呼ばれる文字列で判別できるようになっています。
当記事では、そんな画像ファイルの拡張子について、種類別の違いや特性をご紹介いたします。
拡張子とは
拡張子とは、ファイル名の末尾についている「.jpeg」などの文字列のことです。拡張子を見れば、それがどんなファイルなのかを判別できます。
- 「.jpeg」なら画像ファイル（.jpgも同じです）
- 「.mp4」なら動画ファイル
- 「.mp3」なら音楽ファイル
また、同じ画像ファイルでも「.png」や「.gif」などといった別の拡張子もあります。画像でもファイル形式（フォーマット）が異なるものがあるということです。
画像ファイルの拡張子による違い
画像ファイルの拡張子として一般的なものには、JPEG、PNG、GIFなどがあります。それぞれの違いや特性をご紹介いたします。
JPEG
JPEG画像の例
JPEGとは「.jpg」や「.jpeg」という拡張子の画像ファイルで、色数の多い写真やグラデーションを多様しているイラストなどに用いられるファイル形式です。最もメジャーな拡張子の一つですね。
メリット
- フルカラー（約1670万色）を扱える
- 写真など、色数が多いものを綺麗に表示できる
- 同じ理由からグラデーションなどの表現にも向いている
- 色数を保ったまま圧縮率を変更できる→高画質でもファイルを小さくできる
デメリット
- 輪郭のはっきりした画像（グラフやべた塗りの図等）はぼやける
- 背景を透明にできない
- ロゴなどの場合は他のファイル形式より容量が大きくなりがち
- 画像を保存しなおす度に劣化する→何度も編集が必要な画像には向いていない
PNG
PNG画像の例
PNGとは「.png」という拡張子の画像ファイルで、輪郭のはっきりした画像や、↑のようなロゴに使われることの多いファイル形式です。
PNGは色数を256色に制限したり、フルカラーで表示することもできます。輪郭のはっきりした画像の場合は、軽さを重視し色数を制限した「PNG-8」で書き出し、画質を重視し背景を透過させたい場合は「PNG-24」で書き出しましょう。なお拡張子は両方とも「.png」になります。
メリット
- フルカラー（約1670万色）を扱える（PNG-24）
- 写真など、色数が多いものをJPEG以上に綺麗に表示できる（PNG-24）
- 画像の背景を透過できるのでロゴ等に使用できる（PNG-24）
- 加工してもJPEGのように劣化せず綺麗な画質を保てる
デメリット
- フルカラーのPNG-24の場合、容量が大きくなる
- 古いブラウザでは表示されない場合がある
GIF
GIFアニメーションの例
GIFとは「.gif」という拡張子の画像ファイルで、主にこのようなGIFアニメーションに使われます。色数が256色以下に制限されているので画質が落ちます。画像として使うか、短いGIFアニメーションとして使うなら軽量です。
下記記事ではgifアニメを作れる無料ソフトを紹介しております。
本稿ではMacユーザー向けのgifアニメ作成Appをご紹介いたします。美しいUIで、高い操作性を実現していること、GIFアニメーション内にキャプションを入れられることが特徴です。 GIFアニメとは そもそもgifアニメとはなんぞやということなのですが、一言でいうと多少の動き（アニメーション）を表...
メリット
- パラパラ漫画のような短いgifアニメーションが作れる
- 容量が軽い
- 画像の背景を透過できるのでロゴ等に使用できる
- 加工してもJPEGのように劣化せず綺麗な画質を保てる
デメリット
- 色数が２５６色以下なので、細かな色の違いを表現できない→多くの色が使われている写真等に向かない
- 同じ理由からグラデーションの表現に向いていない
- 色数が多かったり、長時間のGIFアニメーションは容量が重たくなる
次世代拡張子とは
次世代拡張子とは、主に2000年以降に登場してきた新しい拡張子です。前述の拡張子はすべて90年代に開発された画像ファイルで、今も広く普及している一般的なものです。それに対して次世代拡張子と呼ばれる次のようなものがあります。
- SVG
- WebP
- AVIF
今後も新しい技術によって次世代拡張子が登場する可能性は十分ありますが、当記事ではこれらの3つの拡張子の特徴をご紹介いたします。
SVG
SVG画像の例
SVGは、拡大しても劣化しない画像ファイル形式です。「.svg」という拡張子になります。
画像ファイルでありながら、数式を基に描画されているため、解像度による劣化が起こらないわけです。厳密には、画像というより「テキストデータで画像を表現している」といったイメージが近いです。
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
メリット
- 拡大縮小しても画像が劣化しない
- テキストデータなのでCSSで編集できる
- JavaScriptを用いたアニメーションにも対応
デメリット
- 写真などの複雑な画像には不向き（計算式が膨大になり重たくなる）
- SVGのテキストデータを作成するには一定の知識が必要
WebP
WebP画像の例
WebPとは、Googleが開発した画像ファイルの形式で、「.webp」という拡張子になります。画像の圧縮率が高く軽量なので、Webサイト上で使われることが増えてきている次世代拡張子です。
メリット
-
- 画像の圧縮率が高い
- PNGのような透過処理も可能
- GIFのようなアニメーションに対応
デメリット
大きなデメリットはありません。
強いて言うならば、今現在普及している画像ファイルの多くはJPGやPNG形式のため、WebPに変換する手間がかかることぐらいでしょう。AdobeまわりのソフトもWebPに対応してきていますし、利用できるツールも多くなっており、大きなデメリットはないといえます。
WordPressサイトでWebPを使うならこちらのプラグインが便利です。
「画像を軽量化するためにWebP対応を行いたい」 しかし、「WebP」は古いブラウザに対応していないため、直接使用するのは現実的ではありません。 そのため、対応ブラウザには「WebP」、未対応ブラウザでは従来の形式の画像（JPEG等）を配信するのが理想的です。ただし、このような振り分けは...
AVIF
AVIF画像の例
AVIFは、WebPを含む従来のどのフォーマットよりも軽量かつ高画質な画像ファイル形式です。拡張子は「.avif」になります。2019年に登場した次世代拡張子で、AmazonやGoogle、Netflixなどが参加している非営利団体によって開発されました。
画像ファイルのフォーマットといえば、JPEGやPNGなどが思い浮かびますが、これらはいずれも90年代に生まれたものです。 そこから20年後の2010年にはWebP、2019年にはAVIFという次世代拡張子が登場しました。軽量かつ高画質な拡張子です。Web上に画像をアップする際は、軽量であること...
メリット
- WebPよりも軽量で高画質
- PNGのような透過処理も可能
- GIFのようなアニメーションに対応
デメリット
- エンコード（変換）に時間がかかる
- 対応していないツールやサービスがある
2024年5月現在、Adobeまわりのソフトや一部のツールなどで対応していないことがデメリットといえます。とはいえ、このあたりは時間の問題でする可能性もあるので、今後主流になってくるポテンシャルがある画像ファイル形式です。
目的に応じて適切な拡張子を使おう
画像ファイルの拡張子についてご紹介いたしました。種類によって特性が異なることがわかります。
簡単にまとめると次のようなイメージです。
- 色数の多い写真や、繊細な表現が必要なイラスト等 → JPEG
- 背景を透過したいロゴ画像 → PNG
- 画像アニメーション → GIF
- デバイスによってサイズを変えたいロゴ画像等 → SVG
- Webサイト上で使う画像全般 → WebP, AVIF（サーバーや周辺サービスが完全対応してから使うのが無難）
現時点では、「一般的に普及しているJPEGやPNGを使いつつ、必要に応じて軽量なWebPに変換する」という使い方がベストだと思います。
周辺サービスの対応状況や、新しい次世代拡張子の登場によってベストな選択は変化します。画像の美しさや軽量化など、何を優先するかを基準に適切な拡張子をご活用ください。
