Webで扱える画像フォーマットは主にJPEG、GIF、PNG、SVGの4種類あり、用途に合わせて使い分けます。

サイズが大きくてきれいな画像はファイルの容量も大きくなります。大きすぎる画像ではWebページの読み込みに時間がかかってしまい ユーザーを長く待たせることになってしまいます。ユーザーを長く待たせないために画像のファイルサイズを必要最小限に小さくして快適に閲覧できるようにしておかなくてはなりません。そのためWebで使用される画像にはファイルサイズを小さくするために圧縮による最適化という考え方がります。

これらのWebに採用されている画像フォーマットには共通して圧縮効率に優れている特徴があります。しかしその圧縮方法の違いによりそのフォーマットに適した画像のタイプが異なります。これらをどのように使い分けるか、それぞれの画像フォーマットの特徴を理解しておきましょう。

JPEG（ジェイペグ）

JPEGは写真などの精密な画像を非常に小さく圧縮することができるため、デジタルカメラなどで広く採用されている画像形式です。

フルカラー1677万色まで表現することができるので、多くの色を使う写真やグラデーションが多用されたイラストなどをきれいに表現できます。「非可逆圧縮（不可逆圧縮）」でデータの軽量化をするため保存するたびに劣化してしまうので注意が必要です。JPEG形式で画像を保存する場合、元のデータをバックアップするなどの配慮が必要になります。

拡張子には「.jpg」と「.jpeg」がありますが中身に違いはありません。

GIF（ジフ・ギフ）

GIF（Graphics Interchange Format）は、扱える色数が最大で256色しかないため、写真やグラデーションのかかった画像などではきれいに表現することができません。極端に色数の少ない画像であればJPEGよりも高い圧縮率となりファイルサイズが非常に小さくなります。

写真等には不向きですが、ドット絵、図表などのグラフィックにはJPEGよりも適しています。
簡易的なアニメーションの表現ができることが特徴です。

拡張子は「.gif」になります。

PNG（ピング）

PNGは何度保存し直しても画質が劣化しない「可逆圧縮（ロスレス圧縮）」の画像形式です。画質の劣化が非常にすくないですがその分、ファイル容量が大きくなるので注意が必要です。PNG画像には「PNG-8」「PNG-24」「PNG-32」という3種類のファイルタイプが存在します。拡張子はどれも同じ「.png」になります。

形式	色数	透明
PNG-8	256色	〇
PNG-24	フルカラー（約1677万色）	×
PNG-32	フルカラー （約1677万色）	〇

PNG-8

PNG-8はGIF形式と同じく258色を表現する事ができ、ファイルサイズも軽いのが特徴です。単色のアイコンや色数の少ない画像に使われますが、写真やグラデーションといった表現は苦手なのはGIF形式の画像と同様です。透明を表現する事ができますが、半透明は扱えない画像形式です。

PNG-24

PNG-24はJPG形式と同じ約1,677万色を扱うことができます。JPEG形式と同様に写真やグラデーションに向いている画像形式です。画像を美しい形式で保存できますが、その分データ量は大きくなってしまいます。また、PNG-24は透過情報を持ちません。

PNG-32

PNG-32はPNG-24と同じ約1,677万色が扱えるうえ、258色の透過情報（アルファチャンネル）を持つ画像形式です。切り抜き写真などの美しい半透明などを使う場合にはPNG-32が最も適しています。

SVG（エスブイジー）

SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス) の略で、Adobe Illustaratorで扱うベクターデータ（パスやテキスト、シェイプなど）を画像として扱うことができます。GIF、JPEG、PNGなどのラスター形式の画像と違って、ベクター形式のためサイズを変更しても劣化しないことが特徴です。

他の画像ファイルと同じように<img>タグを使用して表示することができますが、XMLに準拠するテキスト形式なのでテキストエディタで編集することが可能で、HTMLに直接記述することもできます。そのため、CSSやJavaScriptを使って色を変えたり、アニメーションさせることもできます。テキストベースの画像形式のためデータ容量は軽くなりますが、あまりデータが複雑になると表示するために膨大な処理を必要するため注意しなければなりません。ロゴマークやアイコンイメージなどに適しています。