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

https://stackoverflow.com/questions/492809

20-08-2019
|

質問

HTML を使用するのがより適切な状況はどのような場合ですか IMG CSS ではなく画像を表示するためのタグ background-image, 、およびその逆？

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

解決

IMGの適切な使用法

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

IMG の実用的な使用法

使用 IMG 画像がある場合は、さらにalt属性内容の一部ロゴ、図、人物など（ストック写真の人物ではなく、実在の人物）。—サンチョテファット
使用 IMG ブラウザのスケーリングに依存して、テキストサイズに比例して画像をレンダリングする場合。
使用 IMG のために IE6の複数のオーバーレイ画像.
~~使用 IMG とともに z-index するために背景画像を引き伸ばすウィンドウ全体を埋めるために。~~
これは、CSS3 の背景サイズでは当てはまらないことに注意してください。以下の #6 を参照してください。
使用する img の代わりに background-image 背景上のアニメーションのパフォーマンスを大幅に向上させることができます。

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

画像の場合はCSSの背景画像を使用しますコンテンツの一部ではありません. —サンチョテファット
行うときにCSSの背景画像を使用しますテキストの画像置換例えば。段落/ヘッダー。—サンチョテファット
使用 background-image あなたが人々を持つつもりならページを印刷する画像をデフォルトで含めたくない場合。—ジェイティー
使用 background-image ダウンロード時間を改善する必要がある場合、 CSSスプライト.
使用 background-image CSS スプライトのように、画像の一部だけを表示する必要がある場合。
使用 background-image と background-size:cover 背景画像をウィンドウ全体に広げるために。

他のヒント

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

テキストなどの画像交換を行う際に

CSSの背景画像を使用するには、他の時間があります。段落/ヘッダます。

まだ誰もこれについて言及していないことに驚きました: 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 />

画像が必要な場合 検索エンジンによってインデックスされる
デザイン以外の内容に関わるものであれば。
画像が小さすぎない場合（象徴的な画像ではない場合）。
追加できる画像 alt そして title 属性。
印刷メディア CSS を使用して印刷したい Web ページの画像

CSS を使用する場合 background-image

純粋にデザインに使用される画像。
内容とは関係ありません。
CSS3で再生できる小さな画像。
画像の繰り返し（ブログ著者アイコン、日付アイコンなどは記事ごとに繰り返し表示されます）。

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

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

あなたは、外部ファイルにあなたの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;
}

//en.wikipedia：

そうでなければ、あなたは（あなたは、サーバー側のスクリプト言語や<のhref = "HTTPを使用していないと仮定すると、すべてのHTMLファイルに適切なsrcタグの<img>属性を更新する必要があると思います。 ORG /ウィキ/ Content_management_system」のrel = "noreferrer"> CMS）は、プロセスを自動化するを。

ユーザーが（私が今までこれを行うために必要とされていないが）画像を保存できるようにしたくない場合は、

また、背景画像が有用であります。

sanchothefatの答えが、別の側面から。私は常に自分自身に尋ねる：私は完全にウェブサイトからスタイルシートを削除するならば、残りの要素はが唯一のは、コンテンツに属しているのですか？もしそうなら、私はよく私の仕事をしてくれます。

いくつかの答えがここにシナリオをovercomplicate。これは死んでシンプルな状況です。

ちょうどあなたが画像を配置したいのですが、この質問に毎回答えるます：

の設計のコンテンツまたは一部のこの部分ですか？の

あなたがこれを答えることができない場合は、

、あなたはおそらく、あなたがやっているかわからないか、あなたは何をしたいのか！

また、あなたがたりない「優しいプリンタ」になりたいと思いますという理由だけで、2つの手法の横に考慮していません。また、CSSでのビューのSEOの観点からコンテンツを隠しません。あなた自身がCSSファイルでコンテンツを管理する見つけた場合、あなたは足で自分を撃ちました。これは、コンテンツのかそうでないかのちょうど些細な決定です。他のすべての側面は無視されるべきである。の

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

アン画像必要に応じてタグを付けると良いでしょう サイズ変更 画像。例えば。元の画像が 100 ピクセル x 100 ピクセルで、それを 80 ピクセル x 80 ピクセルにしたい場合は、img タグの CSS の幅と高さを設定できます。 ~~背景画像を使用してこれを行う良い方法がわかりません。~~ 編集：これは、背景画像でも実行できるようになりました。 background-size CSS3属性。
使用する 背景画像 動的に必要な場合に適しています スプライトを切り替える. 。例えば。ボタン画像があり、カーソルが要素上にあるときに別の画像を表示したい場合は、通常のスプライトとホバースプライトの両方を含む背景画像を使用し、背景の位置を動的に変更できます。

タグを使用してから、もう一つの利点はSEOに関連している - CSSを介して画像を指定する場合、そのような情報を提供する方法はありませんが、あなたがイメージタグのALT属性で画像に関する追加情報を提供することができ、すなわち、その場合にのみ、画像ファイル名は、検索エンジンでインデックス化することができます。 ALT属性は間違いなくCSSのアプローチの上にタグのSEOの利点を提供します。私によると、あなたがタグを使用して画像検索結果（例えば、Google画像検索）でよくランク付けしたい画像を指定した方が良い理由です。

前景= IMG。

背景= CSSの背景ます。

必要な場合にのみ、例えば背景画像を使用しますタイル画像とコンテナます。

のの画像を用いて、主要なPROSのひとつのそれはSEOのための優れているということです。

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

<img />の大きな問題は、オーバーレイです。私は私のイメージ（box-shadow:inset 0 0 5px rgb(0,0,0,.5)）にCSS内側の影をしたい場合は？ <img />は、子要素を持つことができないので、この場合は、あなたがポジショニングを使用して、無用のマークアップに相当空の要素を追加する必要があります。

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

他にもいくつかのシナリオがあります。 background-image 使用すべきです：

画像の上にマウスを置くと画像が変化するようにしたいとき。

~~画像の角を丸くしたいとき。使用する場合 img, 、角の丸い部分から画像が漏れてしまいます。~~

設計の複数のスキンやバージョンの場合にはCSSの背景画像を使用します。 Javascriptが動的に異なる画像をレンダリングするためにそれを強制れる、要素のクラスを変更するために使用することができます。 IMGタグで、それはよりトリッキーなことがあります。

ここでは技術的配慮です：画像を動的に生成されるのですか？これは、動的にCSSプロパティを編集しようとするよりも、HTMLで<img>タグを生成するために非常に簡単になる傾向がある。

画像のサイズはどう？私はimgタグを使用した場合、ブラウザは、画像を拡大縮小します。私はCSSの背景を使用している場合は、ブラウザだけで拡大画像からチャンクをカットします。

CSS移動X / Y（HTMLをアニメーション化する適切な方法）を使用して画像をアニメーションに関しては - あなたはIMGタグがアニメ化された対アニメーションされているCSSの背景画像のクロームタイムラインの記録を行う場合は、塗装時間が大幅に短縮されているが表示されますCSSの背景画像用。

別の理由があります！あなたは応答デザインを持っており、メディアクエリを通じて、低、中、およびデバイス用の高解像度画像の使用を分割したい場合は、同様の背景を使用する必要があります。

また、私は背景画像を使用して設定されたサイズとdiv要素でそれらを中心に、一貫性のない絵を持っているギャラリーのセクションでは、ので、それらの画像は明らかに考慮されていても、コンテンツのサイズがあります。これは、Facebookが彼らのアルバムで何に似ている..

画像は html タグであるため、使用する必要があります。物事を参照したり説明したりするために、次のような人がいます。記事で。

画像の場合も 意味がある またはクリック可能にする必要があります画像よりも優れています CSSの背景. 。他のすべての状況については、次のように思います。 CSSの背景 に使える。

ただし、それは何度も議論する必要があるテーマです。

フランス、パリ出身のウェブ学生

あなたは、ユーザーがあなたのように画像を提供する予定ので、もし、「右クリック」と「セーブ・イメージを」/「保存ピクチャ」をすることができるようにしたい場合は、
ただ、小さな1が追加するには、imgタグを使用する必要があります他の人のためのリソースます。

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

小さな入力、私は応答画像が小さくてもイメージで、分までのため、iPhone上でのレンダリングを遅くして問題を抱えています：

 <div class="stuff"> <img src=".." width="100%" /> </div>

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

ウェブページのローディングを遅らせるIMGがsrcの場合、一方のHTMLファイル自体にあるため、最初のソースはスタイルシートがロードされた後に画像をロードようスタイルシートに記載されている
background-image負荷、。

HTMLコンテンツのためのものであり、CSSでデザインのためです。画像が必要であり、それはスクリーンリーダーによってピックアップする必要があるのでしょうか？答えがイエスであれば、HTMLに画像を置きます。それはスタイリングのために純粋である場合は、イメージを注入するためにCSSのbackground-imageプロパティを使用することができます。ここで多くの人がすでに言及しているのと同じように、あなたが好きなら、あなたは、画像上の擬似要素を使用することができます。

また、ほとんどの検索エンジンのスパイダーは、したがって、背景画像は無視されていないインデックスCSSの背景画像を行うと、あなたが検索エンジンからのトラフィック（略していないSEOの利益）を取得することができなくなりますのでご注意ます。

どこのタグで定義されたすべての画像のように（手動で除外されない限り）、インデックス化され、そのタイトル/ ALT属性とファイル名は（いくつかのキーワードをw.r.t）適切に最適化されている場合は、検索エンジンからのトラフィックをもたらすことができます。

あなたはイメージが異なる画面サイズへの流体とスケールになりたい場合は、
あなたはIMGタグを使用することができます。私にとってこれらの画像は、主にコンテンツの一部です。コンテンツの一部ではないほとんどの要素については、私は私は本当に、アイコンなどをアニメーション化する場合を除き、最小限のダウンロードサイズを維持するためにCSSスプライトを使用します。

私は彼らにほとんどのブラウザでサポートされている伸縮性を100％にしたいとき
私の代わりに背景画像の画像を使用します。

あなただけのページ上の特別なコンテンツのためか、IMGタグを使用する必要がありますし、あなたが複数のページに画像を入れたい場合、あなたはCSSの背景画像を使用する必要がある唯一の1ページ分の画像を追加したい場合。

を別の背景画像PRO：<ul> / <ol>リストの背景画像の
。彼らは全体的な設計の一部であり、複数のページで繰り返されている場合、
背景画像を使用してください。好ましくは、最適化のための背景スプライト形式でます。

全体的なデザインの一部ではないすべての画像のタグを使用し、最も可能性が高いの の画像をGoogleに追加するに値する記事、人々、そして大切な画像のための特定の画像のように、一度配置されています。 のの

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow