Should all presentational images be defined in CSS?
Question by Grant Crofton
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 by redben
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 by Starx
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.
