<img/> vs background-image ?

質問:「Webサイトに画像を入れるには、HTMLの<img>タグとCSSによる背景画像属性の追加の2つの方法があります.2つの方法の違いと、どのような場合に画像を使用すればよいかを説明してください.」
上記の問題は実際の面接でよくある問題です.
使用する画像がコンテンツ・ストリームにとって重要である場合は、<img>タグを使用します.そうでない場合は、デザイン要素のみであれば、CSSによる背景画像属性の追加はSemantic Webに近いです.<img>タグおよびバックグラウンド画像プロパティは、srcプロパティおよびurlを介して画像ファイルをロードします.<img>タグには、srcプロパティとaltプロパティの画像ファイルの説明、および画像ファイルにエラーが発生していない場合に表示するテキストを同時に含めることができます.画像説明のテキストが含まれているため、ブラウザはalt属性値としての画像のテキストをよりよく理解することができる.

<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="html_img" />

ただし、background-imageプロパティはurlでのみ画像ファイルに挿入でき、説明(altプロパティなど)は含まれません.したがって、エラーが発生した場合、破損した画像だけでなく、テキストも露出しない.
しかし,入れようとする画像がコンテンツストリームに重要ではなく,むしろ設計要素として入れようとすると,エラーが発生したときに切れた画像が現れるよりも,コンテンツストリームにいっそ何も出てこないほうが自然である.

selector{
	background-image: url(https://heropy.blog/css/images/vendor_icons/html5.png);
}

コメントリンク
https://mygumi.tistory.com/369
https://blog.px-lab.com/html-img-tag-vs-css-background-image/