When to use IMG vs. CSS background-image?

Answer 1

img is an html tag for a reason, therefore it should be used. For referencing or to illustrate things, people e.g: in articles.

Also if the image has a meaning or has to be clickable an img is better than a css background. For all other situation, I think, a css background can be used.

Although, it is a subject that needs to be discussed over and over.

Web Student from Paris, France

Answer 2

Browsers aren't always set to print background images by default; if you intend to have people print your page :)

Answer 3

IMG load first because the src is in the html file itself whereas in the case of background-image the source is mentioned in stylesheet so the image loads after the stylesheet loaded, delaying the loading of the webpage.

Answer 4

I use image instead of background-image when i want to make them 100% stretchable which supported in most browsers.

Answer 5

Above answers considers only Design aspect . I am listing it in SEO aspects.

When to use <img />

1. When Your Image need to be indexed by search engine
2. If it has relation to content not to design.
3. If your image is not too small ( not iconic images ).
4. Images where you can add alt and title attribute.
5. Images from a webpage which you want to print using print media css

When to use CSS background-image

1. Images Purely Used to Design.
2. No Relation With Content.
3. Small Images which we can play with CSS3.
4. Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).

As i will use them based on these reasons. These are Good practices of Search Engine Optimization of Images.

Answer 6

Using a background image, you need to absolutely specify the dimensions. This can be a significant problem if you don't actually know them in advance or cannot determine them.

A big problem with <img /> is overlays. What if I want an CSS inner shadow on my image (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In this case, since <img /> can't have child elements, you need to use positioning and add empty elements which equates to useless markup.

In conclusion, it's quite situational.