2010年12月27日月曜日

ホームページを作ろう - 1.19 画像を表示しよう

1.19 画像を表示しよう

Webページには,画像を表示することができます。これは普通にページを見ていれば分かることですが,まずは,その画像のファイル形式(ファイルフォーマット)と呼ばれる部分から説明します。

1.19.1 画像形式

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が可能です。

1.19.2 img要素

XHTML(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属性は必須属性であり,必ず記述しなければなりません。以下にimg要素で使用する主な属性について説明します。
src属性
表示させたい画像のURLを記述します。
alt属性
画像を表示できない場合の代替テキストを記述します。代替テキストが存在しない場合でも,この属性を省略することはできません。そうした場合には,空文字列を記述します。
alt = ""  空文字列の指定
height属性
画像の高さをピクセル単位で指定します。元画像と高さが異なる場合は,指定された値に拡大縮小されて表示されます。また,%指定(相対値)も可能ですが,100%の基準が元画像にならないブラウザも存在するので,その使用は避けた方が無難でしょう。

width属性
画像の幅をピクセル単位で指定します。元画像と幅が異なる場合は,指定された値に拡大縮小されて表示されます。また,%指定(相対値)も可能ですが,100%の基準が元画像にならないブラウザも存在するので,その使用は避けた方が無難でしょう。
height属性とwidth属性は任意指定が可能ですが,なるべく指定した方がブラウザへの負荷が軽くて済みます。また,すべての属性は引用符で囲むことも注意してください。最後に使用例を示します。
<img alt="HTML入門" src="htmlImage.jpg" width="640" height="100" />

0 件のコメント:

コメントを投稿