画像形式「JPEG」「GIF」「PNG」「SVG」
画像形式ごとに特徴がある。その特徴を把握した上で適切に画像素材とすることが大切。

Webページには画像が多く使われます。

ユーザーにとっては画像という一括りかもしれませんが、Webサイトの制作者は画像形式の種類を知り、目的や用途に合わせて適切な画像形式を選ぶことが大切です。

Webで使用される画像形式

Webサイトで使用される画像形式は、主に4つあります。

まずは画像形式の特徴を把握しましょう。

JPEG
写真など色数が多い画像に適しています。JPEGでは約1,677万色の色表現が可能です。圧縮しファイルサイズを減らすことが可能ですが、非可逆圧縮のため元には戻せません。
GIF
ボタンやアイコンなど色数の少ない画像に適しています。GIFは256色までしか使えませんが、一部を透明にした「透過GIF」や、紙芝居のような「アニメーションGIF」などの拡張機能を備えています。
PNG
PNGはGIFの良さを引き継ぎながらフルカラーも扱える画像形式として、広く使われるようになっています。3種類あり、それぞれ次のような特徴があります。8ビット形式は256色。24ビット形式はフルカラー。32ビット形式は透明度の設定が可能。
SVG
SVGはベクター形式の画像を扱えるXMLに基づくデータ形式を取ったフォーマットです。ビットマップ画像と異なり、拡大縮小しても劣化しません。JavaScriptとの連携も可能です。Adobe Illustratorから直接SVGを書き出すことができます。

ブラウザの画像形式対応状況

古くから使われている「JPEG」「GIF」「PNG」は、Webブラウザで問題なく表示されるため、無意識に使って問題がありません。

しかし、「SVG」だけは注意が必要です。Internet Explorer 8以前、Android 2.3以前はサポートされていないため、ユーザーがこれらを使用すると想定して制作する場合は対応が必要となります。

画像を軽量化するメリット

Webに使う画像素材は『綺麗であればいい』『多色であればあるほどいい』『枚数が多いほどいい』というわけではありません。

画像の使い方はページ表示速度に直結します。ユーザーがスマートフォンで低帯域によるネット接続を行っている場合は、画像の使用枚数が多いページは表示速度が遅くなるでしょう。また、アクセスが集中した場合も、サーバーの転送量が増えて負荷がかかってしまいます。その結果、ブロードバンド環境におけるPCによる閲覧でも表示速度が遅くなる可能性があります。

これらを避けるためには、画像ファイル作成時に2つのことを意識することが大切です。

1つ目は、適切な画像形式で保存すること。例えば、アイコンの画像にJPEG形式を選ぶ必要はありません。アイコンであれば色数も限定されているので、GIFで充分だからです。

2つ目は、圧縮すること。例えば、JPEGであれば劣化が目立たないレベルの圧縮率を選択することで、ファイルサイズを減らすことができます。

画像形式の判断基準

簡単ですが、以下を参考に画像形式を選ぶといいでしょう。

  • 写真であれば"JPEG"
  • 小さいアイコンであれば"GIF"
  • パラパラアニメーションを作る場合は"GIF"
  • フルカラーかつ透明にする場合は"PNG"
  • ベクター形式の画像にする場合は"SVG"