CSS and server requests?

Does CCS send server request for images even when they are not used. I was browsing around on the net, using opera 10.0 which has a nifty image counter on the address bar. I saw some pages had over 200 images in them and thought “WOW!” So just to check I loaded a page I have done… it told me I had 26 images!!! This was kind of disconcerting as I had just redone the page using sprites, thus reducing the # images to 10 … in fact the entire site uses around 30 or so images in its CSS , so I wondered if the CSS is actually calling for images as bgs to elements that never appear on that specific page… or maybe Opera just gives a bloated image count???

I would guess this is different from browser to browser, somehow, though we can find a common ground.

One good common place to start is image flicker on :hover, which lead to images preload, which lead to image sprites.

So, from what pseudo-classes tells us, some images aren’t downloaded until they are in effective use.

But, from the performance point of view, browsers may tackle this slightly different.

That’s exactly what I would have concluded as well. I wonder why opera finds some many images.

I don’t know what page you loaded, but I started playing with Dragonfly and your sig page has CSS errors.

You have magrin-top in your footer.css, and min-heigh in your content-style.css.

Other than that, you can use Firebug in FF, Inpector in Webkit, to see what files are being requested and when. I think Opera rather reports the calls, it’s not actually counting individual images. If an image is referenced in several places, then it reports it multiple times, but it’s actually using the image from cache.

As noonnope mentioned firebug is an excellent tool for debugging and tracking other useful data about a web page.

Here’s a good tutorial on how to use it.


I believe many years ago opera used to load all the images in a stylesheet (or was it an urban myth) but that is pretty daft thing to do. There could be hundreds of background images over a very large site and you’d have to sit there until every background image in the site was loaded which could be a very long time.

As noonope said we would have no need for sprite rollovers if images were actually loaded with the stylesheet. As we all know there is always a delay if you do an image swap with hover while the image is loaded for the first time so we can safely assume that images are not loaded until needed.

I believe that the background images are only called for when they are needed to be actually displayed on the page. There may be some discrepancy though as to when browsers will load the image. A browser may be cleverer enough to think that if you have placed something off screen then it’s not visible and doesn’t need to be loaded.

However, I did a few tests a while ago and images did seem to be loaded even if they were placed off screen. They didn’t seem to be loaded if you used display:none or visibility:hidden but there may well be browsers discrepancies here.

Although the browser doesn’t load the images I wouldn’t be surprised if they don’t keep some record of where the images are which means that the browsers will know about the images but just not have asked for them yet.

It would be good to get a definitive answer but I remember looking at this before and couldn’t really find anything official apart from this in the backgrounds module.

Implementations may optimize by not downloading and drawing images that are not visible

Actually the page with 100s of images was a myspace band site. Band site or not, i was surprised to see a 200+ img load count… which is why I wondered if Opera does things differently. I wouldn’t have thought CSS would naturally load all images, it doe seem illogical and yes then there is the need for the sprites to prevent flickers. It even makes sense if the element is called ( even if it’s placed off the screen), but to lad an image for , lets say , #fictionalID{} when there is no element with ID=fictionalID on the page being loaded? Operas behavior had me confused.

yeah I really need to clean and redo my own sig page. it was the THIRD site I ever did using CSS. I always look back in shame…