ステップアップ＆テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / GIFとJPEGの使い分け

GIFとJPEGの使い分け

無料・有料レンタルサーバー比較

ホームページで使用する画像の形式は、GIF形式とJPEG形式が一般的です。

この2つの形式を適切に使い分けることで、キレイで軽い画像をホームページ上で使用することができます。

GIFとJPEGの使い分け
GIFとJPEGの比較

　GIFとJPEGの使い分け

GIF形式	・使用できる色数は256色まで・背景を透過することが可能・イラストなどの単調な画像に適している
JPEG形式	・使用できる色数は1670万色まで・圧縮率を変更することでデータ量を減らすことが可能・写真などの複雑な画像に適している

色数の少ない単調なアイコンやイラストなどは、GIF形式が適しています。もしこのタイプの画像をJPEG形式で保存した場合、画質が悪くなったり（滲んでしまう）、GIF形式に比べデータ量が大きくなってしまう場合があります。

写真や色数の多い複雑なイラストなどは、JPEG形式が適しています。もしこのタイプの画像をGIF形式で保存した場合、画質が悪くなったり（ムラができてしまう）、JPEG形式に比べデータ量が大きくなってしまう場合があります。

画像のタイプに適した形式を使用すれば、キレイな画質のまま表示することができ、更には画像のデータ量も抑えることができます。逆に、適さない形式を使用した場合は、画質は極端に悪くなり、更にはデータ量も不必要に大きくなってしまう場合があります。

PageTop▲

　GIFとJPEGの比較

画像のタイプに適した形式を使用した場合と、適さない形式を使用した場合の表示例です。

■適した形式を使用した例