絵で見るインターネット komakusaはインターネットの仕組みを絵で伝えるためのサイトです

                    絵で見るインターネット        お問合せ             Profile              リ ン ク

ホームページの画像

1.ホームページに利用可能な画像の種類
GIF(Graphics Interchange Format)

線画、ロゴ、文字の入ったイラストなど、単純で色の区切りがはっきりしている画像にむく形式です。 細部の鮮明さを保ちながら、単色の部分を圧縮します。また、GIF形式は、アニメーションを作成する際にも使用します。 GIF 形式は圧縮中にデータが捨てられることはありません。

《GIF形式に向く画像》
GIF形式で保存
ファイルサイズ 550バイト
JPEG形式で保存
ファイルサイズ 2,367バイト
GIF形式の約4.5倍


JPEG(Joint Photographic Experts Group)

写真や連続色調画像に見られるような広範囲で微妙に変化する画像にむく形式です。 JPEG は、抜粋的にデータを捨てながらファイルを圧縮します。 このため保存のたびに画像の品質が低下します。

《JPEG形式に向く画像》

GIF形式で保存
ファイルサイズ 6,435 バイト
JPEG形式の約3倍
JPEG形式で保存
ファイルサイズ 2,185バイト


PNG(Portable Network Graphics)

GIF 形式の代わりに使用できるように開発された形式です。 PNG 形式では、GIF 形式より、エッジが滑らかで透明な背景を作成できます。ただし、旧バージョンの Web ブラウザでは PNG 画像がサポートされない場合もあります。

2.画像を最適化してファイルサイズを小さくする

画像はインターネットの回線を使って伝わる情報です。情報量はできるだけ小さくしましょう。
最適化の方法は下記(a)〜(c)の3通りあります。

(a)画像の不要な部分を切りとって小さくする。例の図では青枠の外側を切り捨てています。
  情報量は約半分になります。

         
       元画像300×225                         切り取った後の画像207×160 
         (ファイルサイズ 35,850バイト)                  (ファイルサイズ 17,750バイト)           

(b) 画像の解像度を小さくする。(情報をあらわす点の数を減らして縮小する)
   画面に貼りつけてから画像サイズを縮小したのではファイルサイズは大きなままです。
  例の図は縦横の長さを3分の1に縮小していますが、ファイルサイズは約6分の1になりす。

           
 元画像 300x200(ファイルサイズ20,925バイト)       → 解像度変更後 100×67(ファイルサイズ3,665バイト)

(c) 減色と圧縮を行ってファイルサイズを小さくする。 (見た目はほとんどかわりません) 
 Photoshopを使えば「WEB用に保存」することで見た目を変えずにファイルサイズを小さくできます。


 

高画質 300×225

(ファイルサイズ103,060バイト)


 

中画質 300×225

(ファイルサイズ14,938 バイト)

 

低画質 300×225

(ファイルサイズ8,954バイト)

CM

分からない用語は下記から、参考書は右のボックスから検索してください。
用語を検索するときは『○○とは』 のように『とは』を入れて検索してください。

前へ   目次へ   次へ