In styling a page, often I will want to put a background gradient behind certain things, like sidebar headings, with multiple instances on each page.
This gradient would vary only in the y-direction ie from top to bottom.
Generally, I am building fixed width sites, so I know exactly how wide these background images need to be. For the sake of this example, suppose the images need to be 25pixels high, and 200 pixels wide.
Here's my question: is it better to style this as a single 1px wide, 25px high gif/png, and use the repeat-x CSS property, or is it better to supply a single 25px * 200px gif/png image and use that instead?
Obviously, by using repeat-x, we are saving on download bandwidth, but we are asking the browser to do all of the work. Typically there might be 20 or 25 of these on a single page, if (say) they were used within sidebars on a page.
What's the impact on page loading time, page rendering speed and the "user experience" for first-time page visitors (ie with nothing in their browser cache)?
I'd be very interested to find out if there is a strong opinion one way or the other on this.
thanks in advance,
Pete
Measure It
If you are curious of the difference measure it.
First, check out firebug and use the net feature. You can see how long it took to download that single image.
Second, install the web developer toolbar for firefox, go to tools, and choose view speed report. This will give you details and let you know about people on a 56k dialup connection and where you might have trouble spots at.
Personally, I'd go with the 1px wide image. Smaller images take less time to transfer.
Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com
My Philosophy
Personally, I always go for the smallest images possible, letting the browser do the repeating work. The longest part of a page load is almost always loading the images...so once the browser caches a small image, it will load very fast, even if it has to repeat.
I've never noticed any slow down at all based on a browser having to do the image repeating work, however I have noticed long wait times for larger image loading...
So, for me, I always opt for repeating the smallest images possible.
That being said...It's tempting to cripple the possiblities of your design by insisting on only using small images...Broadband is at a point now where it's unversal enough that we can start using larger images than in the past. This thinking is a current frustration of mine...I tend to do 'safe' designs that load quicker rather than really awesome designs that may take 2 seconds longer to load. I think it's something we designers need to start getting over...these days there's less of a reason to put load times over awesome design (depending on the audience, of course).
-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com