Rey's Blog

HTML <img> vs CSS background-image

Rey Jang's photo
Rey Jang

Accessibility

The HTML img tag has alt attribute to specify an alternate text for the image. Even if the image cannot be displayed properly on the browser, the readers still can get the idea of what the image represents. Besides, it's also important for SEO(Search Engine Optimization) because Search Engines like Google don't index background images automatically. Browsers cannot provide any information on the images unless they are coded with img tag and alt/title attributes.

Performance

Even when you are referencing the same URL for an image, the performance of processing HTML tag and CSS property is a night and day difference. If you have heavy background images declared in CSS, the browser is going to take much longer to parse the CSS file and load the images and it will delay the loading of entire page. With the img tag however, the request for loading images are made as the HTML is parsed, so the contents wrote before the img tag in the document will be loaded first. Because the web page is not entirely blank, the users would feel that the performance is much better than the CSS case.

Manipulation Possibilities

If you are using one or relatively small images, or if the image is only used for aesthetic reason and not part of the content, consider using CSS background-image property and the manipulation options. Background-image property can be used with various options such as colour, repeat and position. If manipulating your image easily is more important than the loading performance, using CSS property could be the better option for you.

Conclusion

Use the HTML img tag in the following cases:

  • If you need better accessibility and Search Engine Optimization
  • If you need speedy performance
  • If it is not just a design element but also a part of the content
  • If you expect that people will print your page

Use the CSS background-image property in the following cases:

  • If the image is only used for design purposes
  • If there is a need to repeat images.


Reference
buildawesomewebsites.com/html-img-vs-css-ba..
w3docs.com/snippets/html/when-to-use-html-i..