駆け出しの僕はまだ2つしか方法を知らないんだけど、結局のところどんな方法がいいの？

と思う。

text-indent:-9999px;を使う

ちょいちょい使ってたのがこれ

例えば、

HTMLがこんなだとする

<h1>machonne.com</h1>

んでCSSで

h1 {
width: 200px; //置換する画像の横幅
height: 80px;　//置換する画像の高さ
display: block;
text-indent: -9999px;
background: url(画像のパス);

製作会社で働いている友人の話を聞いたら
ブラウザが9999px分の領域を確保しちゃうんだって

んで変わりに教えてもらったのがこれ

今使ってるの

h1 {
width: 200px; //置換する画像の横幅
height: 80px;　//置換する画像の高さ
display: block;
text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
background: url(画像のパス);

他にも色々と方法がありそうだけど結局のところどれがベストなんだろうか。

コリスさんが纏めてくれていたのでそちらをぜひ

参考記事
colissさんの記事

関連記事

今更ながらSassとCompassを使ってみました。

CSS圧縮ソフト CSS Compressorを使ってみた結果