It’s not strictly the dimensions of the image that are important but rather the file size. Of course, in general, images that are larger in size tend to be larger in file size so there is some correlation.
Also the file type (png, jpg) can affect the file size.
Remember if your backgroud image has be served to the viewer and the larger it is the longer your page will take to load.
For a seamless texture, I wouldn’t go with more than 100px square but it depends on the effect you are trying to achieve.
dimensions do matter though. make a two colored .png that is 100000 x 100000 big… even if it’s just 10kb or something, older computers will shit bricks. that is because images always end up decompressed in memory.
though I doubt it actually matters when talking about 500 x 500 and just one image, it’s just something that can’t hurt to keep in mind.
oh, and if you’re using .png, you want this btw ;)
that’s totally besides the point of how graphics and rendering work. I’m sure there’s *plenty* of people think a small image file is small in memory… and I just chose huge values to make a point, 5000 x 5000 is noticeable as well.
besides, one website might be one tab out of 50. that one background image might be one out of 50, too. so why not have a clue? it’s simply about the mechanics of the thing and common misconceptions.
Right. So this texture is really time consuming to shrink and tile. What I did for you was optimize the image to significantly reduce the file size. This should load pretty quickly. http://jsfiddle.net/K8p8w/embedded/result