img要素のサンプル
img要素は、ドキュメントにイメージ（画像）を組み込むために使います。
img要素の、終了タグは禁止となっています。ただし、<img />のように終了タグを表すスラッシュを開始タグに入れる表記は可能です。
レイアウト目的で img要素を使うべきではありません。よく、マージンのために、1×1 ピクセルの透明画像を使ったマークアップを見かけることがありますが、これはスタイルシートで対処すべきです。
img要素のマークアップ例
<img src="imgs/img0001.png">
img要素のサンプル
img要素では src属性は必須です。
src属性には、ドキュメントに組み込みたいイメージを表す画像ファイルなどの URLをセットします。通常は、GIFや JPEGといった画像ファイルを指定することが多いと言えますが、HTML5仕様では、それに限定していません。ブラウザが対応している必要はありますが、仕様上では、スクリプトを伴わない SVGファイルや、単一ページの PDFファイルを指定することも可能です。
SVGファイルを img要素で組み込んだ例
<img src="logo.svg">
PDFファイルを img要素で組み込んだ例
<img src="logo.pdf">
SVGファイルについては、safari、Chrome、Operaが対応しています。PDFファイルについては、Safariが対応しています。
width属性にイメージの横幅のサイズを、height属性にイメージの縦幅のサイズを指定することができます。
いずれも、サイズを指定する場合には、CSSピクセルを単位とした 0 以上の数値でなければいけません。
img要素のマークアップ例
<img src="imgs/img0001.png" width="96" height="96">
img要素のサンプル
上で使った画像の元サイズが、32x32ピクセルで小さく見づらいため、３倍の大きさ、96x96ピクセルに指定してみました。
img要素のサンプル（width="96"のみ指定した場合）
img要素のサンプル（height="96"のみ指定した場合）
width属性、または height属性の片方だけを指定した場合は、自動的に元のイメージの縦横比を維持してくれるようです。イメージを使用する場所や用途に応じて指定の仕方を検討するといいのかもしれません。
img要素のサンプル（width="96" height="32"の場合）
img要素のサンプル（width="32" height="96"の場合）
ここで使ったイメージだと歪んでしまいましたが、縦横それぞれの数値を指定することもできます。
usemap属性は、クライアント側で実現するイメージマップのために使います。この属性の値には、そのイメージに結び付ける map要素のハッシュ名参照を指定します。ハッシュ名参照とは、map要素の name属性値の先頭に # を加えたものです。
イメージマップのマークアップ例
<p>
形状を選択してください：
<img src="shapes.png" usemap="#shapes" alt="赤色の穴あきボックス、緑色の円、青色の三角形、黄色の星の 4 つの形状が利用できます。">
<map name="shapes">
<area shape="rect" coords="50,50,100,100"> <!-- 赤色のボックスの穴 -->
<area shape="rect" coords="25,25,125,125" href="red.html" alt="赤色のボックス">
<area shape="circle" coords="200,75,50" href="green.html" alt="緑色の円">
<area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="青色の三角形">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="黄色の星">
</map>
</p>
詳細については、map要素と area要素を御覧ください。
ismap属性は、論理属性です。このコンテンツが指定されている場合、そのイメージは、サーバー・サイド・イメージマップを構成するイメージであることを表します。
サーバー・サイド・イメージマップのマークアップ例
<a href="http://example.jp/map.cgi">
<img src="map.png" width="500" height="500" ismap="ismap">
</a>
この例では、img要素で表されたイメージ全体がハイパーリンクとなりますが、その img要素に ismap属性が指定されているため、サーバー・サイド・イメージマップとして、ブラウザに処理されることになります。
ブラウザは、サーバー・サイド・イメージマップがクリックされたら、a要素の href属性に指定されたアドレスに対して、クリックされた座標情報を送ります。前述の例では、次のような URLで GETリクエストを送ることになります。
321 の部分はクリックされた位置の x座標、233 は y座標を表します。このように、クリックされると、map.cgi の後ろに ? が加えられ、さらに x座標の数字、半角カンマ、y座標の数字が加えられ、その URLに対して GETメソッドでリクエストされます。
この座標系は、イメージの左上端を (0, 0) とし、右に向かって x座標の値が大きくなり、下に向かって y座標の値が大きくなります。
サーバー・サイド・イメージマップを使う場合は、サーバー側で、それを受ける仕組みが必要となります。HTMLのマークアップだけで実現できる機能ではありませんので、あまり使われていない機能ですが、複雑なイメージマップを扱いたい場合は、サーバー・サイド・イメージマップの方が、扱いやすい場合もあるでしょう。
img要素に ismap属性を指定する場合、href属性を伴った a要素の中に、その img要素を入れなければいけません。そうでなければ、img要素に ismap属性を指定することはできませんので、注意してください。
HTML4では、longdesc属性が規定されていました。この属性は、alt属性の代替テキストを補足・補強するためのページの URLを指定することを想定したものでした。
ところが、実際には、この longdesc属性はあまり使われることがありませんでした。さらに悪いことに、longdesc属性を使っていたとしても、それを正しく使っている利用例が非常に少ないという状況でした。その多くは、属性値が空だったり、適切な URLでなかったり、src属性と同じ URLを指定していたり、イメージを組み込んでいるページそのものの URLを指定していたり、img要素の親要素の a要素の href属性の値を指定するといった誤用だったのです。
このため、longdesc属性は、HTML4で規定されてから 10年以上経過していたにもかかわらず、ほとんど機能していなかったというだけでなく、混乱を招く使い方をされていることが多く、アクセシビリティに全くといっていいほど貢献してこなかったという理由で、HTML5では廃止されました。
img要素は、src属性と alt属性がどのような組み合わせで指定されているかによって、そのセマンティクスが違ってきます。
| src | alt | img 要素の意味 |
|---|---|---|
| 指定あり | 空文字列 | 装飾的または補足的なイメージを表し、ドキュメントでその内容について触れられ、重複したものであることを表します。 |
| 指定あり | 指定あり | コンテンツとして重要なイメージを表します。alt属性は、そのイメージの代替テキストとなります。 |
| 指定あり | 指定なし | コンテンツとして重要なイメージを表します。しかし、そのイメージを説明するテキストはありません。 |
| 指定なし | 空文字列 | この要素は何も表しません（存在しないのと同じ）。 |
| 指定なし | 指定あり | この要素は alt属性指定されたテキストを表します。 |
| 指定なし | 指定なし | この要素は何も表しません（存在しないのと同じ）。 |
ただし、これらすべての組み合わせが、ウェブ制作の要件として推奨されているわけではありません。あくまでも、HTML5仕様では、考えられるすべての組み合わせにおいてセマンティクスを規定しているに過ぎません。実際にウェブ制作で img要素をマークアップする場合は、後述の alt属性の規定に従う必要がありますので、注意してください。
alt属性は、HTML4では、イメージを簡単に説明する代替テキストとして規定されていました。しかし、HTML5では、アクセシビリティを考慮し、alt属性に、さらに大きな役割を与えています。
その役割とはフォールバックです。もしイメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことが求められるのです。
例えば、文章の中に挿入されたイメージであれば、そのイメージが表すものを言葉で表すことになります。すべてのイメージを、alt属性のテキストに置き換えて表示しても、ページの意味が変わることなく、正しくユーザーに伝わることが肝要です。
決して、イメージのタイトルを alt属性に入れてはいけません。イメージのタイトルであれば、グローバル属性である title属性を使ってマークアップするべきです。alt属性は、このようなタイトルや補足を表すようなコンテンツではなく、イメージと同じ枠割が求められるのです。
しかし、実際に、alt属性にどのようなテキストを入れれば良いか、迷うこともあるでしょう。HTML5仕様では、電話越しの相手に言葉でイメージを説明するとしたら、あなたならどのようにそれを伝えるのかを考えるのが良いと言っています。
alt属性の存在意義は、スクリーンリーダーやロボットなど、イメージを見ることができないユーザーに対しても、適切に意味を伝えることです。HTML5仕様のアドバイスの通り、電話越しにイメージを説明することを想定して考えてみると良いでしょう。
また、alt属性は、HTML4では必須でした。そのため、alt属性が必要とは思えないシーンでも、空文字列をセットするといったことが行われてきました。
しかし、HTML5では必ずしも必須ではありません。その代わり、alt属性を省略しても良い条件が規定されています。その条件に一致しない限りは、alt属性は必須です。また、空文字列を指定すべきシーンについても規定されています。
このように、HTML5では、alt属性の使い方が細かく規定されています。バリデータでは、alt属性の内容にまで踏み込んでチェックすることはできません。つまり人が見ない限り、それが適切かどうかを判断することができません。ウェブ制作においては、アクセシビリティを十分に考慮した上で、alt属性の内容を検討するようにしましょう。
それでは、HTML5仕様での alt属性の用途の規定を 1つづつ見て行きましょう。
ハイパーリンクとなる a要素、もしくは、button要素の中にイメージしか入っていない場合、そのイメージを表す img要素の alt属性には、そのリンクやボタンの目的を説明するテキストを入れます。
a要素の場合
<a href="profile.html"><img src="me.jpg" alt="私のプロフィールへ"></a>
button要素の場合
<button name="next"><img src="right-arrow.png" alt="次へ"></button>
場合によって、複数の画像を組み合わせて、１つのボタンを表したい場合もあるでしょう。この場合は、最初の img要素の alt属性にリンクの目的を入れ、それ以外の img要素の alt属性は空文字列とします。つまり、最初以外の img要素では、alt="" とするのです。alt属性を省略してはいけませんので、注意してください。
複数のイメージを入れた場合
<button name="set">
<img src="set-left.png" alt="セット">
<img src="set-middle.png" alt="">
<img src="set-right.png" alt="">
</button>
もし、前述の例で、３つの画像がそれぞれ上から順番に、"セ"、"ッ"、"ト"の 1文字ずつを表しているものだとしたら、次のようにマークアップすることも可能です。
１文字ずつ別々の画像で表す場合
<button name="set">
<img src="set-left.png" alt="セ">
<img src="set-middle.png" alt="ッ">
<img src="set-right.png" alt="ト">
</button>
このように、リンクやボタンが、img要素だけで構成されている場合、それぞれの alt属性のテキストのみを上から順番に取り出して、それぞれのテキストをつなげて意味が分かるようにすれば良いのです。
しかし、いくらつなげて意味が通るといっても、それぞれの img要素が表す文字とは関係がない文字を alt属性に入れるべきではありませんので、注意してください。すべての画像が文字を表さないようであれば、最初の例のように、最初の img要素の alt属性にまとめてテキストを入れ、残りの img要素の alt属性には、空文字列をセットするようにしてください。
これは、img要素の最も一般的な用途と言えます。チャート、グラフ、地図、挿絵といったイメージを本文の中で使い、それを見ることを前提にコンテンツが構成されたシーンを想定しています。
このように本文の中にイメージを入れる場合は、もしそのイメージが表示されなかったとしても、alt属性にセットされたテキストに置き換えることで、何ら意味が変わることなく、そして、イメージが表示された時と、出来る限り同等の意味が伝わるようにしなければいけません。
注意すべき点は、このシーンで使われる img要素の alt属性は、そのイメージの説明ではないという点です。あくまでもイメージの代役として機能しなければいけません。イメージを説明することと、イメージの代役を果たすことの違いがよく分かる例をご覧頂きましょう。まず、次のレンダリング結果を御覧ください。
レンダリング例
友達の結婚パーティに参加して来ました。久々にマリゾンまで行ったので、パチリ。
まぁ・・・特に珍しいものでもないけど、なんとなく？ｗ
このシチュエーションで、この画像の alt属性に何を入れるかを考えてみましょう。まずは、不適切な例を御覧ください。
不適切な alt属性のテキスト例（イメージの説明）
<p>友達の結婚パーティに参加して来ました。久々にマリゾンまで行ったので、パチリ。</p>
<img src="imgs/img01.jpg" alt="福岡タワーをバックに撮った写真をセピア風に加工したものです。">
<p>まぁ・・・特に珍しいものでもないけど、なんとなく？ｗ</p>
この alt属性のテキストは、イメージの説明になってしまいます。イメージの代役を果たすテキストとは言えません。このテキストは、どちらかと言うと、title属性を使うのが適しています。
イメージの代役を果たすというのは、イメージの前後の文章と、alt属性のテキストをつなげて読み上げた時に、イメージがあった場合と同じ内容が違和感なくユーザーに伝わることなのです。この場合であれば、次のようなテキストを使うほうが適切だと思います。
適切な alt属性のテキスト例（イメージの代役）
<p>友達の結婚パーティに参加して来ました。久々にマリゾンまで行ったので、パチリ。</p>
<img src="imgs/img01.jpg" alt="福岡タワーをバックに撮影してセピア風に加工してもらいました。">
<p>まぁ・・・特に珍しいものでもないけど、なんとなく？ｗ</p>
ちょっとした表現の違いで、テキストの目的が変わってしまいますので、alt属性と title属性の使い分けには注意してください。
ウェブ・ページではよくロゴやアイコンが使われます。ロゴやアイコンは、会社、組織、商品、国といった、さまざまな実体を図によって表したものです。しかし、ロゴやアイコンがどのように使われるかによって、alt属性の扱いが異なってきます。
まず、アイコンの横に、その意味を表すテキストが添えられた例を見てみましょう。
テキストが添えられたアイコンのマークアップ例
<p><a href="/feed"><img src="feedicon.png" alt="">フィード</a></p>
このようにイメージの横に、その意味を説明するテキストがある場合、そのイメージは補足的なものでしかありません。つまり、このアイコンの意味を説明する必要はありません。スクリーン・リーダーがこの例を読み上げることを考えるとわかりやすいでしょう。もし alt属性に、そのアイコンの意味を表すテキストを入れてしまうと、その内容が２回も読み上げられることになります。そのため、このような場合は、alt属性には空文字列をセットします。しかし、alt属性を省略してはいけませんので、注意してください。
次に、アイコンの横に、それを説明するテキストがない場合を考えてみましょう。アイコンを見ただけで、その意味が誰にでも分かる場合があります。そのようなアイコンには、わざわざ、それを説明するテキストを添えない場合が多いと言えるでしょう。このような場合には、そのアイコンの意味を alt属性にセットします。
テキストが添えないアイコンのマークアップ例
<p>この機能は、次のブラウザが対応しています。</p>
<ul>
<li><img src="firefox.png" alt="Firefox"></li>
<li><img src="safari.png" alt="Safari"></li>
<li><img src="chrome.png" alt="Chrome"></li>
</ul>
会社やサイトのロゴについても、その会社やサイトの名前が横にテキストで添えられていないのであれば、alt属性には、その会社名やサイト名を入れます。
会社ロゴのマークアップ例
<header>
<img src="logo.png" alt="オレンジ・コンピュータ株式会社">
：
</header>
このような会社のロゴを img要素でマークアップする場合、alt属性のテキストを "ロゴ" としてはいけません。必ず、その実体を表す名前を入れるようにしてください。
ただし、ロゴそのものを話題にしたページでロゴ画像をマークアップする場合は、会社名ではなく、そのロゴのデザインを説明した文章を入れるべきです。
ロゴのデザインを話題にした場合のマークアップ例
<article>
<h1>当社のロゴマークの意味</h1>
<p>当社には、皆さんお馴染みのロゴマークがあります。</p>
<img src="logo.png" alt="橙色のみかんを横から見たマークです。上から一本の緑色の茎が出ており、そこから右側に緑色の葉っぱが1枚だけ伸びています。">
<p>もともと当社の創業者は、みかん農家でした。...</p>
</article>
このように、もしイメージが表示されなかったとしても、alt属性のテキストを読むことで、イメージが表示されていたのと同じ内容が読者に伝わるようにするべきです。
では、次に、ある会社に関するトピックを扱う記事の中で、装飾的に、その会社のロゴをマークアップした場合を考えてみましょう。よく、ニュース・サイトでは、ある会社のトピックを取り上げた記事に、その会社のロゴ・マークを入れることが多いと言えるでしょう。このように使われたロゴ・マークというのは、本文と切り離しても構わないイメージで、記事として必要不可欠なものではありません。このような場合は、aside要素の中に、そのイメージをマークアップし、alt属性には空文字列をセットするのが良いでしょう。無理に、alt属性に文章を入れる必要はありません。ただし、alt属性を省略してはいけません。
装飾用に使われるロゴのマークアップ例
<article>
<h1>オレンジ・コンピュータ株式会社が東証3部に上場</h1>
<aside><img src="orange-logo.png" alt=""></aside>
<p>ネット・ブックでお馴染みのオレンジ・コンピュータ株式会社が、東証3部に上場しました。</p>
：
</article>
以上のように、ロゴをマークアップするといっても、そのロゴ画像の利用目的によって、alt属性のテキストに求められる内容が変わってきますので、注意してください。
文字をデコレーションしたい場合、CSSでできることは限られています。そのため、文字そのものをイメージとして用意する場合があります。このような場合は、alt属性に、その文字を表すテキストを入れます。
ワードアートのマークアップ例
<h1><img src="title.png" alt="おもちゃの山田玩具本店"></h1>
この場合、ここで伝えたいことは、あくまでもイメージの中に書かれた文字または文章ですから、alt属性に、どんなワードアートが施されたイメージなのかを説明した文章を入れるべきではありません。素直に、イメージに書いてあるとおりの文章を入れてください。
本文で説明した上で補足的にイメージを添える場合、その img要素の alt属性は空文字列とします。
補足イメージのマークアップ例
<p>当社の売上は、2006年から前年比10％程度の伸びを続け、2009年には前年比50％の伸びを達成しました。</p>
<img src="graph.png" alt="">
この例の img要素には、2006年から 2009年までの売上の推移を表した棒グラフが描かれていると想定してください。この場合、イメージの内容は、すでに手前の段落で説明されています。このイメージがなかったとしても、コンテンツとしては全く問題ありません。
このような状況でイメージを使った場合には alt属性でイメージを説明する必要ではなく、空文字列とします。たとえ、前後の文章には説明されていない情報がイメージに含まれていたとしても、その情報がメイン・コンテンツにとって必要不可欠でないのであれば、無理に alt属性で説明を入れるべきではありません。
なお、alt属性を省略してはいけませんので、注意してください。
純粋にデコレーションのためだけに img要素を使うことは、推奨されません。もしデコレーションのためにイメージを使いたい場合は、スタイルシートを使うようにしてください。
しかし、ページによっては、なくても問題ないけれども、本文を連想させるようなイメージを使いたいこともあるでしょう。このようなイメージは、本文と無関係というわけではありませんで、img要素でマークアップするのが良いでしょう。また状況によっては、aside要素の中にイメージを入れると、よりセマンティクスがはっきりと伝わります。
この場合の img要素の alt属性には空文字列をセットします。alt属性を省略してはいけませんので注意してください。
関連イメージのマークアップ例
<h1>通勤ラッシュ</h1>
<aside><img src="rash.jpg" alt=""></aside>
<p>東京の通勤ラッシュは異常ですよね。毎日、もみくしゃにされて、朝からヘトヘトです。</p>
：
この例は、通勤ラッシュを話題にした記事を想定したものです。ここで使われている画像には、どこかの駅で、駅員が乗客を車両に押し込んでいるシーンが映し出されていると想像してください。
この写真は、該当の記事とは直接的には関係ありません。あくまでも補足情報でしかありません。この写真がなかったとしても、このページが伝えたい情報を損なうことはありません。このような場合は、alt属性で、写真の内容を説明する必要はありません。
１つの大きなイメージを、小さな画像ファイルに分割して、それぞれを img要素でマークアップすることがあります。もし、この大きなイメージがリンクを持たないなら、img要素の１つの alt属性に、そのイメージを伝えるテキストをセットし、それ以外の img要素の alt属性には空文字列をセットします。
分割画像のマークアップ例
<h1><img src="logo1.png" alt="おもちゃの山田屋"><img src="logo2.png" alt=""></h1>
この例は、サイト名を２つの画像を使ってマークアップしたものです。最初の画像には「おもちゃの」と書かれています。そして、２つ目の画像には「山田屋」と書かれています。この場合、１つ目の画像の alt属性にまとめて「おもちゃの山田屋」を入れ、２つ目の画像の alt属性は空文字列とします。
この例では、文字をデコレーションするために画像を使っているため、その画像を表している文字を alt属性にセットしましたが、もし、写真や図などを分割してマークアップした場合は、そのイメージが何を表しているかが分かるテキストを、最初の img要素の alt属性に入れてください。
１つの大きなイメージを、小さな画像ファイルに分割して、それぞれを img要素でマークアップすることがあります。もし、この大きなイメージがリンクを持つなら、イメージマップを使うべきです。
しかし、もし、それぞれの img要素が表すイメージごとにリンクの意味を持っているのであれば、それぞれの img要素の alt属性に、そのリンクの目的を入れます。
リンクを持った分割画像のマークアップ例
<p><a href="chapter3.html"><img src="prev.png" alt="前頁へ"></a><img src="middle.png" alt=""><a href="chapter5.html"><img src="next.png" alt="次頁へ"></a></p>
これはページ送りのリンクを画像を使ってマークアップしたものです。１つ目と３つ目は、それぞれ前頁と次頁を表示するためのリンクになっていますので、それぞれの alt属性に「前頁」「次頁」を入れています。２つ目の画像は何も表しませんので、alt属性は空文字列としています。
メイン・コンテンツの中核となるイメージを考えてみましょう。この場合のイメージは、そのコンテンツを理解する上では、非常に重要なものとなります。
このようなシーンで img要素を使う場合は、そのイメージが表す文章を alt属性にセットします。もし、画像が表示されなかったとしても、alt属性の内容を読めば、その画像が表しているものがどんなものかを把握できるようにしなければいけません。
もちろん、イメージが表している内容をすべて詳細に説明することは不可能です。可能な範囲で構いません。しかし、少なくとも、そのイメージから読み取ってもらいたいポイントは必ず入れるようにしましょう。
円グラフのマークアップ例
<p>当サイトに訪問したユーザーが使っていたブラウザの割合は下図の通りです。</p>
<figure>
<img src="imgs/img02.jpg" alt="Chrome 31.1%とInternet Explorer 28.1%で半数以上を占めています。その他、Safari 15.3%、Firefox 14.6%、Android Browser 7.5%と続きます。">
<figcaption>当サイトの訪問者のブラウザ・シェア</figcaption>
</figure>
円グラフのマークアップ例のサンプル
当サイトに訪問したユーザーが使っていたブラウザの割合は下図の通りです。
これは、あるサイトの訪問者が使っているブラウザの割合を円グラフで表したものと想定してください。円グラフには１０種類以上のブラウザの割合が表示されているとします。しかし、ここで言いたいことは、Chrome、と Internet Explorerの割合が多いことだとします。そのため、alt属性では、要点を押さえつつ、その他のシェアについても、無理の無い範囲で説明します。
ここで、alt属性に、タイトルを入れることがないようにしてください。この例で、alt属性に「円グラフ」や「当サイトの訪問者のブラウザ・シェア」と入れるのは間違いです。このようなタイトルは title属性の役割です。ただ、この例では、figure要素を使って、キャプションを figcaption要素でマークアップしていますので、img要素に title属性を使うべきではありません。もし figure要素を使わないのであれば、このようなキャプションは、title属性に入れた方が良いでしょう。
title属性を使ったマークアップ例
<p><img src="imgs/img02.jpg" title="当サイトの訪問者のブラウザ・シェア" alt="Chrome 31.1%とInternet Explorer 28.1%で半数以上を占めています。その他、Safari 15.3%、Firefox 14.6%、Android Browser 7.5%と続きます。"></p>
では、もう少し説明が難しい図を考えてみましょう。マンデルブロ集合は、説明が難しい典型的な図形です。
マンデルブロ集合
この図形を細かく説明することは不可能です。とはいえ、メイン・コンテンツのキーとなるイメージとして使っている以上、何かしらイメージの代用となるテキストを用意しなければいけません。この図形をページに表示したのには目的があるはずです。その目的が果たせるような文章をalt属性にセットするのが良いでしょう。
外観について話題にしている場合のマークアップ例
<img src="imgs/img03.jpg" alt="マンデルブロ集合は、正方向に実軸上に尖点を持ったカーディオイドとして現れます。それは、同じ中央線に沿って横に並べられたさらに小さい球を伴います。それは、負方向にそれに接しています。これら２つの形状は、さらに小さい様々なサイズの球によって囲まれています。">
実は、この alt属性にセットされた文章は、HTML5仕様の例に掲載されているものを日本語に翻訳したものです。恐らく、みなさんの多くは、この文章だけ読んでも、意味がわからないでしょう。このイメージの前後では、マンデルブロ集合に関する説明があったと考えられます。もしくは、ある程度の知識を持った読者を対象としているのでしょう。
いずれにせよ、ここでは、マンデルブロ集合の形がどのようなものかを話題にしているため、色についてまで言及していません。説明が難しいイメージを説明しだしたら、キリがありませんので、ある程度、要点を絞って説明するのが良いでしょう。
ただし、いくら説明が難しいと言っても、alt属性に空文字列をセットしたり、alt属性を省略してはいけません。簡単な説明だとしても、ないよりマシなのです。
HTML5仕様では、内容が事前にわからないイメージのマークアップ方法まで規定されています。非常にレアなケースですが、以下の状況が想定されます。
もちろん、これだけではありませんが、alt属性にセットできるテキストが用意できない場合があるのです。この場合、以下の条件に一致する場合にのみ、alt属性を省略（空文字列をセットするのではありません）することが許されています。
しかし、この条件を満たしていたとしても、容易に alt属性を省略しても良いという意味ではありません。これは、どうしても alt属性にセットできる文章が用意できない場合の最終的な条件なのです。
HTML5仕様では、alt属性の省略については否定的です。少しでも alt属性のテキストが考え得るのであれば、省略してはいけないとしています。そして、画像が何を表しているのかがわからないとしても、title属性には、出来る限りの情報を入れることが求められています。
このレアなケースに相当するシーンの１つにキャプチャがあります。スパム投稿を防止するために、読みにくいアルファベットや数字を画像で並べて、それを投稿者に入力してもらう仕組みです。キャプチャ画像に表示された文字列を alt属性にセットしてしまったら、スパム投稿の防止になりません。この場合は、alt属性を省略して、title属性に "キャプチャ" といった目的を表すテキストを入れます。title属性は必須となります。
キャプチャのマークアップ例
<p><label>表示されている文字をテキスト入力フィールドに入れてください。
<img src="captcha.cgi?id=8934" title="キャプチャ">
<input type="text" name="captcha"></label></p>
基本的には、ユーザーに見せることを前提としていないイメージに img要素を使うことは避けるべきとされています。しかし、アクセス解析などのビーコンとして使うことも想定されます。
このように、ユーザーに見せることを前提とせず、やむを得ず img要素を使わなければならない場合は、alt属性に空文字をセットしなければいけません。また、width属性と height属性には 0 をセットするべきとされています。
ビーコンのマークアップ例
<img src="beacon.cgi" alt="" width="0" height="0">
特定の相手に向けたもので、その相手がイメージを見ることができるとわかっている場合であれば、alt属性を省略しても構いません。
これは、通常のウェブ・サイトには当てはまりません。例えば、Googleが提供している Gmailのようなメール・クライアントといったウェブ・アプリケーションの提供者向けに規定されたものと考えてよいでしょう。
もし、このようなウェブ・アプリケーションを作る場合には、alt属性を省略しても良いのですが、何かしら意味のあるテキストを入れることができるのであれば、alt属性をセットすることが強く推奨されています。