皆さんは画像を配置するときにimgタグとbackground-imgどちらを使用しますか？
似たような要素ですが、どちらを利用すればよいか考えたいと思います。
SEO的に考える
まず、SEO的にimgタグとbackground-imgで違いがあるのかということですが、これはやはり違いがあるようです。
googleのインデックスにも登録されませんので、SEO的にはimgタグを使用した方が有利なようです。
どのように使い分けるのが良いのか？
SEO的にはimgタグを使用した方が良いことが分かりましたが、ではimgタグとbackground-imgをどのように使い分けるのか。
私が以前ネットで調べてなるほどと思ったのが、「デザインの飾りつけの画像、またはalt属性に記入する言葉が思いつかないものはbackground-imgを使う。」というものでした。
たとえば↑のようなタイトルがあったとしたら。（簡易的なものなので、画像じゃなくてborderで実装できそうですが。。。）
右と左の丸をつけたこの部分はただの飾りつけなので、background-imgを使う。
imgタグで実装した場合、alt属性にも何を入れていいんだか分からないですよね。
ということで、imgタグとbackground-imgの使い分けは、文書の中で必要な画像か、飾りつけか。
で決めたら良さそうです。
メインビジュアルの画像について
上の項でさんざんbackground-imgは飾りの部分と書きましたが、メインビジュアル（ヒーロー画像）の部分についてはその限りではないようです。
何社かのWeb制作会社様の制作実績を10サイトくらい確認したところメインビジュアルについては、
img：background-img 、 4：6 くらいの比率でbackground-imgを使用しているところが多かったように思います。
これはなぜなのか、個人的に考えてみました。
・メインビジュアル部分は、コーディングが複雑になりがちなので、スマホとPCで画像の置き換えが簡単なbackground-img を使用している。
・メインタイトルやその他のテキスト画像など、様々な要素があり、そこまでSEO意識しなくても大丈夫と思い背景として実装している。
これはあくまでも私が思ったことなので、別の理由があるかもしれません。
ただ、個人的にもメインビジュアルの部分はbackground-imgで実装しています。
理由はやはり、実装が楽だからです。
imgタグでやろうとすると、position: absoluteやpictureタグなど使用しないといけないものが増えますので、やはりbackground-imgが楽ですね。
まとめ
以上 imgタグとbackground-imgについて考えるでした。
二つの違いを意識してコーディングをしていきましょう。