For example, would a 1x1 image load faster than a 2x2? The size would be smaller, but the browser would have to work twice as much, right?
So, is there an ideal size and shape (square vs rectangle) for background images?
I know it's probably not too important, but I'm interested to know.
Thank you
I don't think there is an 'ideal' size for your image.
Although the quality of the image will have a role in the download time. An image with rich colors embedded will be heavy in size compared to another with the same dimension.
Finally the choice of a background image entirely depends on your need. If you need a 2*2 image then you have to include that.
If you need to optimize the performance of a site using plenty of background images then you can take a look at
and some tools for image optimization
I noticed that tiling very small images (such as 1×1 or 2×2) is very slow in many browsers. Since with most compressed image formats there is nearly no downside of being larger with repetitions I think at least for tiling images you should opt for images around at least 50×50 pixels to reduce drawing complexity in the UA.
Interesting question. You'd have to ask each of the browser vendors, since they each have different ways of rendering images.
But in reality, ignoring the download time any difference in rendering time will be negligible, so it makes sense to just use a smaller image if you can.
I'll also point out the obvious that if you're using a 1x1 repeating image then you should use a background colour instead.
The ideal size would differ from one browser to another, from one system to another.
Avoid making it too small or too large. A background image the size 1x1 may have rendering problems in some browsers. You should at least make it a few pixels in each dimension.
I remember that Netscape 4 refused to repeat images if they were less than something like ten pixels wide. Browsers today are less sensetive, but it still makes sense to not make the images too small.
The compression of images (at least for GIF and PNG images) are based on repetition, so if you make the image larger by repeating it, the extra image size will add very little to the file size.
Just to note: if you are trying to speed up the download, the overhead of downloading 1x1 image vs., say, 10x10, is negligible, especially for decently compressed images - both for the client and the server.
Therefore, since the rendering is definitely faster/better with 10x10, go for a larger image size.