🖼️

imgタグ(HTML)とbackground-image(CSS)の使い分け

1 min read

背景

Webサイトを作成する際に、画像を埋め込みたい場面が多くあると思います。
画像を埋め込む時には、以下の方法がよく知られています。

  • HTMLのimgタグを使う
  • CSSのbackground-imageプロパティを使う

上記の方法で、画像を画面に表示することは可能ですが、この2つの使い分けについては知らない人が多いのではないでしょうか?自分も気になったので調べてみました。

imgタグ(HTML)とbackground-image(CSS)の使い分け

結論から言うと、以下のように使い分けると良いようです。

  • HTMLのimgタグ:文書の内容上、必要不可欠な画像を指定する。
  • CSSのbackground-imageプロパティ:装飾目的に使用する画像を指定する。

もう少し詳しく説明します。

imgタグ(HTML)

  • HTMLのimgタグ:文書の内容上、必要不可欠な画像を指定する。

imgタグには、基本的にsrc属性alt属性を記述します。

  • srcは表示する画像のパスを指定する。
  • altは代替テキストで、画像が表示されなかった時に表示される文字を指定する。

altで代替テキストを書くくらいですから、imgタグには文書に必要な画像を指定するべきなのです。
また、以下のようにimgタグはながったらしいです。

index.html
<img src="XXXX/XXXX/XXX.png" alt="代替テキストを記載">

SEOを意識して、HTMLの最適化を考慮する場合、HTMLのサイズもその観点の1つとなります。
つまり、HTMLファイルサイズを軽減させるために、文書の構造上表示されなくても困らない画像はCSSで指定しろということです。

background-image(CSS)

  • CSSのbackground-imageプロパティ:装飾目的に使用する画像を指定する。

これはそのままの意味です。
装飾目的に使用する画像はCSSで指定すべきです。
CSSで指定する画像は、表示されなくても困らないものなので、代替テキストは記載しません。
(むしろ代替テキストがあったら邪魔ですよね。)

style.css
div {
    background-image: url(../XXXX/XXX.png);
}

具体例

実際に具体例で使い分けを紹介します。
あくまでも一例です。

以下のように3つの画像があったとします。

  • ①:背景画像(ピンク全体が背景画像と見てください)
  • ②:文字の横の☆マーク(画像として見てください)
  • ③:map画像

これらの3つの画像はimgタグ or background-imageプロパティどちらで指定すべきでしょうか?

  • imgタグ
    • ③:map画像
      • この文書にmap画像は必要不可欠です。
      • map画像がないと具体的な場所がイメージできません。
  • background-imageプロパティ
    • ①:背景画像
      • 背景がなくても見栄えが悪くなるくらいで、情報の欠落にはなりません。
      • 文書上、必須な画像とは言えません。
    • ②:文字の横の☆マーク
      • ☆マークがなくても、情報の欠落にはなりません。
      • 文書上、必須な画像とは言えません。

まとめ

今回は、imgタグ(HTML)とbackground-image(CSS)の使い分けを紹介しました。

  • imgタグ(HTML):文書の構造上必要不可欠な画像を指定する。
  • background-image(CSS):装飾目的の画像を指定する。

HTMLとCSSの役割(文書と装飾)をしっかり考えろってことですね。