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

Recommended uses of tag <img> :

• When the image needs to appear if the page is to be printed . browsers do not insert background images into impressions by default.
• When it is important to insert a description of the image (attribute alt ). This information is important in several cases such as: the user has a slow internet connection and the images do not carry (showing only the description) or even the visually impaired that access the page can know what the image is about (through software that "speaks" the text of the page including the description of the images).
• When the image needs to be indexed by search engines.

Recommended uses of background-image (CSS):

• When the image is not part of the content , that is, it 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

Conclusion

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

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

My response looks like this:

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

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