17: Images in HTML

OperaWSC HTML

A picture says more than a thousand words --or does it?

  • ケータイとかでは画像は表示されないかもしれない
  • ユーザは目が見えないとかで画像を見ることができないかもしれない
  • 異文化圏の人にはそのアイコンの意味がわからないかもしれない
  • 検索エンジンは画像をインデックスしない（今のところ）ので、画像に含まれる情報は見つけてもらえない

適切な画像を適切な場所で使うこと。それに加えて画像が見えないときの代替手段を用意すること。

Different types of images on the web -- content and background images

img element を使って文書の内容とする画像と、CSS を使って背景とする画像がある。いつどちらを使うかは

  1. 画像が文書の内容として重要なら img element を使う。著者の写真やなんらかのデータのグラフなど。適切な代替テキストを用意すること。
  2. 見た目をキレイにするだけなら CSS で背景にする。代替テキストは必要ない。

The img element and its attributes

img element 使えばカンタン。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
   <title>Example of an inline image</title>
</head>
<body>
</body>
   <img src="balconyview.jpg">
</html>

Providing a text alternative with the alt attribute

さっきので画像は表示されるが、img element には alt attribute が必須なので妥当ではない。この attribute に画像が見えないときに代わりに使うテキストを持たせる。

  • 画像ファイルが見つからない
  • ブラウザがその画像をサポートしていない
  • screen reader は alt attribute の内容を読み上げる

適切な代替テキストを alt attribute に指定すること。

"alt tag" について説明している文書もあるが、そんなものは存在しない。img element の alt attribute を使うのが正しい。これはアクセシビリティと SEO に関して非常に重要。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Example of an inline image</title>
</head>
<body>
   <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle."
</body>
</html>

alt attribute のテキストは、画像が利用できないときに表示される。画像がちゃん表示されたなら、alt attribute のテキストは表示されるべきではない。IE は画像にマウスポインタをしばらく当てたときにツールチップとして代替テキストを表示する。そのせいでみんな追加の情報を alt attribute に指定するが、これは間違っている。追加の情報を指定するには title attribute を使う。

Adding nice-to-have information using the title attribute

ほとんどのブラウザは画像にマウスポインタを重ねておくと、img element の title attribute をツールチップとして表示する。これは便利だが、マウスが利用できない場合もあるので安全ではない。

Using longdesc to provide an alternative for complex images

とても複雑な画像については、longdesc attribute で長い説明を与えられる。これで screen reader や画像を無効にしている人でもその情報を得られる。
この attribute には同等の情報を持つ文書の URL を指定する。なんらかのデータのグラフであれば、そのデータの表など。

<img src="chart.jpg" width="450" height="150" 
     alt="Chart showing the fruit consumption amongst 15 years olds.
          Most children ate Pineapples, followed by Pears"
     longdesc="fruitconsumption.html">

fruitconsumption.html には同じデータが単純な表の形で含まれている。
見た目にはこの画像に長い説明があることはわからないが、補助的な技術*1を使えばそれがあることはわかる。

Faster image display by defining the dimensions using width and height

user agent は img element を見つけると、その src attirbute が指す画像を読み込むを始める。このとき、最初は画像の大きさがわからないので、その後のテキストなどは詰めて表示され、画像の読み込みが終わるとその後のテキストをずらす。このせいでページの読み込みが遅くなり、ユーザーは混乱する。これを防ぐために width と heigt attribute を使って、画像を読み込む前に大きさを指定しておく。

<img src="balconyview.jpg"
     alt="View from my balcony, showing a row of houses, trees and a castle"
     width="400"
     height="186">

これで画像を読み込むまでは画像と同じ大きさのスペースを塞いでおき、後からずれるのを防ぐことができる。画像のサイズを変更することもできるが、ブラウザでの拡大・縮小はあまり質が高くないので要注意。サムネイルを表示するのにこれらの attributes で縮小するというのは、読み込む画像のファイルサイズは変わらないのでよろしくない。

so much for inline images

他にも画像に使える attributes はあるが、ほとんどは deprecated。CSS 使え。
画像は（デフォルトでは）インライン要素だが、CSS でブロック要素のように表示させることもできる。

Background images with CSS

超訳: CSS 万歳

How to apply backgrounds with CSS

background-image:url(ball.gif);
background-color:#eee;

background-image selector に背景とする画像の URL を指定する。画像を利用できないときのために background-color selector で背景の色も指定する。
デフォルトでは背景画像は縦にも横にもリピートする。background-repeat selector で変更できる:

リピートしない
`background-repeat:no-repeat;`
横方法のみ
`background-repeat:repeat-x;`
縦方向のみ
`background-repeat:repeat-y;`

デフォルトでは（リピートされなければ）画像は左上に配置される。background-position で指定できる。カンタンなのは、縦方向には top, center, bottom、横方向には left, center, right。`background-position:bottom-right` とか。

Summary

  • img element とその基本的な attribute
    • src: 画像の場所
    • alt: 画像を利用できないときの代替テキスト
    • title: 追加の情報
    • longdesc: 別のファイルにテキストで表現された同じ内容のデータ
    • width, height: 画像の大きさ
  • 基本的な背景画像の CSS
    • いつ使うか: 見た目だけのとき
    • リピートと配置を指定する

Exercise Questions

Why is it important to add good text to an image in an alt attribute and do you really need one?

画像が利用できないときの逃げ道

If you have an image that is 1280x786 pixels large and you want to show a 40x30 pixel thumbnail, can you do that in HTML and is it wise to do so?

できるにはできるが、賢くはない

What does the longdesc attribute do, and how do browsers show it?

longdesc attribute は画像の内容を画像以外で表現されたページの URL を持つ。ブラウザがどう使うかはあとで調べる。

What do the valign and the align attributes do and why weren't they covered here?

なにそれ喰えるの？

Where are CSS background images positioned inside an element by default, and how do they get repeated by default.

左上から縦横にリピート

*1:screen reader とかのこと？