Deciding between an HTML img tag vs a CSS background-image

If you need to choose between using an HTML <img> tag or a CSS background-image, you may think, “Does it even matter?” After all, there are plenty of situations where both will result in the same visual outcome.

Here is a step-by-step process for choosing between an <img> tag and a CSS background-image.

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!

So, if you believe the image itself is information everyone needs access to and you want it's search engine indexing (SEO) to be prioritized, an <img> element (or perhaps <picture> element) is the way to go.

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.

So, while an image that is in the background and being used purely for aesthetic reasons might seem like the perfect time to use a CSS background image, you still may want to consider utilizing an <img> or <picture> element along with some of the javascript enhancements mentioned earlier for better performance.

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.

Also, if you are overlaying text on top of an image, it’s much easier from both a markup and CSS standpoint to be able to put together a prototype with a container and a CSS background image then try and absolutely position an image behind text, make sure it adjusts in size to the size of the container, have the proper z-index, etc.

So even though you may eventually want to use an image in your markup because you are looking for accessibility and search engine indexing value, using a CSS background image may be a faster method for a prototype.

Conclusion

HTML <img> tags should be used when it is a critical piece of accessible content, and consider speed, performance, and manipulation when deciding on what to do with an image used as a visual design enhancement.