Background Image Vs HTML Image? Which One Should I Use?

Beginners often get confused about when to show an image as a background image or as an actual HTML image. This short article gives you a direct answer.

By Hanno Zhuan

You might finish reading in 1 minute

Use CSS background-image property for decorative images. This means the image

  • gives no information at all;
  • makes your website more attractive only; and
  • is just a background image.

Use the HTML image element (<img>) for meaningful images. This means the image

  • needs alternative text;
  • must exist to give users information; and
  • is not a stock image.

A bonus tip for all of you: reduce the file size of your image. Do not make your users download 10 Megabytes (MB) of image when it can be reduced to 1 MB—or even less.