画像拡張子一覧！変更方法や違い、種類を紹介！

画像データを表示したり、圧縮したりするファイルの一種に「画像拡張子」がありますが、一体どのようなものなのでしょうか？今回は「画像拡張子」の概要や選び方のポイント、無料画像変換ソフトについて解説します。気になるポイントをここで一挙に確認していきましょう。

「画像拡張子」とは？

「画像拡張子」とは、画像のファイル名、例えば「ファイル名.png」の「.」以降の英数字のことです。

画像拡張子は、画像ファイル形式の種類を判別するために付けられます。
主に英数字3文字で表されることが多いです。

画像ファイル形式の種類

拡張子名	メリット	デメリット
JPG	・色数が多い(1677万色対応) ・高画質の画像データを保存できる・圧縮倍率が指定できる・容量が軽い	・不可逆圧縮タイプ (保存を繰り返すと画質が劣化してしまう) ・背景透過ができない
PNG	・色数が多い(1677万色対応) ・JPG以上に高画質で表示できる・可逆圧縮タイプ (保存を繰り返しても画質が劣化しない) ・背景透過ができる	・画像の種類によって、容量が大きくなる・古いブラウザで表示されない場合がある
GIF	・短いgifアニメーションが作れる・容量が軽い・可逆圧縮である	・色数が256色以下と少ない・細かな色の違いを表現できない・グラデーションの表現に向いていない
SVG	・拡大・縮小しても画質が劣化しない・後から色やサイズを変更できる・容量が小さい・レスポンシブ対応可能	・写真では容量が大きくなる・SVGコードの知識が必要・JPGやPNGで保存するとSVGに戻せない
WebP	・拡大・縮小しても画質が劣化しない・後から色やサイズを変更できる・容量が小さい・レスポンシブ対応可能	・写真では容量が大きくなる・SVGコードの知識が必要・JPGやPNGで保存するとSVGに戻せない

ここでは、代表的な画像ファイル形式「JPG,PNG,GIF,SVG,WebP」についてそれぞれ解説します。
ファイル形式ごとにメリット・デメリットについてまとめているため、ぜひ参考にしてみてください。

JPG

JPGとは、静止画像データを圧縮する画像ファイル形式です。

正確には「Joint Photographic Experts Group」の略で、JPG形式で保存したファイルの拡張子は「.jpg」になります。

拡張子名	メリット	デメリット
JPG	・色数が多い(1677万色対応) ・高画質の画像データを保存できる・圧縮倍率が指定できる・容量が軽い	・不可逆圧縮タイプ (保存を繰り返すと画質が劣化してしまう) ・背景透過ができない

JPGはビットマップ画像であるため、色と色との境目を目立たなくする処理に長けています。
また、圧縮倍率が指定できるため、好みに合わせて画質を微調整できる点も魅力的です。
近年では、主にスマホで撮影された写真の圧縮に用いられています。

PNG

PNGとは、Webサイト上で画像を表示するために開発された画像ファイル形式です。

正確には、「Portable Network Graphics」の略で、PNG形式で保存したファイルの拡張子は「.png」になります。

拡張子名	メリット	デメリット
PNG	・色数が多い(1677万色対応) ・JPG以上に高画質で表示できる・可逆圧縮タイプ (保存を繰り返しても画質が劣化しない) ・背景透過ができる	・画像の種類によって、容量が大きくなる・古いブラウザで表示されない場合がある

PNGは、主に輪郭がはっきりした画像やイラスト、文字が含まれる図やグラフなどの圧縮で使用されます。
またグラデーションや色数の多い表現に長けているため、写真を丸く切り抜いて背景を透明にしたい場合や、細かくグラデーションをつけたい場合におすすめの画像ファイル形式です。

GIF

GIFとは、できるだけファイルサイズを小さく抑えたい時に使用したい画像ファイル形式です。

正確には、「Graphics Interchange Format」の略で、GIF形式で保存したファイルの拡張子は「.gif」になります。

拡張子名	メリット	デメリット
GIF	・短いgifアニメーションが作れる・容量が軽い・可逆圧縮である	・色数が256色以下と少ない・細かな色の違いを表現できない・グラデーションの表現に向いていない

GIFは、アイコンや図形など、色数が少なくて済む図形に適しています。

また透過機能があり、指定した色を完全透明にできます。
主にロゴやボタンなど背景が不要な画像によく使用されます。

さらに、GIFは複数の画像を重ねてアニメーションを作ることが可能です。
数秒のアニメーションであれば、動画よりGIFが使われることが多いです。

SVG

SVGとは、XMLで記述する2次元のベクター画像ファイル形式です。
正確には、「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、SVG形式で保存したファイルの拡張子は「.svg」になります。

拡張子名	メリット	デメリット
SVG	・拡大・縮小しても画質が劣化しない・後から色やサイズを変更できる・容量が小さい・レスポンシブ対応可能	・写真では容量が大きくなる・SVGコードの知識が必要・JPGやPNGで保存するとSVGに戻せない

SVGは数値データをもとに演算された画像ファイル(ベクター画像)であるため、画像を拡大・縮小しても画質が劣化しません。

そのため、CSSやJavaScriptのアニメーションと相性が良く、動きやぼかしなどのエフェクトを加える事ができます。

WebP

WebPとは、Google社が開発したWeb対応の静止画像を圧縮する画像ファイル形式です。

WebP形式で保存したファイルの拡張子は「.webp」になります。

拡張子名	メリット	デメリット
WebP	・画質を保ったまま画像サイズを軽量化できる・非可逆圧縮なのに背景透過やアニメーションが作れる	・対応しているブラウザが少ない

最大の特徴は、非可逆圧縮にも関わらず、背景透過ができるいう点です。
従来、非可逆圧縮タイプのJPGでは背景透過はできず、また背景透過させる場合は可逆圧縮タイプのPNGを使う必要がありました。

WebPを使えば、JPGとPNGを使い分ける必要はありません。
言うなれば、WebPはJPGとPNGの利点だけを抽出した次世代型画像ファイル形式なのです。

結局どの「画像拡張子」を選択すれば良いの？

「画像拡張子」は基本的にできるだけ画質を落とさず、ファイルサイズを小さくする(圧縮)目的で使用されます。

「画像拡張子」は、「こういうタイプの画像に向いている」「こういう性質がある」などそれぞれ強みは違います。

そこで本記事では、状況別におすすめしたい「画像拡張子」についてまとめてみました。
「画像拡張子」を選択する際は、ぜひ参考にしてみてください。

状況	画像拡張子
ベクター画像で表現したい	SVG
・非可逆圧縮と背景透過を行いたい・圧縮率が高く、ファイルサイズは軽量が良い	WebP
ファイルサイズを気にせず、輪郭がはっきりした画像やイラストにしたい	PNG
ファイルサイズを軽くし、圧縮倍率も自分で指定したい	JPG
画質は気にしないけど、とにかく軽量サイズが良い	GIF