Influence of tiling image size on page rendering speed

Question

If a background image is tiled, do the dimensions of the image file have any influence on page rendering speed?

I imagine that the smaller the image, the more blits have to be performed to fill the target area, so the longer the page will take to render[1]. Do you suppose this is true?

I'm asking mostly from the perspective of the iPhone (so Mobile Safari), since that's what I'm trying to optimize a site for.

[1] If that is really the case, the typical "empty.gif" (1x1 transparent image) would be a real performance killer.

Answer 1

Don't do any performance optimization without really knowing what's going on or doing any field tests.

There's much less memory involved when tiling using a small image, so the CPU's cache is always hit, which could mean much higher performance.

Answer 2

Althought true, most rendering systems will be able to render a repetition of 1x1 px fairly fast due to the fact that it boils down to:

1. Repetition of a value stored in memory/cache, to another memory value
2. OR, operations on a graphics subsystem (such as OpenGL) which have operations for this on the faster memory of the GPU hardware (GDDR or whatver)

It would be more computationally expensive to tile a 50x50px image over a 5000x5000 area than it would to map a 1x1 pixel image over a 100x100 area because there is more data involved.

I wouldn't worry too much about the mechanics, just decide if you can perform it fast enough

Answer 3

I do not think there is a measurable difference, at least as long as we are not talking about images 1000×1000 pixels. But as Nikolai said, you have to measure. This is exactly the case where nothing beats an experiment.