画像ファイル形式（PNG・GIF・JPEG・TIFF・SVG）の違いや特徴について解説します。
Contents
画像のファイル形式とは？
ホームページやブログにテイストや内容に沿った画像を載せることで、ユーザーの目を惹いてわかりやすいサイトにすることができますよね。
webサイトへの挿入でよく使用される画像のファイル形式にはいくつかの種類があります。
ファイル形式とは「画像をどのようなファイルで保存するか」を表したものであり、ファイル形式を判別するためにファイル名末尾に拡張子というものが付けられます。
形式によって特徴が異なりますので、それぞれについて解説していきます。
画像形式の種類と特徴
JPEG（ジェイペグ）
拡張子は.jpg/.jpeg
圧縮の度に画質が劣化
データ容量が軽い
フルカラー
WEBに使える
最も標準的な画像ファイル形式です。約1677万色のフルカラーを再現できるため、写真等の色数の多いものに適したファイル形式です。
ただし、JPEG形式には画像を一度圧縮してしまうと元の画質に戻すことのできない「不可逆圧縮」であるという特徴があります。
そのため保存を繰り返すたびに徐々に画質が劣化してしまいます。
PNG（ピング）
拡張子は.png
圧縮画像が可逆で画質が劣化しない
データ容量が大きめ
256色とフルカラーの2種類形式がある
透過が可能
WEBに使える（アニメーションにも対応）
GIFに代わりよく利用されるようになった画像形式です。主にWEBでの使用するために開発されました。
PNGはさらに従来のgifと同じ256色を扱う8bit形式(PNG-8)と1677万色のフルカラーを扱える24bit形式(PNG-24)があり、前者は色数の少ないアイコン画像やロゴなどに向いており、後者はグラデーションにも対応できるため細かいイラストなどにも対応できます。
PNGの大きな特徴としては透過処理に対応していることで、背景が透明な画像や背景が透ける半透明な画像を作成することができます。
また、可逆圧縮という性質を持っているため、一度圧縮された画像も元の画質に戻すことができます。
GIF（ジフ）
拡張子は.gif
色数変化がなければ画質は劣化しない（可逆）
データ容量が非常に軽い
最大256色
透過が可能（半透明は不可）
WEBに使える（アニメーションにも対応）
昔から利用されている画像形式です。
扱える色数は最大256色のみとなっているため、繊細な色彩表現はできません。しかし、多くの色を利用する必要のないロゴやアイコンなどに向いており、使用できる色が制限されているため容量を軽くすることができます。
GIFアニメというアニメーションの表現も可能で、少ないデータ量でアニメーションを作成することが可能です。
SVG（エスブイジー）
拡張子は.svg
ベクタ形式のため拡大に強い
写真などの繊細な表現は不得意
透過が可能
WEBに使える（アニメーションにも対応）
ベクタ形式（二次元情報を数値で記録しているため拡大や編集による劣化がない）の画像ファイルのため、伸縮性に優れ汎用性が高いです。アイコン、地図など平面的でシンプルなイラストには特に向いていると言えます。
かつては対応ブラウザが少なかったものの、近年はSVG対応のブラウザが増えてきているため今後の普及が見込まれる画像形式です。
TIFF（ティフ）
拡張子は.tif/.tiff
非圧縮画像で画質は劣化しない
データ容量が大きい
フルカラー
WEBに使用不可
圧縮によるデータ量軽減を行わない、画像の品質を最優先させた画像形式です。
サイズの大きい画像や高解像度の画像を劣化させずに取り扱う際に向いています。
印刷物に利用されることが多く、異なるOS（WindowsとMac等）の間での取り扱いにも向いています。
他の画像形式とは異なり圧縮を行わないため画質の劣化はありませんが、データ容量は非常に大きい形式となります。
ページの表示速度を改善するには？
容量の大きい画像を多く使用している場合、ページの表速度が遅くなってしまうことがあります。
上記で説明した画像形式を適切に選択したり、使用色数を制限するなどでページを軽くすることができます。
具体的には、
・不必要に大きなサイズの画像を使用せず、荒くならない程度に画像サイズを抑える
・保存が発生しない状況、透過が不要な画像にはPNGではなくJPEGを使用
・画像軽量ソフトを使って画像を圧縮して軽量化して使用
などの方法があります。
その画像の使用用途によって適切な画像ファイル形式が異なりますので、
各形式の向き不向きや特徴をしっかりと考慮して利用すると良いでしょう。
