Choosing between inline and background images

This is a topic that isn't discussed enough. (The only relevant result that my quick Google search turned up was: Different types of images on the web — content and background images.) I see many people making questionable decisions regarding it, so here's a quick guide to help you decide.

If the image is a photo or an image of a chart or map, then it should probably be an inline image. (Sometimes photos are used as backgrounds though, but that's for when you want to place page content on top of it.) Also if the image is the company logo, then it should probably be an inline image.

Another issue to consider is which images should be visible when the page is printed. In general background images are not printed, so you should probably make the company logo and any images that are important to the page content inline images.

If the image is merely used to create a rounded box around some content, to create the appearance of equal height columns, or for some other purely decorative purpose then the image should probably be a background image.

There are some grey areas to this issue, however. For example, in a navbar should you use inline images in the links or CSS image replacement? I use both at different times, but I do tend to favor image replacement. Part of why this case is a grey area, though, is that the navbar is part of the page that should probably be hidden when the page is printed.

In addition to whether you use inline or background images, there's also the issue of what alternate text, if any, should be included. I'll discuss that in the next entry.