html - IMGとCSSの背景画像をいつ使用するのですか？

Question

CSSではなくHTMLIMGタグを使用して画像を表示する方が適切なのはどのような状況background-imageですか。その逆も同様です。

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

score 879 · Accepted Answer

IMGの正しい使い方

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

IMGの実用的な使用

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

CSS background-image を使用する場合

画像がコンテンツの一部でない場合は、CSS 背景画像を使用します。—サンチョテファット
テキストの画像置換を行う場合は、CSS 背景画像を使用します。段落/ヘッダー。—サンチョテファット
他のユーザーにページを印刷してもらい、デフォルトで画像を含めたくない場合にbackground-image使用します。—ジェイティー
CSS スプライトbackground-imageのように、ダウンロード時間を改善する必要がある場合に使用します。
background-imageCSS スプライトのように、画像の一部だけを表示する必要がある場合に使用します。
背景画像を拡大してウィンドウ全体を埋めるために使用background-imageします。background-size:cover

score 305 · Accepted Answer

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

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

score 56 · Accepted Answer

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

score 53 · Accepted Answer

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を使用していないと仮定します)。

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

score 47 · Accepted Answer

sanchothefat's answerとほぼ同じですが、別の側面からです。私は常に自分自身に問いかけます: Web サイトからスタイルシートを完全に削除するとしたら、残りの要素はコンテンツにのみ属しているのでしょうか? もしそうなら、私は自分の仕事をうまくやった。

score 45 · Accepted Answer

一部の回答は、ここでのシナリオを過度に複雑にしています。これは非常に単純な状況です。

画像を配置するたびに、この質問に答えるだけです。

これはコンテンツの一部ですか、それともデザインの一部ですか?

これに答えられない場合は、自分が何をしているのか、何をしたいのかわからない可能性があります。

また、単に「印刷に適した」ものにしたいかどうかという理由だけで、この 2 つの手法を考慮しないでください。また、CSS を使用して SEO の観点からコンテンツを非表示にしないでください。CSS ファイルでコンテンツを管理していることに気付いた場合は、自分自身を撃ったことになります。これは、何がコンテンツであるかどうかの些細な決定です。他のすべての側面は無視する必要があります。

score 28 · Accepted Answer

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

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

score 23 · Accepted Answer

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

score 19 · Accepted Answer

19

前景 = img.

背景 = CSS の背景。

于 2009-05-22T18:03:51.397 に答える

score 14 · Accepted Answer

背景画像は必要な場合にのみ使用してください。

IMAGESを使用する主な利点の 1 つは、SEO に優れていることです。

score 12 · Accepted Answer

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

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

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

score 11 · Accepted Answer

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

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

score 10 · Accepted Answer

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

score 7 · Accepted Answer

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

score 7 · Accepted Answer

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

score 7 · Accepted Answer

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

score 7 · Accepted Answer

CSS TranslateX/Y を使用した画像のアニメーション化に関して (HTML をアニメーション化する適切な方法) - CSS の背景画像の Chrome タイムライン記録を行うと、アニメーション化された画像と IMG タグがアニメーション化されている場合、CSS のペイント時間が大幅に短縮されることがわかります。背景画像。

score 6 · Accepted Answer

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

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

とはいえ、何度も話し合う必要のあるテーマです。

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

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

背景画像を使用すると (ほとんどのブラウザーで認識している限り)、画像を直接保存するオプションが無効になります。

score 4 · Accepted Answer

IMGsrcソースの場合はスタイルシートに記載されているため、最初にロードbackground-imageするため、スタイルシートがロードされた後に画像がロードされ、Webページのロードが遅れます。

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

ほとんどのブラウザーでサポートされている 100% 伸縮可能にしたい場合は、background-image の代わりに image を使用します。

score 2 · Accepted Answer

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

score 0 · Accepted Answer

作品にスパナをかけるためだけに、imgタグは絶対に使用しないでください。HTMLは、視覚的なスタイルではなく、コンテンツを対象としていました。ページ上のすべての画像はCSSからのものであり、HTMLコードは純粋なままである必要があります。（ビルドに少し時間がかかる場合でも）

html - IMGとCSSの背景画像をいつ使用するのですか？

31 に答える 31

IMGの正しい使い方

IMGの実用的な使用

CSS background-image を使用する場合

Related

Reference