When to use IMG vs. CSS background-image?
background-image, css, html, image
Solution
Proper uses of IMG
- Use `IMG` if you intend to have people print your page and you want the image to be included by default. —JayTee
- Use `IMG` (with `alt` text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG
- Use `IMG` plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
- Use `IMG` if you rely on browser scaling to render an image in proportion to text size.
- Use `IMG` for multiple overlay images in IE6.
- Use `IMG` with a `z-index` in order to stretch a background image to fill its entire window. Note, this is no longer true with CSS3 background-size; see #6 below.
- Using `img` instead of `background-image` can dramatically improve performance of animations over a background.
When to use CSS background-image
- Use CSS background images if the image is not part of the content. —sanchothefat
- Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
- Use `background-image` if you intend to have people print your page and you do not want the image to be included by default. —JayTee
- Use `background-image` if you need to improve download times, as with CSS sprites.
- Use `background-image` if you need for only a portion of the image to be visible, as with CSS sprites.
- Use `background-image` with `background-size:cover` in order to stretch a background image to fill its entire window.
Problem
In what situations is it more appropriate to use an HTML `IMG` tag to display an image, as opposed to a CSS `background-image`, and vice-versa? Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.