Zenn
🖼️

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

2021/05/23に公開
CSS
HTML
tech

背景

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

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

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

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の役割(文書と装飾)をしっかり考えろってことですね。

Discussion