HTML img tag vs CSS background-image

Photo by Florian Olivo on Unsplash

In our day to day life, when we are building a UI component or a HTML template, we must have come across this scenario to choose between HTML <img /> tag vs CSS background-image property.

I also faced this situation and did some research on that. Here are some important points to consider before choosing one.

1. Accessibility — In case of background-image Screen readers will not announce its presence and therefore convey nothing to its users but they can read the html image alt attribute.
2. Performance — I have tried both the ways using different size of images. Performance is pretty much same using both.
3. Printing HTML Page — Browsers aren’t always set to print background images by default. If you want an image to print (cmd/ctrl + p) by default use <img /> otherwise you can choose background-image
4. SEO — Search engines cannot see the images, they can only search for alt attribute on images. So image tag with alt attribute helps us for SEO.
5. Image Manipulation — If you have image sprite or image layers and want to display on mouse hover or if you want some text on top of the image easily or if you want show only some part of the image or if you want to apply some cool background-attachment properties.. background-image is the option.
6. Basic Image protection — If you want to protect your image from people who don’t know the inspect element option, you can opt background-image
7. Call To Action — If you want your image to be clickable HTML image tag should be the option.

Apart from the above considerations, If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the <img /> tag with alt attribute. For all other use cases, use background image.

Ref: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image