PR

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

仕事

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

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

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

お助け猫
お助け猫

今回の記事は、次のような方にお勧め!
・それぞれの画像形式ファイルの特徴を知りたい方
・正しい利用シーンを知りたい方

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

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

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

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

画像ファイル形式イメージ画像

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

WEBページで使用できる4つの画像形式ファイル

・jpg
・png
・gif
・svg

jpg

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

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

jpgの特徴

・フルカラー1670万色まで扱うことが出来る
・リサイズ(拡大・縮小しサイズ変更する事)保存したり、上書き保存するたびに、画質が低下する
・色の透過はできない
・ファイルが軽い

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

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

png

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

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

pngの特徴

・256色を扱える形式と、JPEG同様フルカラー(1670万色)を扱える形式のどちらにも対応可能
・透過処理や半透明指定も可能
・ファイルが重め

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

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

gif

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

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

gifの特徴

・256色扱える
・透過は可能だが、半透明の画像はできない。
・アニメーションの実現が可能

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

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

svg

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

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

svgの特徴

・拡大、縮小しても画質が変わらない
・データの中身が、テキストデータの為、テキストエディタで編集

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

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

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

お悩みさん
お悩みさん

特徴は分かりましたが、結局、どのシーンでどの画像形式ファイルを使えば良いのかいまいちピンと来ないのですが・・

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

画像形式利用シーン
jpg・挿入する画像は極力これ
png・背景が透明な画像を挿入する時
・ロゴ
gif使用しない
svg使用しない

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

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

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

コンピュータイメージ画像

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

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

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

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

「jpg」「png」 「gif」「svg」以外の画像形式ファイルをWEBページで使うと表示出来ない事がある!

まとめ

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

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

コメント

タイトルとURLをコピーしました