ウサヲです。
画像の設定について、基本的な考え方を抑えておこうと思いました。

<img>を使うこと＝その画像が情報源としての意味合いをもつことができる

<img>にはalt属性をつけることができます。
alt属性ってやつは、”画像の代替テキスト”だということです。

代替テキスト・・それはつまり、
その画像を電話で相手に説明したらわかる、というようなテキスト、みたいな。
スクリーンリーダーで本文と一緒に読み上げられたら理解できる、みたいな。
点字に変換した時に、違和感なくその画像がテキスト情報として伝わる、みたいな。

つまり、サイトを構成するにあたり必要な要素だ！重要な情報源だ！ということです。

ロゴや写真、マップやグラフなど、その画像がサイトのコンテンツにとって意味のあるものの場合、しっかりとalt属性を設定してその画像を明示する必要がある、ということですね。いいな？ウサヲ。

background-imageを使う時

これはもう、”ザ・装飾”。

サイトの背景だったり、テキストの背景だったり、ボカしてみたり、飾って見たり、モッてみたり、ヌッてみたり…。
それ自体に情報はなく、本当、キラキラのヒラヒラなのだ、ということ。いいな？ウサヲ。

え？じゃ、alt=””って？

altが空っぽの場合もあるのです。例えば…

• 画像のすぐ横にその画像を示す内容のタイトル等があったりする場合、画像とタイトルの内容がかぶっちゃってスクリーンリーダーで読み上げられたら辛いとか。
• <figure>を使っていて、別のタグで<img>要素をしっかりと囲んで説明しちゃってる場合、alt属性があると説明がダブっちゃってうざいからこういう時は省略して良いわけで。
• 装飾の要素が強くて、別に紹介しなくても情報源といて影響ないような画像については、alt=””で良いわけです。サイト作ってるとそういうのもアルアルで。

でも、基本的には、<img>にはalt属性はあるべき！と信じていた方がいいことがある、ような気がする。

いいな？ウサヲ。