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
Step 1: Accessibility
CSS background images may be visible, but present accessibility issues.
<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.
<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.
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
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-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.
<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.