Home > Web全般 > 背景画像のループでPCに負荷をかける

背景画像のループでPCに負荷をかける

「小さい背景画像の繰り返しはPCに負荷をかけるからあまり使わないように」が現在も意味があるのか気になっています。
多分、常識的な解像度で作る限りはどんなに小さい画像を使っても大丈夫です。それよりもファイルサイズを重視して最も小さいサイズの画像にすることが快適な表示に繋がると思います。

(5/24追記)iPhoneのSafariを使って検証しなおしました。

いくつか検証してみましたが、Firefoxだと下記でもほとんど違いが出ません。
IE8だとそれなりに違いが出ます(どのブラウザよりも軽いんじゃなかったんですか?)。多分IE系なら同じように重いみたいです。

1.正方形の画像の繰り返し

1px*1pxの繰り返し
50px*50pxの繰り返し
PC・iPhone共にほとんど違いなし


2.正方形の画像の繰り返し×重ねて720回繰り返し

1px*1pxの繰り返し
50px*50pxの繰り返し
1px側が重くなりそうなのに、リロードしてみるとなぜか50pxのほうが圧倒的に重い。
iPhoneだと1pxが約13秒、50pxが約30秒かかったので差は歴然。意味はよく分からないけど。

3.縦長画像のwidth: 50000px;の横ループ

1px*30000px
50px*30000px
今度はリロード時に表示に50px側のほうが一瞬時間がかかっているように見える。2での「重い」とは違う感じ。
iPhoneでは、1pxが2秒、50pxが10秒だった、これは画像のファイルサイズの違いだと思われる。

というわけで、大雑把だけどここまでの結果だけ見ると背景に使う画像は出来る限り小さくして問題ないということになりました。

サイト内検索
RSSフィード

このページの先頭へ戻る