[解決済み] IMGとCSSのbackground-imageはいつ使い分ける？

質問

どのような場面でHTMLの IMG タグで画像を表示するのではなく、CSSの background-image また、その逆は？

要因としては、アクセシビリティ、ブラウザのサポート、動的コンテンツ、またはあらゆる種類の技術的な制限やユーザビリティの原則が考えられます。

解決するには？

IMGの正しい使い方

1. 使用方法 IMG を使用する場合は 人々 ページを印刷する で、デフォルトで画像が含まれるようにしたい場合。 - JayTee
2. 使用方法 IMG (とともに alt のように、画像が重要な意味を持っている場合は、テキストを使用します。 警告アイコン . これにより、スクリーンリーダーを含むすべてのユーザーエージェントで、画像の意味を確実に伝えることができる。

IMGの実用的な使用方法

1. 使用方法 IMG とalt属性があります。 は コンテンツの一部 ロゴ、図、人物（実在の人物、ストックフォトの人物ではない）など。 - サンチョファット
2. 使用方法 IMG テキストサイズに比例して画像をレンダリングするためにブラウザのスケーリングに依存する場合。
3. 使用する IMG に対して IE6で複数のオーバーレイ画像を表示する .
4. <ストライク 使用方法 IMG を付けて z-index というのは になります。 背景画像を引き伸ばす をウィンドウいっぱいに表示します。
   なお、CSS3のbackground-sizeでは、これはもう正しくありません; 以下の#6を参照してください。
5. 使用方法 img の代わりに background-image を使用すると、背景上のアニメーションのパフォーマンスを劇的に向上させることができます。

CSS background-imageを使用する場合

1. の場合、CSS背景画像を使用します。 画像 はコンテンツの一部ではありません。 . - サンチョファット
2. CSSの背景画像を使用する場合 する テキストを画像に置き換える 例：段落・ヘッダー - サンチョファット
3. 使用方法 background-image を使用する場合は 人々 ページを印刷する で、デフォルトで画像が含まれないようにしたい場合。 - JayTee
4. 使用方法 background-image のように、ダウンロード時間を短縮する必要がある場合は と CSSスプライト .
5. 使用方法 background-image CSSスプライトのように、画像の一部だけを表示する必要がある場合。
6. 使用方法 background-image と共に background-size:cover を使用すると、背景画像をウィンドウいっぱいに引き伸ばすことができます。