【使い分け】画像形式ファイルの種類について解説！jpg、png、gif、svgの特徴・違いとは？

画像を取り扱っていると、名前の後ろに「.jpg」「.png」等の文字列を見た事があると思います。

特に意識していない方もいらっしゃるかもしれませんが、画像形式ファイルには、それぞれ特徴があります。

今回の記事では、WEBページで利用できる「jpg」「png」 「gif」「svg」の4つの画像形式ファイルの特徴について解説をしていきます。

解説前の事前知識、拡張子について

それぞれの画像形式ファイルの特徴について解説する前に、拡張子について解説をしておきます。

拡張子とは、ファイルをあらわす文字列の事を指します。ファイル名のすぐ後ろにつく「.jpg」 「.png」の部分が拡張子の部分となります。つまり、ここに注目すれば、何の画像形式のファイルなのか、ファイル名で判断する事が出来るという事ですね。

それぞれの画像形式ファイルの特徴について

拡張子についてはご理解いただけましたでしょうか？それでは、WEBページで使用できる4つの画像形式ファイルについて順番に見ていこうと思います。

jpg

jpgとは、非可逆圧縮形式の画像ファイル形式（圧縮前のデータと展開後のデータが完全に一致しないデータ圧縮方式）で、「ジェイペグ」と読みます。ややこしいですが、jpegもjpgと全く同じ扱いです。

特徴については、下記の通りです。

jpgは、画質が綺麗かつ軽いのが特徴です。ただし、圧縮・展開を繰り返すと画質がとんどん低下するのが難点です。

このような特徴から、主に写真や階調（色数）の多いイラストなどによく使われます。

png

pngとは、可逆圧縮形式の画像ファイル形式（圧縮前のデータと展開後のデータが完全に一致するデータ圧縮方式）で、「ピング」と読みます。

特徴については、下記の通りです。

pngは、他の画像形式ファイルと比較しても優れた性能を持っていますが、ファイルがやや重いのが難点です。

このような特徴から、主に階調の少ないイラストやロゴによく使われます。

gif

gifとは、可逆圧縮形式の画像ファイル形式で、「ジフ」と読みます。

特徴については、下記の通りです。

gifの最大の特徴としては、ループの設定を付与してアニメーションを実現できる事です。パラパラ漫画のようなイメージです。動いてる画像を見た事がある方もいらっしゃるかもしれませんが、gifと言うファイル形式で作られています。

アニメーションを実現したい場合以外では、あまり使われない印象です。

svg

svgは、WEBページで使える唯一のベクター形式の画像ファイルで、「エスブイジー」と読みます。

特徴については、下記の通りです。

svgは、拡大、縮小しても画質が変わらないのが特徴です。また、XMLというHTMLに似た言語で書かれているので、テキストエディタで編集することもできます。

svgがテキストデータであることから、JavaScript等のプログラミング言語と組み合わせて、グラフなどを表示する場合などに使われています。

結局、どのシーンでどの画像形式ファイルを使用すれば良いのか？

特徴を読んでいただいても、いまいちピンと来ない方もいらっしゃると思います。そこで、筆者がどのように使い分けているか、ご紹介します。

筆者の場合は、ほとんどjpgを使うようにしています。理由は、軽い上に綺麗だからです。pngは、背景を透明にしたい場合や、ロゴを挿入する場合に使っています。gif、svgは、仕事でも滅多に使う機会に遭遇しないですね。

あくまで、筆者の例ですが、参考にしていただけると幸いです。

他の画像形式ファイルをWEBページで使用するとどうなるのか？

今回は、WEBページで使用できる4つのファイルについて解説しましたが、画像形式は他にも種類が存在します。

では、今回ご紹介した4つの画像形式ファイル以外のものをWEBページで使うとどうなると思いますか？

結論から申し上げると、ブラウザが対応しておらず、表示出来ない場合がある為、注意が必要です。

今後、バージョンアップ等で使える画像形式ファイルも増えるかもしれませんが、現状WEB制作の場合は、「jpg」「png」 「gif」「svg」の4つの画像形式ファイル以外は使わないようにしましょう。

まとめ

今回ご紹介した、4つの画像形式ファイルの特徴についてご理解いたけましたでしょうか？

特徴を理解した上で、適切に使用していただければ幸いです。