Web制作で使われる画像の拡張子の種類と特徴

Web制作において画像は多くのサイトで使用されており、重要な要素の一つです。画像は拡張子によって種類が分けられており、用途やニーズによって正しい拡張子を選ぶ必要があります。

ここでは、Web制作において主に使用されている画像の拡張子を紹介します。

拡張子の種類と特徴

JPEG（.jpg、.jpeg）

読み方: ジェイペグ
正式名称: Joint Photographic Experts Group

JPGは約1677万色を表現できる画像形式のため、写真など色数の多い画像に向いています。また画質を下げることにより大幅にファイルサイズを下げることが可能ですが、非可逆圧縮のため一度画質を下げると元に戻すことができません。

• 特徴
  圧縮率が高く、写真や複雑な画像に適している
• 長所
  約1677万色と色数が多い
  高い圧縮率によりファイルサイズが小さくなる
• 短所
  非可逆圧縮のため、一度画質を落ちた状態で保存すると元に戻せない
  編集や加工を繰り返すと画質が劣化する可能性がある

サンプル画像

PNG（.png）

読み方: ピング
正式名称: Portable Network Graphics

PNGには3つの形式があり、「PNG32」「PNG24」「PNG8」があります。
PNG32：フルカラー＋透過
PNG24：フルカラー
PNG8 ：256色

PNG32とPNG24には透過情報を持つかどうかの違いではありますが、PNG32は容量が膨大になる可能性がありWebには不向きなので、一般的に透過画像を作成する際はPNG24を使用します。
PNG8はGIFと同様に256色で表現され透過もサポートされている形式のためGIFとの使い分けが難しいですが、グラデーションなどの表現においてはPNG8の方が容量が小さい傾向にあります。

• 特徴
  同じ拡張子で3つの形式が存在する
  可逆圧縮を使用し、透明な背景をサポート
• 長所
  画質が劣化せず、透明な部分が扱える
  PNG8はサイズ容量を抑えることが可能
• 短所
  PNG24はファイルサイズが大きくなりがち
  PNG8は色数が制限されている

サンプル画像

PNG24：透過画像

PNG8：256色、非透過

PNG8：256色、透過

GIF（.gif）

読み方: ギフ（またはジフ）
正式名称: Graphics Interchange Format

256色で表現可能で、1つのファイル内に複数の画像を保持できる形式です。1つのファイルに複数画像を保持することによりアニメーションを実現可能です。

• 特徴
  アニメーションをサポートし、256色までの色を使用可能
• 長所
  簡単なアニメーションが表現可能
  透明背景をサポート
• 短所
  色数が制限されており、複雑な画像には不向き

サンプル画像

アニメーション

静止画、透過

WebP（.webp）

読み方: ウェッピー
正式名称: Web Picture

• 特徴
  Googleが開発した新しい画像フォーマットで、JPEGよりも高い圧縮率を実現
  アニメーションをサポート
• 長所
  高い圧縮率でファイルサイズが小さく、画質も良い
  アニメーションの表現が可能
  透過背景をサポート
  JPG、PNG、GIFを使い分ける必要がない
• 短所
  一部対応していないブラウザがある
  画像変換の手間がかかる

WebPは比較的新しいフォーマットですが、その利便性とGoogleの強力な推進力により急速に普及しています。主要なブラウザとウェブサイトが対応しているため、現在は広く利用されていると言えます。今後も、ウェブページのパフォーマンス向上を目指す動きとともに、WebPの利用は増えていくと予想されます。

SVG（.svg）

読み方: エスヴィージー
正式名称: Scalable Vector Graphics

直線や曲線を数値で表すベクター形式のデータです。拡大・縮小時にはブラウザが描画しているためデータが劣化しないためWebでの表示に最適です。SVG情報を画像ではなく直接HTMLへ埋め込むことによりCSSの適用も可能です。

• 特徴
  ベクター形式で画像を表現している為、拡張性と編集可能性が高い
• 長所
  拡大や縮小しても画質が劣化しない
  ベクター形式のため容量が小さい
• 短所
  JPGやPNGなどに保存した後にSVGへ戻せない
  アニメーション作成の難易度が高い

まとめ：用途やニーズに応じて拡張子を使い分けよう

これらの拡張子は、それぞれ異なる用途やニーズに応じて使い分けられます。たとえば、ウェブページの画像はファイルサイズを小さく保つためにJPEGやWebPがよく使われ、透明なロゴやアイコンにはPNGやSVGが適しています。

それぞれの用途によって適切な拡張子で画像を使用していきましょう。