<<PREV | TOP | NEXT>>

画像を利用する際の注意

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

画像は一般に情報量が大きいので、読み込みに時間が掛かります。閲覧者の便宜が最大限に図れるように心掛けましょう。

表示スペースの確保; width, height

画像を表示するスペースを指定しておくと、ブラウザは画像を読み込む前に必要な空間を確保できるので、周囲の要素を先に表示できます。画像を完全に読み込まないと後続の要素が表示出来ない場合に比べて、閲覧時の体感速度が向上します。

width = length [CN]
height = length [CN]

画像を表示する大きさを指定するのは width 属性と height 属性です。Les visages de la Joconde これらの属性の値は %Length; で定義されており、ピクセル数とパーセント値が可能です。

例えば、ここにある「モナリサ」の「プロパティ」を見てください。 Win. ならば画像を右クリックすると見られます。この画像のプロパティには、 「84 × 130 ピクセル」と表示されていると思います。これが画像の大きさです。そこで、この画像には、 width="84"height="130" を指定することになるでしょう。

<img
   src="http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg"
   alt="Les visages de la Joconde"
   longdesc="http://www.louvre.or.jp/louvre/francais/magazine/joconde/txtjocon.htm"
   width="84" height="130"
   align="left" style="margin:10">

Les visages de la Joconde

この画像に対して、 width="42" height="65" とすれば、縦横が半分に縮んだ 1/4 の画像が表示されます。ここで、表示サイズを変更しても、画像データには変化が無いので、画像のデータ・サイズが小さく出来ている訳ではないと云うことを確認してください。

画像フォーマット

画像の一般的なフォーマットは、 *.jpg, *.gif, *.png などです。 *.bmp, *.ps (*.eps) などは通常は利用しませんので注意してください。同じ画像でもフォーマットによってデータサイズは変わり、一般に *.gif ファイル(最高 256 色)のデータ・サイズが小さい傾向に有ります。 *.jpg ファイル(最高 16 万色)の圧縮率を上げることでデータ・サイズを小さくする場合も有ります。

GIF (Graphic Interchange Format)
JPEG (Joint Photographtc Expert Group)
PNG (Portable Network Graphics)

写真などの色数が多いものは JPEG 、ベタ塗りのイラストなどは PNG, GIF のように住み分けられているようです。

GIF に関しては、使用許諾条件が付きますので、商用利用などの際は、必ず確認を取ってください。ライセンス契約されたツールで作成された GIF 画像は使用可とされています。

画像データのサイズ

画像は、大きくなると(精密になると)、格段にデータ・サイズが大きくなります。大き過ぎる画像は読み込みに時間が掛かり、閲覧者の迷惑となるので、縮小された画像の方が安全です。精密な画像を提供したい場合は、本文には小さな画像(サム・ネイル)を用意して、そこから大きな画像へのリンクを張るようにするのが一般的です。

画像のデータ・サイズを小さくには次の方法が有ります;

これらは画像処理ソフトで加工することで実現します。

写真やイラストの公開などが主旨の場合も、最小の時間でどこに何があるか把握出来るようなページ作りが必要です。いちいち、巨大な画像を表示しないと先を読み進められないサイトには問題がありますので、そうならないように工夫してください。

<<PREV | TOP | NEXT>>

FC2> モビット