Hello Readers.

There  are situations when we have  to decide to use either an <img> tag or a background-image. But then we think of the same visual outcome and choose at random among the two. Let us learn about the two and the criteria which will help us decide which to use in different situations.

<img> is a HTML tag. It is used to display images in a web document.

Background image property is used to style a web document. CSS background property is used to set images which are not a part of document. Background images are merely for presentation.

There are various factors that would help us decide among the two. These include accessibility, browser support, dynamic content, or any  technical limits.

1. Accessibility :

   CSS background images may have certain accessibility issues.

   For example, img tags have the facility to add alt text or a title attribute, which can be read by screen readers. This is helpful in situations when the image fails to load. In this case, the user gets to read an alternate text in place of the image.

2. Performance : The performance issue really supports the background image property. If you have a large number of <img> tags declared, the browser takes long to parse the CSS file and load down all these images, which delays the loading of the page. Use background-image if you wish to improve the download times.

3. Specific Manipulation : There are many manipulation options we have with CSS.

   Background images can be manipulated with background-color, background-repeat, background-attachment, background-position etc. These provide a lot of ways to make the background images interactive. Also, if we want to write a  text on top of the image, use the 'absolute' position for the image. Adjust the image and the text accordingly.

To note,

use IMG if you intend your page to be printed and want your image to be a part of the page by default and use background-image if you intend your page to be printed and do not want the image to be a part of the document by default.

Different situations have different requirements. It is up to us how we analyse them.