HTMLの画像(img)とCSSの背景画像(background-image)の違いは何か？

HTMLで設定する画像(img)と、CSSで設定する背景画像(background-image)は何が違うのか？
ホームページやブログなど、Webのページを作成する際に気になった人も多いのではないかと思います。

ぶっちゃけ、どちらを使用しても同じようにページ上に画像を表示させることはできますし、実現したいデザインによっては「imgよりbackground-imageを使ったほうが楽」というケースもあったりします。

しかし、そういう考え方でimgとbackground-imageのどちらにするかを決めるのは間違っています。
そしてデメリットもあります。

ではどのような考え方で判断するのか？
このページでは一つの解答を示してみます。

MDN Web Docsのリファレンスでの記載を確認する

まずHTMLのimg要素は、MDN Web Docsのリファレンスでは以下のように記載されています。

画像埋め込み要素
<img> は HTML の要素で、文書に画像を埋め込みます
画像埋め込み要素 – HTML: HyperText Markup Language | MDN

次に、CSSのbackground-imageは以下のように記載されています。

background-image は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。
background-image – CSS: カスケーディングスタイルシート | MDN

ここで重要なのは、imgは「画像」、background-imageは「背景画像」と記載されている点です。

background-imageで設定する画像はあくまでも「背景」なのです

上記のMDNの記載からもわかる通り、CSSで設定できるのは「背景画像」です。
CSSのプロパティ名が background-image になっていることからもそれはわかります。

つまり、そのページのメインのコンテンツではないもの、「背景」としての役割で存在している画像はCSSで設定すべきです。
逆に、そのページの「メインコンテンツの一つ」として存在する画像はimg要素として設置すべきです。

SEOの面でも効果が変わってくると思われます

ですので、HTMLやCSSのスキルが低い人が「目的のデザインを作るうえで、CSSのbackground-imageで設定するほうが楽だから」、または「imgで設定するほうが楽だから」みたいな理由で決めるのは間違っているのです。

例えば、ページ内の見出し(タイトル)の文章をpやdivでマークアップしていたら、SEOの面で不利になりますよね？
見出しはh1～h6のような専用のタグが用意されているのだから、それを使ったほうがSEOの面で有利になります。それと同じです。

さらに言うと、HTMLのimgには画像の説明文を記述しておく「alt属性」が存在します。
これにより、その画像の内容が何であるかを検索クローラーに理解させる手助けになります。(画像検索でその画像が出てきやすくなる)

しかし、CSSのbackground-imageにはそのようなものがありません。
そのため、その画像がGoogle画像検索に出てくる可能性は低いでしょう。

このような点からもimgのほうがSEOの面で有利になることが読み取れます。
その画像が「サイトのコンテンツの一つ」、つまり検索対象として扱われたいのなら、imgで設置すべきです。

一般の人には理解できない部分もきちんと作ることが重要です

「目的のデザインを実現するためにHTMLを組む」のではなく、「文書の構造に合わせてHTMLを組む」のが正しい作り方だし、SEOにも有効なのです。
目的のデザインはCSSのスキルでなんとかするのがプロなのです。(それがきちんとできているプロの業者が少ないのも事実ですが。。。)

Webの知識のない一般の人には見えない部分ですが、このようなことをきちんとできていないサイトはSEOに弱く、集客力のないただの名刺サイトになってしまうでしょう。