透過GIFを並べてみて思ったこと

最初はフィルターでhatena-body*1を透過させたのです。そしたら「firefoxはフィルターをサポートしてないよっ！」と突っこまれまして・・・コノヤロウ、確認したらbodyに敷いた桜がhatena-bodyの背景色に隠れて透けないでやんの。
IEではもちろん半透明になってキレイな処理がなされているのだけど・・・いかんせん重い。

ここで透過GIFの登場です。

hatena-body{
 background-image: url("url.gif");
 background-repeat: repeat;
}

使用した透過GIFは　6×6　のサイズ。
フィルターも結構負荷があったのだけど、hatena-body全体にGIFを敷いたらですね・・・非常に重たい・・・マウスホイールを転がすとがくがくスクロールしてしまう。え、これはどういう事だ。

もしやと思い　48×48　の透過GIFを作って敷き詰めると・・・
スクロールが軽くなった＼(≧∇≦*)ﾉ

結論：小さいGIFより大きいGIFを並べる方が負荷が少ない。

縦横660pxの箱に6×6のGIFを並べると12100個敷き詰められる計算だけど、48×48のGIFなら約190個で済みます。繰り返す回数と処理の間で問題があるのかなぁと思いました。

*1:hatena-body･･･h1以降の要素はhatena-bodyにくくられています。