WEBで扱う画像/HTML基礎講座

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

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

■ 画像形式による表示の差異: 下記の写真とイラストは JPEG、GIF、PNGの３つの形式です。; それぞれ Abode Photoshop 6.0 で作成したものを掲げました。

＜写真サンプル＞

`JPEG`形式フルカラー 7.72KB	`GIF`形式64色 13.6KB	`PNG-8`形式16色 13.1KB

写真における３つの形式で比較すると　JPEG形式が優れた表示能力があります。しかしこれは Webページを訪れた閲覧者の環境が、フルカラーをサポートしているという条件を前提として、このようにきれいに表示できるということです。

最近のパソコンならほとんど問題ありませんが、少し古いパソコンですと GIF や PNG のようにボヤけるかもしれません。

写真の GIF は 64色で作りましたが、256色ですと、16KBを超えてしまいます。また、同様に写真の PNG形式で 256色では 19KB以上、24ビット形式では 90KBという恐ろしく重たい容量になってしまいます。

＜イラストサンプル＞

`JPEG`形式フルカラー 5.71KB	`GIF`形式256色 6.38KB	`PNG-8`形式256色 7.03KB

しかしながら、256色で書いたイラストにおける JPEG では圧縮率の関係から汚いゴミのようなものが表示されます。また、256色でのイラストなどの画像は GIF や PNG のほうが容量も小さいので適した形式といえます。扱う画像によって適切な形式を選択しましょう。

初版公開日 2002年5月1日最新更新日 2004年1月28日

■ WEBで扱う画像