HTMLのメリット

1. シンプルで直感的
タグからしてここに画像がある！ってすごくわかりやすいです笑　また、サイトからも画像だと認識されやすくなるので、すぐに読み込んで表示しようとしてくれます。

2. SEO対策ができる
titleやaltを付けることで、画像の説明を付けることができます。ユーザーだけでなく、サイトもどんな画像か理解することができるのでSEO対策につながります。

title
表示された画像にマウスカーソルを合わせると、小さく説明文を表示してくれます。情報を文字で補足してくれるのでわかりやすいのですが、タブレットやスマホではマウスカーソルの概念がないため動作しません。
記入例：
<img src=“画像のリンク” title="説明文">

alt
何らかの理由で画像が表示されなかった時に表示されるテキストを指定できます。これなんだろう？とならないため、ユーザビリティ的に見ても極力入れておきたい属性になります。 正しく入れられれば検索エンジンに画像を認識してもらえるのですが、不適切な設定をすると逆にスコアを下げられてしまう可能性があります。
記入例：
<img src=“画像のリンク” alt="画像名">

HTMLのデメリット

1. デザインの柔軟性が低い（整えにくい）
画像を追加した後、サイズの調整や位置の調整をしようと思った時に、必ずCSSを記入しなければなりません。

2. ページの読み込みが遅くなることがある
<img>は即座に読み込まれるため、大きな画像をいくつも入れてしまうと表示されるまでに時間がかかる可能性があります。

CSSのメリット

1. デザインの柔軟性
場所やサイズだけではなく、繰り返し設定があったり、<img>タグとして画像を入れたときに比べ、位置やサイズの調整に必要なコードを気持ち少なくすることができます。

2. 修正が簡単
CSS内で画像の指定からサイズなどの調整が完結しているため、修正が必要になったときに該当するCSSを確認し修正するのが簡単です！

CSSのデメリット

1. SEOに不利
HTMLのメリットで触れた、titleやalt属性を指定することができません。そのため必然的にSEOに不利になります。

2. 表示されるまでに時間が必要な場合がある
<img>と異なり、背景は後から読み込まれる要素になるため、他の優先的に表示される要素が多い場合、表示されるまでに時間が必要な場合があります。

使い分けとサンプルコード

以下の通り用途に合わせて使用するのがおすすめです！
HTMLとCSS、それぞれのサンプルコードを用意しましたのでぜひご覧ください！

コンテンツとして重要な画像→HTML
装飾目的の背景画像→CSS
SEOやアクセシビリティが重要→HTML
デザインの柔軟性が必要→CSS

HTMLで表示

CSSで表示