text-indent:-9999pxで画像置換はもう古い？パフォーマンス向上させるインデント方法

CSSで画像置換するに際し、インデントに負の値「-9999px」を設定する方法は、今ではイディオムとなっていることは常識なのだろうと思います。デバイスフォントを画像に置換する場合に、下記のようなCSSを記述した経験があるのではないでしょうか？

h1 {
  text-indent: -9999px;
  background: url(IMAGE PATH) no-repeat left top;
}

text-indentは、テキストに指定してインデント幅を付けます。負の値をあたえれば一行目が左へインデントされます。おおよそ直感的な動作なことから永く、この記述が採られてきたのだと思います。

ところが、欠点もあります。9999pxもの領域を描画してしまっている点です。パフォーマンスへの影響を考えると無視はできません。これの改修措置として以下のように記述する方法があります。

h1 {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(IMAGE PATH) no-repeat left top;
}