背景画像、アイコン、地図、商品画像…WEBサイトには様々な種類のデジタル画像が掲載されています。
このような画像ファイルは「～.jpg」や「～.png」といった拡張子が用いられており、多くの方はこれらの拡張子を見たことがあるかと思います。
ファイル形式ごとにメリットやデメリットがあり、画像の内容によってどの拡張子の画像を掲載すべきかも変わってきます。
そこで今回はWEBサイトで使われているデジタル画像の主なファイル形式や、状況別の使い分け方について解説します。
デジタル画像は大きく2種類の表現形式に分けられる
普段WEBサイトで見かけるデジタル画像には、表現方式によって「ラスター画像」と「ベクター画像」という2つの種類に分けられます。
両者は特徴が大きく異なり、WEBサイトでの用途も全然違ってきます。
「ラスター画像」はピクセルの集合体で構成されている
ラスター画像は「ビットマップ画像」と呼ばれており、画素（ピクセル）という小さな色のついた点の配列情報をもとに構成されている画像です。
テレビやカメラのモニターなどで古くから使われている表現形式で、〇〇万画素という言い方は電気機器のスペックでも聞きなじみがあるかと思います。
後述するベクター画像に比べると細やかな表現を得意とするため、写真やイラストなど多くのデジタル画像はラスター画像として掲載します。
実際にWEBサイトでよく見かける「jpg」や「png」といった拡張子の画像ファイルは、すべてラスター画像です。
一方でラスター画像はサイズが大きすぎるとピクセルの配列情報の容量も重たくなって、ファイルの読み込みがスムーズにできなくなることがあります。
また不可逆圧縮のファイル形式の場合、保存や編集により画像が圧縮することでファイル容量を抑えるために画質が劣化しやすくなります。
「ベクター画像」は図形や線の集合で構成されている
ベクター画像は座標情報などの数値に従って配置された直線や円といった図形（オブジェクト）の集まりで構成されている画像です。
オブジェクトにはパスと呼ばれる複雑な形状の線形やテキストも含まれており、拡大縮小を繰り返しても細かな線の輪郭をくっきり保持することができます。
面白いことにベクター画像に掲載されたテキストは、文字データとしての性質が残っているためドラッグアンドドロップしてコピーしたり、ブラウザ上で検索したりできます。
普段利用することの多いPDFファイルも、画像のようにレイアウトを反映させつつ文字データとしての機能が有効な点などから「ベクター画像」の一種といえます。
ベクター画像はHTMLテキストのようにコーディングにより生成できるため、本格的なイラスト作成ソフトがなくても簡単に作成できます。
WEBサイトで利用される主な画像ファイル形式
ファイル形式その1：「JPG」
JPG、正式にはJPEG（Joint Photographic Experts Group）は安定した圧縮性からデジタル画像の標準的なファイル形式として利用されています。
JPGの一番の強みはその圧縮性で、Windowsの標準的な画像形式であるBMP（ビットマップ）に比べて、ファイル容量をおおよそ1割ほどまで軽量化できます。
またJPGはフルカラー（約1,670万色）に対応しており、色のグラデーションや明暗の細かな表現にも適しています。
そのためAndoroidのスマホやデジタルカメラなどで撮影した写真は、一般的にJPGのフォーマットで保存されています。
一方で圧縮する際に画質が劣化しやすく、何度も保存を繰り返すとそのたびに画質が劣化して細部がぼやけたり色がくすんだりしやすくなるデメリットがあります。
ファイル形式その2：「PNG」
PNG（Portable Network Graphics）は可逆圧縮の画像フォーマットで、JPGとともに一般的なデジタル画像のファイル形式の1つとして使われています。
可逆圧縮は圧縮したデータをもとの形状に復元できる圧縮形式で、PNGファイルはこのおかげで繰り返し保存しても画質が低下しにくいのです。
また画像の透明度を表すデータ値のアルファチャンネルを含んでいるため、画像の一部を透過させて切り抜くように表示させることもできます。
こうしたメリットから、PNGはWEBサイト用の素材画像や2Dゲーム用のイラストデータなど様々なところで使われています。
一方でJPGなどと比べると圧縮率は低いため、一度にたくさんのPNG画像をサイト上に掲載させると読み込みが重くなりやすいといったデメリットがあります。
ファイル形式その3：「GIF」
GIF（Graphics Interchange Format）はインターネットが普及する以前、1980年代後半から使われてきた歴史のあるファイル形式です。
GIFの大きな特徴として、複数のフレームをつなげて表示させてアニメーション画像を作成できる点があります。
JPGやPNGは長らくアニメーション画像に対応していなかったため、LINEスタンプなどGIFアニメーションは現在でも多くのコンテンツで使われています。
反対にGIFは写真やイラストの画像ファイルの形式としては、表現できる色数がかなり制限されることからあまり使われなくなりました。
しかし色数の制限によりファイル容量がかなり軽減できるため、アイコン画像などをGIF画像にすればWEBサイトを軽量化することもできます。
ファイル形式その4：「WebP」
WebPはグーグルが2010年にリリースしたファイル形式で、JPG・GIF・PNGの特徴を兼ね備えることでこれらの形式を置き換える目的で開発されました。
WebPは画質をほぼ劣化させずに、JPGやPNGに比べてファイル容量を25%以上も削減できる高い圧縮率が大きな特徴です。
またPNGファイルのように画像の一部を透過処理したり、GIFファイルのようにアニメーション画像を作成したりすることも可能です。
近年登場したファイル形式ながら、現在使用されているWEBブラウザのほとんどがWebPに対応しており、WEBサイトでの導入例も増えています。
ただし画像編集ソフトの種類によっては、WebPファイルを開くにはプラグインの追加などをする必要があるのがデメリットです。
ファイル形式その5：「SVG」
SVG（Scalable Vector Graphics）はベクター画像に用いられているファイル形式で、XMLというWEB言語を記述することで図形を描画しています。
このため画像制作ソフトがなくても、直接ファイルをコーディングすることにより編集できます。
またラスター画像とは違い拡大縮小しても画質が劣化しないため、どんな倍率でもはっきり鮮明に表示できるのもSVGの強み。
しかしあくまでも線形や図形の集まりとして画像を表現しているため、ラスター画像のように色彩豊かな画像や複雑な図形の表現には適していません。
ファイル形式はどのように使い分ければいい？
WEBコンテンツに掲載する画像ファイルは、基本的には画質や容量のバランスがとれていて汎用性の高いWebP形式のもので用意するのがおすすめです。
自社サイトなどのSEO改善を行う場合、既存のJPG画像やPNG画像をWebP画像に変換して掲載するだけでも読み込み速度を上げられます。
できるだけ画質を高めて見せたいなら、よりきれいに表示できるPNG画像を掲載するのも手です。
一方、ロゴマークやアイコンなど小さなサイズの画像ならSVG形式のものを利用するのもおすすめです。
ファイル容量の負担が軽いだけでなく、CSSスタイルシートを記述することで画像の修飾が自由にできますよ。
デジタル画像のファイル形式は使い方によって選ぼう
WEBコンテンツなどに使われるデジタル画像には、「ラスター画像」と「ベクター画像」があります。
ラスター画像にはJPGやPNGなどの形式があり、中でも従来のものの特徴を踏襲したWebPは使い勝手がよくおすすめの形式といえます。
ただ高画質で表示したい場合は、画質の劣化が少ないPNG画像を用いるのも効果的。
アイコンや企業ロゴなど小型のものは、変形してもくっきり表示できて編集しやすいベクター画像のSVG画像を使うのもいいですよ。
このようにどんな形式の画像ファイルを掲載するかは、ファイルの使い方によって選んでみてくださいね。
