: How can I encourage the browser to download images from CSS file faster? I use CSS to place a lot of my images (as backgrounds for <div>) and I often find that they load very slowly

@Voss4911412

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

Vote Up Vote Down

@Heady270

Use CSS sprites, especially for icons.

Vote Up Vote Down

@XinRu657

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.

Vote Up Vote Down

@Kaufman445

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.

Vote Up Vote Down

@Bryan171

For browsers that support the data URI type (see 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).

Vote Up Vote Down

@Kevin317

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.

Vote Up Vote Down