When should I use the </img> tag or the background CSS property?

Asked

Viewed 1,673 times

18

When should I use a tag </img> HTML to display an image?

And background-image CSS?

Factors such as accessibility and browser support can influence choice?

css html5
  • 8

    Not an answer, just an initial consideration: img is part of the content, CSS is not. That would already be a decision factor. Semantically if the image is part of the content, as a schematic diagram referred to in a text, the IMG makes more sense. Whether it’s a decorative element like a page texture, or a graphic detail, or a complementary image (like a logo in place of the company name in the header) usually makes more sense in CSS. It’s not general or absolute, I just wanted to get to the point.

  • CSS Transitions, with background-imagecan save us sometimes =]

  • @Lucascosta this can be done with IMG too, no problems.

  • @Bacco Well placed!

3 answers

16


Recommended uses of tag <img>:

  • When the image must appear if the page is printed. The browsers do not insert background images into prints, by default.
  • When it is important to insert a description of the image (attribute alt). This information is important in several cases as: the user is with slow internet connection and the images do not load (displaying only the description) or even visually impaired who access the page can know what the image is about (through software that "speaks" page text including image description).
  • When image needs to be indexed by searchers.

Recommended uses of background-image (CSS):

  • When the image is not part of the content, that is, is part of the website design.
  • When the image should not appear when the user prints the page.
  • When you want to use CSS Sprites

Completion

I believe that the content vs design factor influences the choice between img and background-image. An image that is part of the content used as background-image can impair accessibility and decrease the chance of a good page indexing in search engines. Regarding the performance, in some initial research I did, I found no differences in the loading time. One difference I found was that the background-image does not load if not being used, the tag img always carries.

Reference:
When to use IMG vs. CSS background-image?
Are unused CSS images downloaded?

  • 2

    Thank you so much, you cleared my doubts. Excellent answer!

  • @Aliciatairini Glad the answer helped you! = D

6

My answer was like this:

The property in CSS background-image should only be used when an image is decorative, that is, it has no semantic value and only serves to leave the page more "pretty", if the image is really important to understand the text, the tag should be used <img/>, and add the attribute alt to offer an alternative text to the image (com CSS não é possível fazer isso).

0

Hello, responding in a practical and simple way you can use the images in the CSS if you want them at the bottom of your page as the same background. And those with the normal image body img tag, like new products or other sections of html. And don’t forget the img tag always loads the image is the best part

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.