WEBサイトで画像を表示する方法はHTMLタグのimgタグを使う方法と、CSSのbackground-imageプロパティを使う方法、この2通りの方法があります。
どちらの方法を使っても同じ見え方を作ることが出来るため、どちらを使うのが適切なのか迷ってしまうことがよくありますね。

この場合は絶対にimgタグを使わないとダメ、こっちの場合はbackground-imageプロパティということはないため、今まであまり気にしたことはありませんでした。

そこで今回、この2つの使い分けをHTMLとCSSの関係と役割という観点から解説していきたいと思います。

HTMLとCSSの役割

まず、HTMLとCSSのそれぞれの役割について考えていきたいと思います。

HTMLとは

HTMLはWEBサイトに掲載する情報を記述するための役割を果たしています。

あるページが何について書かれているのかを明確に示すために、テキストや画像、時には動画などのメディアを使用して、閲覧者に情報を提供します。HTMLはこれらのメディアを組み合わせてページの構造を定義し、WEBブラウザがコンテンツを正しく表示するのに役立ちます。

CSSとは

CSSはWEBサイトのデザインや見栄えを設定する役割を果たしています。

CSSはWEBページ上の要素のスタイルやレイアウトを指定し、見た目を整えます。これにより、文字のサイズや色、背景の設定、ボーダーや余白の追加、要素の位置や配置などを制御出来ます。

imgタグとbackground-image

上でご紹介したようにHTMLとCSSの役割には明確な違いがありますね。

そして、画像を表示する方法には、HTMLの場合はimgタグ、CSSの場合はbackground-imageプロパティ。
この2通りの方法が存在しています。

imgタグの使い方

imgタグの場合は以下のようにすることで画像を表示することが出来ます。

<img src="https://irodori-design-web.com/blog_image/2180/2180.jpg" alt="【解説】imgタグとbackground-imageの使い分けの考え方">

実際には以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

imgタグを使用すると「alt属性」を設定することが出来ます。これはimgタグを使用した時にしか使用することが出来ません。
HTMLはWEBサイトに掲載する情報を記述するための役割があるため、このimgタグに設定されている画像がどんなものなのか説明するための設定です。

background-imageの使い方

background-imageプロパティの場合は以下のようにすることで画像を表示することが出来ます。

<div class="img"></div>

.img{
    width: 320px;
    height: 240px;
    background-image: url(https://irodori-design-web.com/blog_image/2180/2180.jpg);
}

実際には以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

見た目はimgタグを使った時と全く同じになっていますね。

しかし、background-imageプロパティの場合は、imgタグのようなalt属性を指定することは出来ません。
CSSは装飾をするためのものなので表示する画像に説明をすることは出来ません。

imgタグとbackground-imageの使い分け

WEBサイトに画像を表示するのはどんな時があるのか、いくつか挙げてみました。

• 食事の写真を載せる時
• 旅行の写真を載せる時
• コンテンツの背景に写真を表示する時
• タイトルをおしゃれにみせる飾りをつける時

画像を表示する場面というのはいろいろ想定されます。

HTMLとCSSの役割には明確な違いがあるのに、画像を表示するとなるとどちらを使うのが適切なのか迷ってしまうのは不思議ですね。

ここで注目したいのはHTMLとCSSの役割の違いです。
HTMLは「WEBサイトに掲載する情報を記述するための役割」、CSSは「WEBサイトのデザインや見栄えを設定する役割」です。

上の挙げた例の場合だと

• 食事の写真を載せる時
• 旅行の写真を載せる時

このふたつは画像自体に意味がありますね。テキストだけだと伝わりにくいから画像も掲載して分かりやすくしたい。
そしてalt属性に指定する言葉も「スタバのスイーツ」や「東京タワーで記念撮影」など、すぐに浮かぶと思います。

• コンテンツの背景に写真を表示する時
• タイトルをおしゃれにみせる飾りをつける時

それと対照的にこのふたつは画像自体に意味はありませんね。
画像の役割としては「背景に何もないと寂しいから背景画像を入れた」や「タイトルを目立たせるために装飾した」など、このような意味で画像を使っていると思います。

このように画像を表示する意味というのはこのように大きな違いがあります。

そこで上のような点を踏まえ、以下のような使い分けをします。

【imgタグ】コンテンツの説明に必要なもの

ページの説明をするために必要なもの、またはその内容を補足するためにあった方がいい画像の場合は、imgタグを使います。
少し違った観点から考えると、画像の説明文のalt属性がすぐに思いつくものはimgタグを使用するのが自然だと思います。

• 食事の写真を載せる時
• 旅行の写真を載せる時

このふたつはimgタグを使用する方が自然ですね。

【background-image】見た目を整える装飾目的なもの

見た目を整えるためや目立たせるためにアイコンを付ける場合など、その画像の意味が装飾的な意味合いが強い場合はbackgroud-imageプロパティを使います。
また、画像の説明文のalt属性がすぐに思いつかないものbackgroud-imagプロパティを使用するのが自然だと思います。

• コンテンツの背景に写真を表示する時
• タイトルをおしゃれにみせる飾りをつける時

このふたつはbackgroud-imagプロパティを使用する方が自然ですね。

まとめ

いかがでしたか？
どちらの方法を使っても同じ見た目を表現出来るため深く考えたことがないという人も多かったと思います。
HTMLとCSSにはそれぞれ役割というのが存在しています。その役割を理解し適切に選択することは。SEOの観点からも重要です。

中にはimgタグを使った方が実装しやすい、またはその逆もあるかもしれません。そのような時は絶対にこちらを使わないといけないということはないです。
大切なのはそれぞれの役割を理解し、自分なりに使い分けが出来るということだと思います。