画像置換（Image Replacement：IR）はWeb標準を意識するなら出来るだけ使わない方が良いといわれています。文字として、コピーや他の読み取り可能な情報が画像になってしまうことや、文字の大きさが変えられなくなるなどの弊害が発生するからでしょう。しかし、IRを使ったときの読みやすさや目に入りやすさ、そしてサイト全体の印象を考えると、使ったときの効果が大きいと考え、このブログでも記事タイトル（の一部）に採用してみました。

画像置換にはいくつかの手法があるのですが、どれも長所と短所があり、方法の選択に悩まされました。画像置換の方法について私なりの分類でまとめておきます。

なお、画像置換以前にテキスト画像の動的（自動）生成の方法にも種類があるのですが、これについては「PHS+CSS Dynamic Text Replacement(改）」をご参照下さい。ここではDTR（Dynamic Text Replacement）という手法を使っています。

まず、テキストを画像に置換する方法により、以下の2種類に分類できるかと思います。一般に画像置換というと１を指している場合が多いです。

1. CSSの背景画像（background-image）に置換する
2. <img>タグで置換（挿入）する

初めにまとめますが、以下を含む「全てのブラウザーで正しく表示できる方法」はありません。

1. Mac版IEやWin版IE5などの古いブラウザ
2. テキストブラウザ
3. 音声ブラウザ

また、一般にCSSオン＆画像表示オフのブラウザでテキストをどう表示するかが問題になります。JavaScriptで対処するという手もありますが、その場合はJavaScriptオフだったらダメです。一般にブラウザ設定で問題になるのは以下の点です。

1. CSSがオンかオフか
2. 画像表示がオンかオフか
3. JavaScriptがオンかオフか
4. テキストの大きさ設定

1. CSSの背景画像に置換する方法。

テキストをCSSで非表示にして、背景画像を代わりに表示する方法。背景画像を使用しつつ、CSSが切られていたりCSS非対応なブラウザには相応のテキストを表示する。

1-A. CSSオフの時はテキストを表示する。CSSオン＆画像オフの時は何も表示されない方法。

1-A-1.Fahrner Image Replacement(FIR) :
最も初期の画像置換方法。無意味な<span>タグが入る。CSSオン＆Imageオフの状況で何も表示されない。音声ブラウザで読み上げられない。

HTML

<h3 id="header">
    <span>Image Replacement</span>
</h3>

CSS

#header {
   height: 25px;
   background-image: url(header-image.gif);
}
#header span {
   display: none;
}

1-A-2.Phark Method :
text-indent:マイナス値によりテキストを非表示する方法。不要な<span>が無い。CSSオン＆Imageオフで何も表示されない。

HTML

<h3 id="header">
   Image Replacement
</h3>

CSS

#header {
   text-indent: -9999px;
   overflow: hidden;
   background: url(header-image.gif);
   width: auto;
   height: 25px;
}

1-B. CSSオフの時はテキストを表示し、CSSオン＆画像オフの時もテキストを表示させる方法。

1-B-1.single pixel img FIR :
透明な1ｘ1ピクセルのgifを挿入し、そこのaltにテキストを入れることにより、CSSオン＆Imageオフでそのaltを表示させる。無意味な<img>と<span>タグが入る。音声ブラウザで読み上げられない。

HTML

<h3 id="header">
   <img src="transparent1x1.gif" alt="Image Replacement" />
   <span>Image Replacement</span>
</h3>

CSS

#header {
   height: 25px;
   background-image: url(header-image.gif);
}
#header span {
   display: none;
}

1-B-2. Gilder/Levin Method :
背景画像をテキストの前面に持ってきてテキストを見えなくする方法。CSSオン＆Imageオフでは下のテキストが表示される。無意味な<span>タグが入る。また、画像は透過であってはならない。さらにブラウザでテキストを巨大にすると、画像の下からはみ出して見える。現在までのIRの中で最も優れているといわれている（by Web creators 2007年4月号）。

HTML

<h3 id="header">
   <span></span>Image Replacement
</h3>

CSS

#header {
   height: 25px;
   position: relative;
}
#header span {
   background: url(header-image.gif) no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
}

いろいろな事情があってのことでしょうけれど、「CSSオン＆Imageオフ」という状況に対処するために、空タグを入れたり、透過GIFをあきらめるというのは「？」な気がします。

1-B-3. Thierry Image Placement :
背景画像をテキストの前面に持ってくるために、透明のgifを<img>で配置する、または<a>アンカーを入れる方法。CSSオン＆Imageオフでは下のテキストが表示される。<a>アンカーを入れる場合は無意味ではない（マークアップはおかしい）。画像は透過であってはならない。CSSオン＆Imageオフ状況下でテキストを巨大にすると、はみ出し部分が欠ける。

HTML

<h3>
<a title="hoge" href="#"></a>
Image Replacement
</h3>

CSS

h3 {position:relative}
h3 a {
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	width:500px;
	height:1.7em;
	min-height:25px;
	background:transparent url(header-image.gif) no-repeat;
}

2.imgタグで置換する方法（未完）

<h?><img src=”header-image.gif”></h?>として、置換する方法。CSSのオン、オフに左右されない。Imageオフの場合はalt（=置換対象テキスト）が表示される。（一般にそのままでは）<a>タグのマウスオーバーに反応しない。

1. 既存テキストはimgタグのalt=に入れる方法
   クローラーが<h?>内の「テキスト」を読む場合は正しくクロールされない（？）。一部のtext-browserではaltを表示してくれない。

HTML

<h3>
   <img src="header-image.gif" alt="Image Replacement" />
</h3>

2. 画像を既存テキストの上に持ってきて隠す方法
   クローラーとtext browserの問題に対処。画像が透過であってはならない。altに既存テキストを入れている場合、画像オフで既存テキストが2つ表示される。ブラウザでテキストを大きくすると下からはみ出す。

HTML

<h3>
<img src="header-image.gif" alt="Image Replacement" />
Image Replacement
</h3>

２は調査中です。CSSによる方法を詳しく調べたわりに、実際採用さいようしているのは「2-1.既存テキストをimgタグのaltに入れる」というシンプルな方法です。画像を動的に生成するため、CSSの背景画像urlを動的に指定するのが面倒であることと、複数行に分かれる場合、画像も複数に分かれるため、結局<span>で囲まなければいけないことなどから、シンプルな方法を選びました。

今後このまま、<a>のマウスオーバーに反応させる方法を考え、その後に、本当に「クローラーがaltを見てくれないのか？」調べてみようと思います。