7 replies to this topic

[MichaelM]

I was using a tool which judges how quickly your site loads, lists individual files etc. and I came across something I never knew before; I use the background property to add a lot of images to my page, but is every single image I list in the CSS file loaded as the page is read?

Eg. I have certain sections where I'm serving a jpg to IE6, but a png to browsers supporting png transparency. Does that mean that the modern browsers are downloading both the jpg and the png??

[Randy]

It depends upon how your css exclusions are set up.

If the CSS effectively comments out stuff for browser for which a certain instruction doesn't apply, no the background images shouldn't be loaded. However by the same token if you have an image that is the default, but are then swapping out the image for a different one with a later css call for certain browsers, those users will cache both images.

[MichaelM]

Thanks Randy. Sadly I was doing the second one. Looks like I have some sorting out to do.

[piskie]

Further to that reply Randy:
If a css file containd say 10 divs all assigned a different background image, but only 5 are used on a particular page, do all 10 images load or just the 5 required for the page.

I think I know the answer, but would like confirmation.

[Randy]

hmm... I've never tested it piskie.

My hunch is that it would only be downloaded once because the other four instances could be called from the browser cache. Of course this assumes the user has a typical setup that allows caching. Good question though. I just don't know for sure.

Michael: One thing you may want to consider if you can is to use Condition Comments to load totally different CSS files that are only triggered when the right browser reads them. This only works for IE browsers as far as I know, but is quite effective and also keeps your CSS files from becoming a huge jumble of mixed up code. Someone please tell me if other browsers will support it, though it's not usually necessary for anything other than IE. FF, and the rest seem to stick much closer to the specs, so a base css file seems to work well for them.

A search of any engine for the phrase Conditional Comments will bring up all sorts of information and likely open up new concepts in site coding for you. I can tell you I grudgingly started using them a couple of years ago and it's made my life a lot easier. Especially with the release of IE7 that caused many of the old IE6 css hacks to start failing for IE7 users.

[piskie]

I need to test this out because I have a site to "Repair" for a client and a CSS File very heavily loaded with Divs and background images. That's a job for later this week.

[Randy]

I think I read your question wrong piskie, having just re-read it. I was originally thinking that you had a bunch of divs that used the same background graphic, which is why I mentioned the caching ability of browsers.

If each of the 10 divs has a different background-image file set, my guess is that all 10 would be downloaded and cached, even if only 5 of the divs were actually called in a page. With the advantage being when the user went to another page that used a different div background image it would already be cached so wouldn't be downloaded again.

It shouldn't be too tough to test that. Create a page that has a css background image assigned to a div layer that's never called. Then check your cache to see if that image was downloaded after visiting the page. You'll probably want to test it in several browsers to see if there's a difference in the way they handle the situation, even though I have a feeling most if not all will download and cache the image.

[MichaelM]

piskie - I can't find the tool I used yesterday, but this one may help with your optimising: http://www.websiteop...analyze/wso.php (And after using it on one of my pages, it would suggest that Randy is right about all of the images being cached. )

Edit - Found it.

Edited by MichaelM, 23 July 2007 - 07:21 AM.