When to use IMG vs CSS background-image

Question

When should you use an HTML IMG tag instead of a CSS background-image to display an image, and when should you use a CSS background-image instead of an HTML IMG tag?

Accessibility, browser support, dynamic content, and any technical limitations or usability principles are all possible factors.

Answer 1

You can transition a div's background image natively:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

This saves any JavaScript or jQuery motion used to fade the src of an img/>.