【徹底解説】imgタグとbackground-imageの完璧な使い分け

こんにちは。Webサイトに画像を埋め込み、表示させるには、

の2つが思い浮かぶと思います。

この2つ、結局のところどう使い分ければいいでしょう。それについて解説していきます。

結論

　言葉で説明すると、以下のような使い分けになります。

例えば次のような使い分けで、

になります（下画像）。

次の章でそれぞれについて詳しく説明していきます。

imgタグは、HTML上に指定するものです。したがって文書の一部として必要と考えられる画像に使うのが適切と言えます。例えば記事コンテンツ内の参考画像や、人物紹介ページの顔写真などが該当するでしょう。

最近はimgタグには6つの属性を指定する必要があります。簡単に説明すると以下の通りです。

コードの例はこちら。

<img
  width="1600" 
  height="900" 
  loading="lazy"
  decoding="async"
  src="path/to/image"
  alt="代替の文章"
/>

「alt属性がある＝テキストで代替する必要がある」ということは、やはり文書中に必要な画像を指定するべきだと言えますね。

imgタグの指定方法に関する詳しい解説はこちらの記事をご覧ください。

表示させたい画像があくまで装飾、デザイン性のためのものであればこちらを使います。セクションの背景画像だったり、CSS単体では難しいグラデーション表現のために画像を利用する場合などが該当しますね。

装飾用の画像は文書の一部とはみなさず、imgタグは不適切と言えます。

/* 書き方の例 */

.Image {
  background-image: url(./path/to/image.png);
}

さて、imgタグとbackground-imageの使い分けを解説しました。では次のようなアイコン画像はどうでしょう。

ここまでの説明を考えるとimgタグではなさそうです。基本的にアイコンがなくても意味は通ります。しかし背景画像かというとそれも違う感じがしますよね。

こういった場合は::beforeや::after擬似要素を使ったり、list-style-imageプロパティを使いましょう。

See the Pen Untitled by 世界一初心者に優しいプログラミング💻小林秀樹 (@hideki_climax) on CodePen.

こうすると、imgタグでもbackground-imageでもない方法で装飾的な画像を実装することができます。

というわけで、画像を表示する各種方法の使い分けについてでした。改めて確認すると以下のとおりです。

使い分けの基準は比較的明確ですが、現実にはどれに分類すべきか判断が難しい時があります。そういう場合は実装しやすいものを選んでも良いでしょう。厳密には違っていたとしても、大きく問題になるわけではありません。

しかし重要な使い分けですので少しづつ覚えていきましょう。

こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください！