TAG index
ホームページ作成ガイド

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

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

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


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

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


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

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

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

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


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


適した形式を使用した例

写真 イラスト
写真(JPEG形式)
データ量 4.5KB
イラスト(GIF形式)
データ量 5.6KB

どちらの画像も、問題なくキレイに表示されています。


適さない形式を使用した例

写真 イラスト
写真(GIF形式)
データ量 19.6KB
イラスト(JPEG形式)
データ量 6.5KB

▼分かりやすくするため大きさを2倍にしてみました

写真
写真をGIF形式で保存した場合、全体的に画質が粗くなってしまいます。この例の場合、特に太陽の周辺が正常に表現されていません。

イラスト
単調なイラストをJPEG形式で保存した場合、全体的に画質が滲んでしまいます。この例の場合、文字の周囲などが特に滲んでしまっています。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲