IMGとCSSの背景画像を使用する場合

IMGCSS background-imageとは逆に、HTML タグを使用して画像を表示する方が適切な状況はどれですか。

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

IMGの適切な使用

1. 他のIMG人にページを印刷してもらいたい場合や、デフォルトで画像を含めたい場合に使用します。— JayTee
2. 警告アイコンのように、画像に意味的な意味がある場合はIMG（altテキスト付きで）使用します。これにより、スクリーンリーダーを含むすべてのユーザーエージェントで画像の意味を確実に伝えることができます。

IMGの実用的な使用

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

CSS background-imageを使用する場合

1. 画像がコンテンツの一部でない場合は、CSSの背景画像を使用します。— sanchothefat
2. テキストの画像置換を行う場合は、CSS背景画像を使用します。段落/ヘッダー。— sanchothefat
3. 他のbackground-image人にページを印刷してもらいたいのに、デフォルトで画像を含めたくない場合に使用します。— JayTee
4. CSSスプライトのbackground-imageように、ダウンロード時間を改善する必要がある場合に使用します。
5. background-imageCSSスプライトのように、画像の一部のみを表示する必要がある場合に使用します。
6. ウィンドウ全体を埋めるように背景画像を引き延ばすためにbackground-imagewith background-size:coverを使用します。

それは私にとって白黒の決断です。画像がロゴや図表、人物（実在の人物、ストックフォトの人物ではない）などのコンテンツの一部である場合は、<img />タグとalt属性を使用します。それ以外には、CSS背景画像があります。

CSSの背景画像を使用するもう1つのタイミングは、テキストの画像置換を行うときです。段落/ヘッダー。

まだ誰もこれについて言及していないことに驚いています。CSSトランジションです。

divの背景画像をネイティブに移行できます。

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

これは、フェードするJavaScriptやjQueryのアニメーションのあらゆる種類の節約<img/>のをsrc。

MDNの移行に関する詳細情報。

上記の回答では、デザインの側面のみを考慮しています。私はそれをSEOの側面でリストしています。

いつ使うか <img />

1. 画像を検索エンジンでインデックスに登録する必要がある場合
2. 設計しない内容と関係がある場合。
3. 画像が小さすぎない場合（アイコン画像ではありません）。
4. 追加altおよびtitle属性付けできる画像。
5. 印刷メディアCSSを使用して印刷するWebページの画像

CSSを使用する場合 background-image

1. 純粋に設計に使用された画像。
2. コンテンツとは関係ありません。
3. CSS3で再生できる小さな画像。
4. 画像の繰り返し（ブログの作者のアイコンでは、日付のアイコンは各記事などで繰り返されます）。

これらの理由に基づいて使用します。これらは、画像の検索エンジン最適化の推奨事項です。

ブラウザは、デフォルトで常に背景画像を印刷するように設定されているわけではありません。人々にあなたのページを印刷してもらうつもりなら:)

CSSが外部ファイルにある場合、サイト全体で頻繁に使用される画像（ヘッダー画像など）を背景画像として表示すると、後で画像を柔軟に変更できるので便利です。

たとえば、次のHTMLがあるとします。

<div id="headerImage"></div>

...そしてCSS：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

数日後、イメージの場所を変更します。CSSを更新するだけです。

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

それ以外の場合は、すべてのHTMLファイルのsrc適切な<img>タグの属性を更新する必要があります（プロセスを自動化するためにサーバー側スクリプト言語またはCMSを使用していない場合）。

また、ユーザーが画像を保存できないようにしたい場合は、背景画像が役立ちます（ただし、これを行う必要はありませんでした）。

sanchothefatの回答とほぼ同じですが、側面が異なります。私は常に自分自身に問いかけます。スタイルシートをWebサイトから完全に削除する場合、残りの要素はコンテンツにのみ属しますか？もしそうなら、私はうまく仕事をしました。

いくつかの答えは、ここでシナリオを複雑にしています。これは非常に単純な状況です。

画像を配置するたびに、この質問に答えてください。

これはコンテンツの一部ですか、デザインの一部ですか？

これに答えられない場合は、おそらく何をしているのか、何をしたいのかわからないでしょう！

また、「プリンタに優しい」かどうかにかかわらず、2つの手法の横にあることを考慮しないでください。また、CSSを使用してSEOの観点からコンテンツを非表示にしないでください。CSSファイルでコンテンツを管理していることに気付いた場合は、脚を撃ちました。これは、コンテンツであるかどうかのささいな決定です。他のすべての側面は無視する必要があります。

さらに2つの引数を追加します。

• IMGのあなたがする必要がある場合はタグが良いですリサイズした画像を。たとえば、元の画像が100x100ピクセルで、80x80ピクセルにしたい場合は、imgタグのCSSの幅と高さを設定できます。background-imageを使用してこれを行う良い方法は知りません。編集：これは、background-sizeCSS3属性を使用して、背景画像でも実行できるようになりました。

• スプライトを動的に切り替える必要がある場合は、background-imageの使用が適しています。たとえば、ボタン画像があり、カーソルを要素の上に置いたときに別の画像を表示したい場合は、通常のスプライトとホバースプライトの両方を含む背景画像を使用して、背景の位置を動的に変更できます。

<IMG>タグの使用によるもう1つの利点はSEOに関連しています。つまり、画像に関する追加情報を画像タグのALT属性で提供できますが、CSSを介して画像を指定するときにそのような情報を提供する方法はありません。検索エンジンがインデックスを作成できるのは、画像ファイル名のみです。ALT属性は、CSSアプローチよりも確実に<IMG>タグSEOの利点を提供します。それが、私によると、<IMG>タグを使用して、画像検索結果（Google画像検索など）でランク付けしたい画像を指定する方が良い理由です。

フォアグラウンド= img。

背景= CSSの背景。

背景画像は、タイル状の画像を含むコンテナなど、必要な場合にのみ使用してください。

IMAGESを使用することによる主要なPROSの1つは、SEOに適していることです。

背景画像を使用して、寸法を完全に指定する必要があります。実際にそれらを事前に知らないか、またはそれらを決定できない場合、これは重大な問題になる可能性があります。

の大きな問題<img />はオーバーレイです。画像（box-shadow:inset 0 0 5px rgb(0,0,0,.5)）にCSSの内側のシャドウが必要な場合はどうすればよいですか？この場合、<img />子要素を持つことはできないので、配置を使用して空の要素を追加する必要があります。これは、役に立たないマークアップに相当します。

結論として、それはかなり状況的なものです。

background-image使用する必要がある他のいくつかのシナリオ：

• マウスを上に置いたときに画像を変更する場合。
• 画像に角を丸くしたい場合。を使用imgすると、丸みを帯びた角から画像が漏れます。

デザインの複数のスキンまたはバージョンの場合は、CSS background-imageを使用します。JavaScriptを使用して、要素のクラスを動的に変更できます。これにより、別の画像を強制的にレンダリングします。IMGタグを使用すると、よりトリッキーになる場合があります。

これは技術的な考慮事項です：画像は動的に生成されますか？<img>CSSプロパティを動的に編集するよりも、HTMLでタグを生成する方がはるかに簡単です。

画像のサイズはどうですか？imgタグを使用すると、ブラウザが画像を拡大縮小します。css backgroundを使用すると、ブラウザは大きな画像からチャンクを切り取ります。

CSS TranslateX / Y（htmlをアニメーション化する適切な方法）を使用して画像をアニメーション化することについて-アニメーション化されているCSSの背景画像とアニメーション化されているIMGタグをChromeタイムラインで記録すると、CSSのペイント時間が大幅に短縮されます。背景画像。

別の理由があります！レスポンシブデザインがあり、デバイスの低解像度、中解像度、高解像度の画像の使用をメディアクエリで分割する場合は、背景も使用する必要があります。

また、ギャラリーセクションで画像のサイズに一貫性がないため、これらの画像は明らかにコンテンツと見なされますが、背景画像を使用して、設定されたサイズのdivの中央に配置します。これはFacebookがアルバムで行うことと似ています。

imgは理由によりhtmlタグなので、使用する必要があります。物を参照したり説明したりするために、人々は例：記事の中。

また、画像に意味があるか、クリック可能にする必要がある場合、imgはcss背景よりも優れています。他のすべての状況では、CSSバックグラウンドを使用できると思います。

しかし、それは何度も何度も議論する必要がある主題です。

フランス、パリ出身のWeb学生

追加する小さなものだけですが、ユーザーが「右クリック」して「画像を保存」/「画像を保存」できるようにする場合は、imgタグを使用する必要があります。そのため、画像をその他。

背景画像を使用すると（ほとんどのブラウザで私が知っている限り）、画像を直接保存するオプションが無効になります。

小さな入力ですが、小さな画像でも、iphoneでのレンダリングが最大1分間遅くなるレスポンシブな画像で問題が発生しました。

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

しかし、背景画像を使用するように切り替えると、問題はなくなりました。これは、新しいブラウザーをターゲットにしている場合にのみ実行可能です。

IMGが最初にロードされるのsrcは、それがhtmlファイル自体にあるのに対しbackground-image、ソースの場合はスタイルシートで言及されているため、スタイルシートがロードされた後に画像がロードされ、Webページのロードが遅延するためです。

HTMLはコンテンツ用で、CSSはデザイン用です。画像は必要ですか？スクリーンリーダーで拾う必要がありますか？答えが「はい」の場合、画像をHTMLに入れます。純粋にスタイル設定の場合は、CSSのbackground-imageプロパティを使用して画像を挿入できます。ここで多くの人がすでに述べたように、必要に応じて画像に疑似要素を使用できます。

また、ほとんどの検索エンジンスパイダーはCSS背景画像をインデックスに登録しないため、背景画像は無視され、検索エンジンからトラフィックを取得できなくなります（SEOのメリットはありません）。

タグで定義されたすべての画像はインデックスに登録され（手動で除外されない限り）、タイトル/代替属性とファイル名が適切に最適化されている場合（キーワードを記述）、検索エンジンからトラフィックを取り込むことができます。

画像を滑らかにし、さまざまな画面サイズに拡大縮小する場合は、IMGタグを使用できます。私にとって、これらの画像はほとんどコンテンツの一部です。コンテンツの一部ではないほとんどの要素では、CSSスプライトを使用して、アイコンなどを実際にアニメーション化したくない限り、ダウンロードサイズを最小限に抑えます。

ほとんどのブラウザーでサポートされている100％ストレッチ可能なものにしたい場合は、background-imageではなくimageを使用します。

ページの特別なコンテンツまたは1ページのみの画像を追加する場合はIMGタグを使用し、複数のページに画像を配置する場合はCSS背景画像を使用する必要があります。

別の背景画像PRO：<ul>/ <ol>リストの背景画像。

全体的なデザインの一部であり、複数のページで繰り返される場合は、背景画像を使用します。最適化のために、バックグラウンドのスプライト形式が望ましい。

全体的なデザインの一部ではなく、1回だけ配置される可能性が高いすべての画像にタグを使用します。たとえば、記事の特定の画像、人物、Google画像に追加するに値する重要な画像などです。

**私が<img>タグで囲む唯一の繰り返し画像は、サイト/会社のロゴです。人々はそれをクリックしてホームページに移動する傾向があるため、<a>タグでラップします。