When to use IMG vs. CSS background-image?

Question

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.

Answer 1

Use the HTML IMG tag when you want the image to be a part of the content in the regular page flow. Use the IMG tag if you want the image to be included when users print the page. Use the HTML IMG tag when you want the image to be indexed by google (with alt text inclusion).

Use the CSS background-image property when the image is not part of the regular page flow, and in instances where only a portion of the image shows up on the page and is used for more decorative purposes. Use the CSS background-image property when you don't want images on your page to print. Use the CSS background-image property if you need to improve image download times (as with CSS sprites). Use the CSS background-image property if you are using the image for animations or rollover states. Hope this answers your question. Thanks for posting.