Webサイトに掲載する画像ファイルの種類を知ろう！

2025/11/28

技術情報

Webサイトに画像を掲載する時、どんな種類の拡張子を使用するか迷うことはありませんか？
画像ファイルはさまざまな種類があるため、用途や掲載箇所によって適した使い方があります。
本コラムでは、それぞれの画像ファイルの特長を解説するとともに、適した使い方についてもご紹介します。

ビットマップとベクター

全ての画像ファイルはビットマップ・ベクターの2種類の出力方式に分けられます。後に解説する各拡張子についても、ビットマップかベクターのどちらかに該当します。これらの違いは「色の表現方法」や「対応する編集アプリケーション」、「拡大や縮小を行った際にどうなるか」等で見分けることができます。
なかでも、大きな違いは拡大・縮小を行った際に見られます。ビットマップ画像はドットで表現されているため、画像を拡大するとドットが粗くなります。しかし、細かな色表現が得意で写真等の画像を扱うことができます。
一方で、ベクター画像は数式で表現されているため、拡大しても画像が粗くなりません。ビットマップ画像に比べて細かな色表現が不得意で、デザインデータ等で利用されます。Webで利用される画像も、大半はビットマップ画像です。

代表的な画像拡張子の種類

JPEG(.jpeg、.jpg)

使用できる色数が多く、グラデーションでの色表現に長けたビットマップ画像です。
細かな色表現に反してファイルサイズが軽いため、写真等のデータを扱うことに長けています。しかし、保存されるたびに再圧縮が行われる画像形式でもあるため、何度もダウンロードを繰り返すと画質が悪くなることがあります。

PNG(.png)

JPEGと同じく使用できる色数が多いビットマップ画像です。
JPEGとの大きな違いは、背景を透過することができるという点です。これにより、ロゴデータなどを画像化して使用したい際にも便利です。しかし、写真等のデータを使用する際はファイルサイズが大きくなってしまうこともあります。

GIF(.gif)

PNGと同じく透明色を利用することができ、ファイルサイズも小さいビットマップ画像です。
アニメーションに対応しており、パラパラ漫画のような簡単なアニメーションを作成することができます。しかし、使用できる色数が256色と少ないため、細かな色表現はできません。

SVG(.svg)

ベクター画像のため、拡大や縮小で劣化しない画像データです。
簡単な図形や表であれば、軽量で表示することができます。しかし、複雑な図形になるとファイルサイズが大きくなってしまうため、細かな表現を必要とする画像には向きません。

WEBP(.webp)

高圧縮で透明色やアニメーションにも対応できるビットマップ画像です。
新しい画像形式のため、一部ブラウザでは表示できないこともありましたが、現状サポートされているブラウザではほとんど表示が可能です。

用途を押さえて効率的なサイト運用に

画像を表示するための拡張子は数多ありますが、写真やロゴ等の用途によって向いている種類は自ずと決まります。拡張子の選択を誤ってしまい、画像が荒れてしまう、重くて表示に時間がかかってしまう…等になると、サイトユーザーの離脱を招く恐れもあります。
ぜひ、適切な画像を利用して、効率的なサイト運用を叶えましょう！

コラム