Home » Web Development » When to use HTML IMG tags vs. CSS background-image

Including an image on an HTML page can be done using either the HTML img tag or using the CSS background-image property. Having understood that, the next question is when to use which of these two methods.

From a semantics point of view we can say that the img tag should be used whenever the image is directly related to the content being explained on the page. Thus if I am showing a cooking recipe and want to display a photo of the finished plate, that would be directly related to the content and thus an tag would be in order. If on the other hand I want to display an image as part of the site’s design or for decoration purposes, it would be ideal to use the CSS background-image property.

Some other considerations to keep in mind are outlined in the following list of recommended uses for each method.

HTML img tag:

1. Use IMG if you intend to have people print your page and you want the image to be included by default.
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
3. Use IMG if you rely on browser scaling to render an image in proportion to text size.
4. Use IMG for multiple overlay images in IE6.
5. Use IMG with a z-index in order to stretch a background image to fill its entire window.
6. Using img instead of background-image can dramatically improve performance of animations over a background.

CSS background-image property:

1. Use CSS background images if the image is not part of the content.
2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers.
3. Use background-image if you intend to have people print your page and you do not want the image to be included by default.
4. Use background-image if you need to improve download times, as with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.

Related posts:

1. The comprehensive tutorial for CSS-driven web menus
2. How to automatically fix image orientation
3. Image Replacement Techniques
4. A Few Words on Accessibility
5. Image maps in web design