HTML img vs 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.

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: CSS Background Image vs <img> 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 lazy loading for even more performance benefits.

Step 3: CSS Background Image 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.