お母さんでもわかるimgタグとbackgroundの違い

imgタグとbackgroundどっち使えばいいの？

私は画像を表示させる際にどちらを使えばいいか全く気にしていなく、

「文字と重ならないからimgタグかな！」
「画像の上に文字を表示させたいからbackgroundかな！」

くらいの気持ちで実装していました・・・。しかし今回も当たり前ながら、少しでも適切な場面があると思うので共有したいと思います！

使用例

imgタグ

index.html

<div class="image">
   <img src="images/IMG_7737.PNG" alt="">
</div>

style.css

img {
  width: 100%;
  height: auto;
}

background

index.html

<div class="background-image"></div>

style.css

.background-image {
  background: url(../images/IMG_7737.PNG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
}

どちらもしっかり可変します！！！

大前提

大前提として

・画像自体に意味がある場合(画像がないと成立しない内容) → imgタグを使用
・画像自体には深い意味はなく、デザインのための場合 → backgroundを使う

・・・という考え方が基本だが、場面によっては逆を使いたい時があると思う。

それぞれのメリット・デメリットは？

	メリット	デメリット
imgタグ	・どこに画像を挿入したのかわかりやすい ・cssの記述が少ない ・alt属性を使うことができる	・HTMLの記述が増えて見づらい
background	・HTMLの記述が少なくなる ・画像自体には深い意味がないことを伝えられる(デザインのため)	・cssの記述が増える ・可変時に[縦の大きさ/横の大きさ＊１００]の計算が必要

上記の表を見ると「HTMLの記述が増える」「cssの記述が増える」「計算がめんどくさい」などのデメリットが出てきているため、これらを回避するため逆を使ってもいいのかなと思った(チームでやる場合は規約に従うか、相談してください)。

まとめ

HTMLやcssの記述量によって変えるのもありかなと思いました！
あまり水準する人はいないかもしれませんが、一人実装するときにでも活用してください！