画像はimgタグとbackground、どっちを使うべき？

この記事の前提条件

対象: HTML・CSS
難易度: ★☆☆
所要時間: 約5分

Web制作を始めたばかりの頃、「画像を置きたいだけなのに、<img>タグとCSSのbackground-image、どっちを使えばいいの？」と迷ったことがある人は多いと思います。実はこれ、好みの問題ではなく「その画像がコンテンツの一部かどうか」で明確に使い分けるべきという基準があります。

目次非表示

判断基準: 「意味のある画像」ならimgタグ
判断基準: 「装飾」ならbackground-image
実務での判断に迷ったら
まとめ

目次へ

判断基準: 「意味のある画像」ならimgタグ

商品写真、記事のアイキャッチ画像、人物写真など、その画像自体が伝えたい情報を持っている場合は<img>タグを使います。

<img src="product.jpg" alt="ハンドメイドの陶器マグカップ、深緑色">

理由は大きく2つあります。1つ目はalt属性でスクリーンリーダー(視覚障がいのある方が使う読み上げソフト)に内容を伝えられること。2つ目はGoogle画像検索の評価対象になり、SEO上のプラスになることです。CSSのbackground-imageで表示した画像は、この2つの恩恵を一切受けられません。

判断基準: 「装飾」ならbackground-image

一方、ページの背景パターン、セクションの区切りに使うワンポイントのアイコン画像など、なくても情報が欠けない、あくまで見た目のための画像はCSSのbackground-imageで指定します。

.hero-section {
  background-image: url("bg-pattern.png");
  background-size: cover;
}

装飾目的の画像をHTMLに<img>で書いてしまうと、スクリーンリーダーが「意味のない画像」まで読み上げようとしてしまい、かえって利用者にとって邪魔な情報になってしまいます。

💡 background-imageならではの便利機能もある

background-size: cover;を使うと、要素の縦横比に関係なく、画像の縦横比を保ったまま要素いっぱいに敷き詰めることができます。カバー写真やヒーローセクションの背景など、画面サイズによって表示領域の縦横比が変わる箇所では、この扱いやすさからbackground-imageが選ばれることも多いです(<img>タグでもobject-fit: cover;を使えば近いことは可能です)。