Optimizing Repeating CSS Background Images

[undoIT]

I've searched for an answer to this question and haven't come up with anything yet. Using background repeat in CSS I am able to make a seemingly solid area with an image that is only a few pixels in width or height. For example, as a background to the content area in the new layout for Themebot, I set background: repeat-y, and the dimensions for the image are 994px by 1px.

I am assuming that cropping the background image down to 1px in height will use the least bandwidth to load since the image is as small as possible. However, I'm wondering how the image is repeated. This must be done on the visitors computer and I'm wondering if this would create any issues with users who have slow computers. Are there any advantages to having the height be 10px or larger as opposed to just 1px? Will the page seeming load faster if a larger image is being repeated?

 

[morestar]

actually the image is downloaded ONCE to the users computer, the browser reads the code and knows that it's to repeat the image, as long as the persons pc is pretty decent in speed as most are these days it doesnt matter...it wont slow down a thing...

you were right in thinking that it would be faster to download an once it has, it's the speed of the users PC that makes a difference - however, a small like 1px height gif wont slow things down a bit...

 

[The Lion]

There might be an issue...

I would worry a little about the image actually being too small. I've never run a test with anything that size before, and I'm wondering why you wouldn't just set the background to a hex color achieving the same result, but there may be some small issue here to consider when using a repeating image that tiny.

Being that your visitors' computers downloads the image to be repeated, there may be a problem when an image is repeated as many times as a single pixel image would need to be repeated in order to repeat across a repeating background to cover the dimensions of the screen, repeatedly (lol). Though the image downloads quickly, the instances called to complete the render may parse strangely or slow.

It may prove to be faster to have fewer instances of the same image called in to render the display. With a single-pixel image, the called instances would be a little excessive, which may actually slow things down. So it may be best to go with a larger image to do the same job, which in it's own right makes things easier on the development side anyway. Ultimately, it is the goal of every designer to produce the highest quality layouts and design with the least hours invested in a project, but the real difference here with respect to download time would be nil if appreciable at all.

Great question, though.

I would just keep tabs on what 'Photoshop' or 'Illustrator' claim to be the download time of your background image when saving for web. Two to five seconds for a single http request is fine, no matter what size your image is.

Good luck,
The Lion.
>sites only allowed in signature<