Tiling a hundred 1px squares VS tiling four 25px squares

Question

This question has more to do with the way a browser handles objects created/rendered by HTML and CSS, rather than just a scripting question.

If I have a div that is 100 pixels by 100 pixels and I want it to have a nice translucent blue background but I don't want to use CSS to set the background color to RGBA (and then just adjust alpha) due to browser compatibility issues, so instead I make a .png file that is a solid translucent blue and set the background image of the div to that png file and then tile it....

I can tile a hundred 1px image squares.

or

I can tile four 25px image squares.

Both will create the same effect except the 1px image square will load MUCH quicker than the 25px image square.... but I'm wondering if having 100 image squares on the screen will lag the browser more than only having 4 images on the screen that are of larger images? The browser itself, does it create a new reference for each image tile and then have to keep track of them all and update the position of them all?

It seems like putting 100,000 1px by 1px images on a webscreen would lag more than putting one 100,000px by 100,000px image on the screen? Especially if the user is scrolling up or down. Right?

Answer 1

The task of repeating the image n amount of times is the up to the user's machine to execute. It's dependent on the processing power of the average user's machine.

If you consider that on average you'll get 2-3GHz of processing power out of the average user's computer and compare that with an average download rate of 10 Megabits/sec, I would say that the bottleneck is download speeds. These days the lag with network speeds is almost negligible, so the difference would be so small that its not really worth worrying about, but nevertheless, the network lag of downloading a larger image would probably be worse than the lag of the processor to tile the image for the browser.

Whether you tile a larger image 20 times or a smaller image 200 times, the browser would still use the same execution loop to perform the tiling of an image, just more iterations in the latter, so I think the processor would be much more efficient than the network.

Also, I would say if you can achieve the same effect with smaller images, its more thoughtful and polite to your users to use the absolute minimum bandwidth possible with these insane ISP prices and bandwidth caps.