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

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.

Answer 2

The src property of an img tag is required according to HTML 4.01/XHTML 1.0 DTD. That is why it should always be included in the HTML.

You can specify it in the CSS for skining purposes, but most images in most cases are static and non changing so putting it in CSS is an unecessary step.

Answer 3

I put them to CSS if possible. One reason is that I think they belong there like you mentioned and the other one is the possibility to use sprites. This can reduce the loading time of your page significantly.

Answer 4

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 5

Well, it depends. For example, if you want to do some effects when the mouse is over an image, it must be in the HTML. When you put the image in the HTML you can positionate it more freely than in CSS. Also, as far as I know, CSS included images are not crawled (You can have interest in have your company's logo crawled by searchers).

If you think about accesibility, the HTML embedded images can have an alt and title information. So, for example, when you put the mouse over the logo of your company, the browser could show the motto of your company if you embed it with title="motto" attribute in the img tag. You can't do that with CSS.

Also people are used to put images in the HTML not the CSS and behaviours are a hard thing to change.

In conclussion, depending of your needs, CSS isn't flexible enough to fit your needs and you should put the images in the HTML. But if CSS fits your needs for UI images, then CSS is better idea.

Answer 6

Sometimes, loading UI images using CSS, also prevents the users from downloading your UI images to their drives, while saving a page.

But of course there are other ways to save them, but just a point to add.

And browsers tend to prioritize CSS more than HTML, so loading images through CSS might be a little faster compared to HTML.