web-dev-qa-db-ja.com

IMGとCSS background-imageのどちらを使用するのですか。

CSSのbackground-imageとは対照的に、HTML IMGタグを使用して画像を表示するのがどのような場合に適していますか。

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

htmlcssimagebackground-image
779
system PAUSE

IMGの適切な使用

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

IMGの実用的な使用

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

CSS background-imageを使用する場合

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

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

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

276
roborourke

私はまだ誰もこれについて言及していないことに驚きます： 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);
}

これは<img/>のsrcをフェードインさせるためのあらゆる種類のJavaScriptまたはjQueryアニメーションを保存します。

_ mdn _ の遷移に関する詳細情報。

104
Robbie JW

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

<img />を使用する場合

  1. あなたの画像を 検索エンジンで索引付けする必要がある場合
  2. デザインするのではなく、コンテンツと関連があるのなら。
  3. 画像が小さすぎない場合（アイコン画像ではありません）。
  4. altおよびtitle属性を追加できる画像.
  5. 印刷媒体cssを使用して印刷したいWebページからの画像

CSSを使うときbackground-image

  1. 純粋にデザインに使用される画像。
  2. コンテンツとは関係ありません。
  3. CSS3で遊べる小さな画像。
  4. 画像の繰り返し（ブログ作成者アイコンでは、日付のアイコンが各記事などに繰り返し表示されます）。

私はこれらの理由に基づいてそれらを使用するので。これらは検索エンジンによる画像の最適化のグッドプラクティスです。

63
subhash

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

49
JayTee

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ファイルで適切な<img>タグのsrc属性を更新する必要があります（プロセスを自動化するためにサーバーサイドのスクリプト言語または _ cms _ を使用していない場合）。

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

48
Steve Harrison

sanchothefat's answer とほぼ同じですが、別の観点からです。私はいつも自分自身に尋ねます：もし私がウェブサイトからスタイルシートを完全に削除するなら、残りの要素 only は内容に属しますか？もしそうなら、私は私の仕事を上手にやった。

44
Török Gábor

いくつかの答えはここでシナリオを複雑にしすぎます。これは死んだ単純な状況です。

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

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

あなたがこれに答えることができないならば、あなたはおそらくあなたがしていることやあなたがしたいことがわからないでしょう！

また、「プリンタにやさしい」かどうかを判断したいという理由だけで、2つの方法以外は考慮しないでください。またCSSでSEOの観点からコンテンツを隠さないでください。 CSSファイルで自分のコンテンツを自分で管理していることに気付いた場合、あなたは自分自身を脚で撃ちました。これは、内容が何であるかどうかを判断するための簡単な決定です。他のすべての側面は無視されるべきです。

40
Dyin

別の2つの引数を追加します。

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

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

28
Anders Rabo Thorbeck

<IMG>タグを使用することによるもう1つの利点はSEOに関連しています。つまり、画像タグのALT属性で画像に関する追加情報を提供できますが、CSSで画像を指定する場合はそのような情報を提供できません画像ファイル名のみが検索エンジンによって索引付けされる場合があります。 ALT属性はCSSアプローチよりも<IMG>タグSEOの利点を確実に与えます。そのため、私によれば、<IMG>タグを使用して、画像検索結果（Google画像検索など）でランク付けしたい画像を指定することをお勧めします。

17
Pavel Vladov

前景=画像。

背景= CSSの背景です。

17
cjk

背景画像は必要な場合にのみ使用してください。タイル張りのイメージを持つコンテナー。

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

14
Marc Uberstein

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

<img />の大きな問題はオーバーレイです。画像にCSSの内側の影を付けたい場合（box-shadow:inset 0 0 5px rgb(0,0,0,.5)）この場合、<img />は子要素を持つことができないので、位置決めを使用し、空の要素を追加する必要があります。これは無駄なマークアップに相当します。

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

12
Mat

background-imageを使用する必要があるその他のシナリオがいくつかあります。

  • マウスを置いたときに画像を変更したいとき。
  • 丸みを帯びた角を画像に追加するとき。 imgを使用すると、画像は丸みを帯びた角からはみ出します。
11
Behrang

複数のスキンやデザインのバージョンがある場合は、CSSのbackground-imageを使用してください。 Javascriptを使用して要素のクラスを動的に変更することで、要素に別の画像を表示させることができます。 IMGタグでは、それはもっとトリッキーかもしれません。

9
MK_Dev

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

8
Bryan M.

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

7
Maarten

画像の大きさはどうですか？ imgタグを使用すると、ブラウザは画像を拡大縮小します。 CSSの背景を使用している場合、ブラウザは大きい画像からチャンクを切り取るだけです。

7
anonymous

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

7
eivers88

また、私はこれらの画像が明らかに内容と見なされているとしても、矛盾した画像サイズを持つギャラリーセクションを持っています、私は背景画像を使い、セットサイズでdivにそれらを中心に置きます。これはfacebookが彼らのアルバムですることに似ています..

6
Chris

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

また、イメージ に意味がある をクリックできるようにする必要がある場合は、imgの方がcss backgroundより優れています。他のすべての状況では、css backgroundを使用できると思います。

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

フランス、パリのWeb学生

6
user589956

ちょっとした入力ですが、小さい画像であっても、応答性のある画像がiPhoneでのレンダリングを最大1分間遅くするという問題がありました。

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

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

5
winthers

ユーザーが「右クリック」して「save-image」/「save-picture」を使用できるようにするには、追加する小さなものとして、imgタグを使用する必要があります。その他.

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

5
dougajmcdonald

IMGはhtmlファイル自体の中にあるため、srcが最初にロードされます。一方、background-imageの場合、ソースはスタイルシートで記述され、イメージはスタイルシートのロード後にロードされ、Webページのロードが遅延します。

4
Sagi_Avinash_Varma

HTMLはコンテンツ用、CSSはデザイン用です。画像は必要であり、スクリーンリーダーで撮影する必要がありますか？答えが「はい」の場合は、画像をHTMLに配置します。純粋にスタイリング用のものであれば、CSSのbackground-imageプロパティを使って画像を挿入することができます。ここで多くの人がすでに述べたように、あなたが好きならイメージに擬似要素を使うことができます。

3
carltonstith

また、ほとんどの検索エンジンのスパイダーはCSSの背景画像にインデックスを付けないため、背景画像は無視され、検索エンジンからトラフィックを受け取ることはできません（要するにSEOの利点はありません）。

タグで定義されたすべての画像がインデックスされ（手動で除外されない限り）、それらのtitle/alt属性とファイル名が適切に最適化されていれば検索エンジンからトラフィックを取り込むことができます（w.r.t someキーワード）。

3
Nadeem Khan

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

2
Vishal Gupta

もう一つのbackground-image PRO：<ul>/<ol>リストのための背景画像。

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

全体的なデザインの一部ではなく、記事、人のための特定の画像、 google画像に追加するに値する重要な画像など、すべての画像にタグを使用します。

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

2
Gillian Lo Wong

私はそれらをほとんどのブラウザでサポートされている100％伸縮可能にしたいとき私はbackground-imageの代わりにimageを使います。

2
max

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

2
shingokko

作品にスパナを投げるためだけに - 私はあなたが決してimgタグを使うべきではないという意見です。 HTMLは、ビジュアルスタイルではなくコンテンツを対象としていました。あなたのページ上のすべての画像はあなたのHTMLコードを純粋なままにしてCSSから来るべきです。 （構築するのに少し時間がかかるとしても）

0
Big Coops