Repeating Website Background Image - Size Vs Speed

I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both). Example Let's say we h

Solution 1:

The rendering speed is the bottleneck here, since bigger tiles can be put into the browser's cache.

I've actually tried this for the major browsers, and at least some of them rendered noticeably slow on very small tiles.

So if increasing the bitmap size does not result in ridiculously big file sizes, I would definately go with that. Test it yourself and see. (Remember to include IE6, as still many people are stuck with it).

You might be able to strike a good balance between bitmap size and file size, but in general I'd try 50x400, 100x400, 200x400 and even 400x400 pixels.

Solution 2:

I found out that there may be a huge difference in the rendering performance of the browser, if you have a background-image with width of 1px and repeating it. It's better to have a background-image with slightly larger dimensions. So a image with a width of 100px performs much better in the browser. This especially comes into play when you use a repeated background-image in a draggable layer on your website. The drag-performance is pretty bad with an often-repeated background-image.

Solution 3:

I'd like to point out that for the cost of sending down an extra few rows (1-2 only example here) .8k - 1.6kb (if you can get away with 8-bit) more like 2.4kb - 4.0kb for 24bit

2 pixel columns more means the required iterations required to blit the background in is cut down to 1/3 for up to 1.6kb (8-bit) or 4kb (24bit)

even 1 extra column halves the blitting required down to half the element width.

If the background's done in less than a second for a 56.6k modem I reckon it's lean enough.

Solution 4:

If small dimensions of an image have a negative impact on rendering, I'm sure any decent browser would blit the image internally a few times before tiling.

That said, I tend not to use 1 pixel image dimensions, so I can see the image clearly without resizing it. PNG compression is good enough to handle this at very little cost to file size, in most situations.

Solution 5:

I'd put money on the bottleneck being the image download rather than the rendering engine doing the tiling, so go for the 1 pixel wide option.

Also the 24-bit PNG is redundant since you're still only getting 8 bits per channel (red, green and blue).