Should all presentational images be defined in CSS?

Question

I've been learning (X)HTML & CSS recently, and one of the main principles is that HTML is for structure and CSS for presentation.

With that in mind, it seems to me that a fair number of images on most sites are just for presentation and as such should be in the CSS (with a div or span to hold them in the HTML) - for example logos, header images, backgrounds.

However, while the examples in my book put some images in CSS, they are still often in the HTML. (I'm just talking about 'presentational' images, not 'structural' ones which are a key part of the content, for example photos in a photo site).

Should all such images be in CSS? Or are there technical or logical reasons to keep them in the HTML?

Thanks, Grant

Answer 1

If an image is "content" say in a newspaper article, the editorial image, then use img tag. If it is part of your UI, theme or skin or whatever the name is, then yes put it CSS.

Suggested readings

• Designing with Web Standards (Zeldman)
• Bullet Proof Web Design (Dan Cederholm)
• CSS Mastery (Andy Clark, Andy Budd, Cameron Moll)

Answer 2

One reason to put those images in CSS might be to serve different browsers from the same web site, just by changing the CSS: for example, if you detect a mobile/embedded/pocket browser you could give them the same HTML but with a CSS that doesn't include images.