PC向けWEBページのコーディングをする際、見出し領域などで画像の置き換えを行うためによく使われているのが「text-indent:-9999px;」を設定する手法です。

h2#campaignTitle{
	text-indent:-9999px;
	width:400px;
	height:50px;
	background:url(campaigntitle.jpg) no-repeat; 
}

ところがこの手法には一つ大きな問題があります。見た目はどうであれ、この部分の描画を行う際、ブラウザ内部の処理としては9999ピクセルという非常に大きなブロック領域を生成しているため、パフォーマンスが低下してしまうのです。

この問題を解消するための新たな方法が、以下の記事内で提示されています。

• Replacing the -9999px hack (new image replacement) – Jeffrey Zeldman Presents The Daily Report

改善点は以下のとおりです。

• text-indent:-9999px;の代わりにtext-indent:100%;を設定する。
• white-space:nowrap;を設定する。
• overflow:hidden;を設定する。

具体的なコードは以下のようになります。

h2#campaignTitle{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:400px;
	height:50px;
	background:url(campaigntitle.jpg) no-repeat; 
}

こちらのコードを編み出したのはScott Kellum氏。9999ビクセルのような膨大な領域を描画しなくていいので、パフォーマンスが劇的に改善されるとのことです。

手元のPCで軽く試してみたところでは特にパフォーマンス面の変化は実感できませんでした（※念のためIE6でも検証しましたが、ちゃんと動作しました）が、JavaScriptやCSSの影響でブラウザ側の描画処理を多用しているページを、旧世代のPCやiPhone・iPadなどで閲覧する際などには、ひょっとするとかなり効果があるのかもしれませんね。