Should I use an HTML img tag or a CSS background-image?

So you're looking at a design comp with an image in it, and trying to decide between using an HTML <img> tag or a CSS background-image.

At first, you may think, “Does it even matter?”

After all, there are plenty of situations where both will result in the same visual outcome.

But you're here, so you want to make an informed decision.

Here is a step-by-step process for choosing between the two.

Step 1: Accessibility

CSS background images may be visible, but present accessibility issues.

For example, <img> tags have the ability to add alt text and a title attribute, which can be picked up by screen readers. This is important not only for end-users, but for getting indexed in Google search results as well. Here is an excerpt from the Official Google Webmaster Central Blog on Using Alt attritubes smartly:

As the Googlebot does not see the images directly, we generally concentrate on the information provided in the "alt" attribute. Feel free to supplement the "alt" attribute with "title" and other attributes if they provide value to your users!

Want accessibility and better SEO? Use an <img> tag.

The remaining considerations are for images-as-pure-visual-design-enhancements.

Step 2: Performance

If you are referencing the same URL for an image, technically the request is the same so the time it takes to download should be equal. However, the performance issue really boils down to when the request is made.

If you have a bunch of large background images declared in your CSS, the browser is going to take longer to parse the CSS file and pull down the images, which will delay the loading of the entire page.

With <img> tags, the requests are made as the HTML is parsed, so any content coming before the tag in the document will be information users can begin to read.

Also, inline images (<img> or <picture>) can take advantage of tools like picturefill and lazy loading for even more performance benefits.

Screenshot of a Shopify social media sharing experince.
Shopify chose to use a picture elements for it's performance benefits, even though these are background images used for esthetic purposes and not critical pieces of content. source: shopify.com
Screenshot of a book character on Smashing Magazine's website.
Smashing Magazine decided to use a CSS background image, as the performance benefits of a progressively enhanced inline image was not necessary for a 1.4K file. source: smashingmagazine.com

Step 3: Manipulation Possibilities

If you are using one or only a handful of relatively small image files for esthetic enhancements and performance benefits are negligable, consider the manipulation options you have with CSS.

Background images can be used in conjunction with background-color, background-repeat, background-attachment, background-position, and background-blend-mode. This presents a lot of possibilities should the need for manipulation arise.

If you are overlaying text on top of an image, it’s much easier to prototype with a CSS background image.

Conclusion

HTML <img> tags should be used for accessibility and SEO concerns. Otherwise, consider speed, performance, and manipulation when the image is a pure visual design enhancement.