Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I use CSS to place a lot of my images (as backgrounds for <div>) and I often find that they load very slowly this way. They seem to be the last thing to load. Even small little icon images take a while to show up this way. Is there a way to tell the browser a priority for images? Or get it to download the images in the CSS file earlier and render them earlier?

share|improve this question
    
The CSS sprites answer to your other question will probably help solve this one too. –  DisgruntledGoat Aug 16 '10 at 12:13
add comment

6 Answers

up vote 8 down vote accepted

CSS is for styling, not content. Browsers (rightly) try and display content before adding styling, hence the reason why images in style-sheets are usually downloaded last. If images are important to your content then add them via standard HTML <IMG> tags.

share|improve this answer
2  
Great advice, particularly the last sentence. Image for decoration: CSS; Images for content: HTML. –  DisgruntledGoat Aug 16 '10 at 15:19
1  
Daniel's description of the images he's referring to ("backgrounds", "icons") makes them sound very much like decoration, as opposed to content. I think they're right to be in the CSS. –  Bobby Jack Aug 17 '10 at 17:07
add comment

Use absolute URI's from your stylesheet and add the images from IMG tags to a hidden <div> on the page (this assumes you're using the same images on every page; ideally in the footer so they're all loaded and cached on any given page call).

Images on the page get priority and, once the images are cached, they'll render immediately on subsequent page requests.

share|improve this answer
add comment

For browsers that support the data URI type (see http://en.wikipedia.org/wiki/Data_Uri for info) to include the image in the CSS itself.

This has a few disadvantages though:

  • The data is reloaded when the CSS is, rather than being separately cached, though unless your CSS changes regularly this is not much of a problem.
  • CSS's lack of inheritance and such means there may be times (wasting bandwidth) when you have to include the same graphic multiple times or alter the classes used in your document.
  • The images are base64 encoded when used this way which means they take more bandwidth (though the bandwidth issue is much less significant if you are sending the data compressed).
  • You'll need to provide alternate styles for browsers that do not support the data URIs, some of which are far from uncommon (IE6 and IE7 for instance).
share|improve this answer
add comment

As of right now there is no way to specify which files download first. FYI, images specified in CSS files as background images download last probably because the browser sees them non-content and thus a lower priority so avoid using them for important images that you want to load quickly.

share|improve this answer
add comment

Use CSS sprites, especially for icons.

share|improve this answer
add comment

Make your images as small as possible. You can use smush.it to remove unnecessary bytes.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.