preload images using CSS

[kslnor]

Is it possible to preload images using CSS? If so, can someone please share this info? I did an internet search, but the info. I was finding seemes a few years old...not sure if it still applies. Thanks.

[TXGodzilla]

Just curious but why would you want to shove images to a browser before the visitor is willing to view the page with those images?

I am biased, I always despised those image preload javascripts. They were my proof of a poorly designed website.

[kslnor]

I guess the main reason I wish to preload is so my background image appears rather quickly (for those who are still on dial-up). My background image is a simple image, but a bit large. Thank you.

[outrun]

Some websites use "CSS Sprites" to load all the images in there layout others load images in hidden divs.

[Robin_reala]

For what you're trying to do, no. The CSS Sprites method mentioned above works for small images that change on hover (or focus), but not for a big background image.

You'd be better off investigating different ways of encoding it. If it's a photo or very detailed image then look at making it a JPG and maybe pushing down the compression a touch - you'll lose quality but it might not be that noticeable in the background. If it's a big gradient or similar then you could look at making it a PNG and pushing it through OptiPNG or PNGCrush.