19. 画像を表示しよう

Webページには、画像を表示することができる。まあ、これは普通にページを見てれば分かることだが、 まずは、そのファイル形式（ファイルフォーマット）と呼ばれる部分からお話をしよう。

画像形式

Webページに画像を表示する場合、その画像形式が何でもいいというわけにはいかない。 主に使用できる形式と、その特徴を以下に示す。

GIF（Graphics Interchange Format）形式

GIF形式は、最大256色までの色を扱うことのできる圧縮画像形式です。 色数の少ないロゴ、リンクボタン、アイコン、イラストなど、 単色ベタ面を多く含む平坦な画像に向いています。 逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。

GIFには、通常の画像以外に以下のような拡張された形式のものもある。

透過GIF
特定色を透明化し、画像の背景を透過表示するGIF形式
アニメーションGIF
複数画像を1つのファイルに収録してアニメーション表示するGIF形式
インターレースGIF
ファイル読み込みの時に段階的に画像を表示するGIF形式
JPEG（Joint Photograph Experts Group）形式

JPEG形式は、最大1670万色まで扱うことができる圧縮画像形式です。 このため、多くの色数を必要とする写真、グラデーションのように色調が連続して変化する画像に適しています。 また、インターレースGIFに相当するものとしてプログレッシブJPEGがある。

PNG（Portable Network Graphic）形式

GIFの代替フォーマットとして開発され、256階調や1677万色などが扱え、理論上最大280兆色まで対応している。 また、画像に付属するテキスト情報、パレット情報、αチャンネル、ガンマ値などを個別に記録できる。

GIFとの差異は以下のようなものである

  • PNGはアルファチャンネルを利用して透過GIF同様の表現が可能
  • GIFはアニメーションをサポートしているが、PNGはサポートしていない
  • インターレスGIFと同様にインターレスPNGが可能

img要素

(X)HTMLにおいて画像を表現するためには、img要素を使用する。

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

imhg要素は空要素であり、終了タグを記述しない。また、src属性とalt属性は必須属性であり、必ず記述しなければならない。 以下に主な属性について説明する。

src属性
表示させたい画像へのURLを記述する。
alt属性
画像を表示できない場合の代替テキストを記述する。代替テキストが存在しない場合でも、 この属性を省略することはできない。その場合には、空文字列として記述する。 
alt = ""  空文字列の指定
height属性
画像の高さをピクセル単位で指定する。元画像と高さが異なる場合は、 指定された値に拡大縮小されて表示される。 また、％指定も可能であるが、100%の基準が元画像にならないブラウザも存在するので、 その使用は避けた方が無難である。
width属性
画像の幅をピクセル単位で指定する。元画像と幅が異なる場合は、 指定された値に拡大縮小されて表示される。 また、％指定も可能であるが、100%の基準が元画像にならないブラウザも存在するので、 その使用は避けた方が無難である。

height属性とwidth属性は任意指定が可能であるが、なるべく指定した方がブラウザへの負荷が軽くて済む。 また、すべての属性は引用符で囲むことにも注意して欲しい。最後に使用例を示す。

<img alt="HTML入門" src="htmlImage.jpg" width="640" height="100" />

ページの先頭に戻る

Copyright © 2006 御隠居 (滄洲). All Rights Reserved.