When you want to have a repeating background image, is it better to use a small image (like 10x10) or a large image (like 400x400?) My assumption is that it would be better to use as small an image as possible since it would take less time to download. That assumption was reinforced when I recently downloaded some sample code from an HTML/CSS book and it used a repeating GIF that was 1x80 – the smallest size possible for its intended use.
I came across this problem while working on a personal site for fun. I made the background in Photoshop at dimensions of 100x100 and repeated it in CSS.
Dont let your thinking become so narrow or limited. The best size is the one that works.
WHEN TILING, make the image 1x1 TILES (not pixels) . Sometimes , however the repeating pattern is so small that its good to use a little bigger image. Keep in mind that data is sent in quantum ‘packets’. This means , for example, that 768bytes and 1.5K may take the same amount of time to send since they both fit in the same packet; while 1.6k may take twice as long to send since it requires two packets. So in essence you may not even lose any speed but may the image easier for you to manipulate. [numbers are for illustration purposes only]
Tho , for obvious reason this doesnt apply to tiles, it’s not just the size of an image that matters; you must also take into consideration the number of http requests. When possible it is better to D/L ONE 60K image than 15 4K images.
I don’t think it matters a lot, since it’s only one download in any case, and even the 400 x 400 image is not likely to be a big download. I find the slightly larger version often has better quality, but then you don’t want to make it bigger than needed. It used t be recommended that the width/height of a repeating image not be less that around 10px, as some browsers had trouble with repeating something less than that, but I’m not sure if that’s still the case with modern browsers. I basically make a bg image as small as possible without losing image quality.