WEBで扱う画像

デジタルカメラやスキャナー、あるいは自分で作成したイラストやバナーなどをWebページに貼り付けることによって鮮やかなページができます。視覚的に訴える意味でも画像は欠かせないところですが、Webでは、こうした画像にも一定のルール(アクセシビリティ、ユーザビリティ)があります。

Webで扱える画像形式の代表的なものとして、JPEGGIFPNGの3つがあります。

画像形式による表示の差異
下記の写真とイラストは JPEGGIFPNGの3つの形式です。
それぞれ Abode Photoshop 6.0 で作成したものを掲げました。
<写真サンプル>
花_JPEG 花_GIF 花_PNG
JPEG形式フルカラー 7.72KB GIF形式64色 13.6KB PNG-8形式16色 13.1KB
写真における3つの形式で比較すると JPEG形式が優れた表示能力があります。しかしこれは Webページを訪れた閲覧者の環境が、フルカラーをサポートしているという条件を前提として、このようにきれいに表示できるということです。
最近のパソコンならほとんど問題ありませんが、少し古いパソコンですと GIFPNG のようにボヤけるかもしれません。
写真の GIF は 64色で作りましたが、256色ですと、16KBを超えてしまいます。また、同様に写真の PNG形式で 256色では 19KB以上、24ビット形式では 90KBという恐ろしく重たい容量になってしまいます。
<イラストサンプル>
花_JPEG 花_GIF 花_PNG
JPEG形式フルカラー 5.71KB GIF形式256色 6.38KB PNG-8形式256色 7.03KB
しかしながら、256色で書いたイラストにおける JPEG では圧縮率の関係から汚いゴミのようなものが表示されます。また、256色でのイラストなどの画像は GIFPNG のほうが容量も小さいので適した形式といえます。扱う画像によって適切な形式を選択しましょう。


This Page is HTML4.01 Valid! 初版公開日 2002年5月1日   最新更新日 2004年1月28日
Copyright(C) 2002〜2008 banban