POINT
■色数の少ない単純な図版にはGIFが、写真など色数の多い画像にはJPGが適しています。
■PINGにはアルファチャンネルという機能があり、透明度が自由に設定できます。
■画像形式を適切に選ぶことは、画像表示スピードの改善や、サーバーのデータ転送量の削減にも貢献します。

【画像素材の種類】
Webページに掲載する図版や写真などの画像形形式には、さまざまな種類があります。目的や用途に合わせて適切な形式を選ぶことが大切です。広く利用されている形式は、以下の通りです。

■GIF
GIF（Grafic Interchange Format）は、情報通信向けに作られた画像形式です。ビットマップ形式を採用し、1つの画像で256色まで利用できるため、図表や概念説明図など、それほど多くの色表現を必要としない画像に用いることが多いようです。
GIFには任意の色を透明にする「透過GIF」という拡張機能があり、ロゴ、ボタン、アイコンなどでよく利用されます。また、複数の画像を1つの画像にまとめ、自動で切り替えることで紙芝居のようなアニメーション効果をつける「アニメGIF（アニメーションGIF）」という拡張機能もあります。

GIF写真

■JPEG
写真など豊富な色数が必要な画像にはJPEG（Joint Photographic Experts Group）を利用するのが適しています。約1,677万色の色表現が可能です。人間の目に分かりづらい部分の色情報を間引く「圧縮」という方法でデータ容量を減らすことができますが、不可逆圧縮なので一度下げた画質を戻すことはできません。また、JPEG2000と呼ばれるフォーマットも存在します。JPEG2000は不可逆圧縮時のにじみを抑え、圧縮率も向上していますがWebブラウザでの表示にプラグインを必要とする場合があったり、デジタルカメラメーカーで採用が進んでいないため、一般的ではありません。

JPEG写真

■PNG
PNG（Portable Network Graphics）には256色を扱える8ビット形式とフルカラーを扱える24ビット形式の2種類があり、24ビット形式ではアルファチャンネルという機能が利用できます。これは画像の透明度を自由に設定できる機能で、例えば50％の透明度で背景と重ねる画像の作成が可能です。IEがIE6までアルファチャンネルに対応してこなかった経緯があります。ところが最近ではJava Scriptライブラリの登場や、IE6のシェア低下（2014年でサポートが終了していると思います）によって利用される機会が増えてきています。

PNG写真

■SVG
ベクター図形を扱うフォーマットとしてSVGにも注目が集まっています。XMLで記述するため加工も容易で、Java Scriptとの連携やハイパーリンクの埋め込みなども可能です。また、ベクター形式であるため、拡大縮小を行っても描画の劣化が起きません。

ブロードバンド環境が普及し、大きな画像データの読み込みにかかるストレスは小さくなりましたが、ページビューの多いサイトでは送信量が膨大になり、サーバー負荷が大きくなります。ユーザーの接続環境や運用コストを考慮し、各画像を適切な形式で保存することがWebサイトの快適なブラウジングを支えます。

■参考
同一写真の解像度の差

JPEG高解像度

JPEG低解像度1

JPEG低解像度2