すっかり秋も深まってきましたね。最近仕事が忙しかったりマシンの不調があったりしてこちらの記事の更新が滞っておりましたが、久しぶりにコーディングの小ネタを。
「MENTA」にて「これから始めるWeb制作！HTML/CSSの基礎からWordPressまで」と銘打ってメンターをしているのですが（2018年10月現在は多忙につき新規受付を休止中。再開時にはまたお知らせします）、以前Skypeにてメンティーさんのサポート中にご質問がありました。今回はその回答を記事に書き起こしてみます。
メンティーさん：「imgタグと背景画像（background:urlで表示するやつ）の使い分けはどうされていますか？」
いわく、
・重要な画像はimgタグ
・重要でないのは背景画像
このように使い分けているそうですが、この認識で合っているかどうかということでした。
重要な画像とそうでない画像。そもそも、何を以って重要と判断するのかは個人差があってなかなか難しそうですね。
何か共通の認識が必要となりそうです。
一体どんな画像が重要であるかの判断基準をまずは考えてみましょう。
例えば、ポートフォリオサイトの本人プロフィール画像やECサイトの商品画像。これはサイト運営側が閲覧者に紹介したいと考え、また閲覧者も詳しく知りたいと気になる部分なので重要ということができそうです。
それでは、商品を使っている家族の笑顔の写真となるとどうでしょうか？
文脈上絶対必要ではないけれども、商品を使っているイメージを膨らませるものとして、参考にはなりますよね。
こういった画像はimg要素としてfigure要素の中に入れておくことが可能になります。
特に文脈を必要としない画像であれば、altの中を空っぽにしていても良いです。（アクセシビリティを考慮すると、対して文脈上必要でもない画像のaltになんでもかんでもテキストを仕込んでしまうと、スクリーンリーダーを利用しているユーザーにはうっとおしく感じるものになってしまいます。）
テキストが画像の上にかぶさって載っている場合は、画像を基本的に背景画像としてCSSで配置します。
ところで、画像とテキストが完全に切り離されて並んでいるようなレイアウトの場合、画像をimgにするべきでしょうか、それとも背景画像として置いたほうが良いでしょうか。
この判断基準として私なりの答えですが、img要素として置いた場合はGoogleの画像検索に引っかかるのに対し、背景画像の場合はそうではないため、ページ内の画像を検索結果に表示させたいような場合はimg要素として置き、そうでない場合は背景として表示させます。
例えば、スイス旅行を紹介するサイトの中でスイス料理の画像が参考画像として配置されていれば、Googleの画像検索の結果から興味を持った人がページを訪問する人がいるかもしれません。
しかし明度・彩度などが落ちていたり、ぼやけていたりするような画像は、検索結果に出たとしてもそんなに魅力がありませんよね。そういうときは背景としてCSSで書きます。
コーディングする人の考え方によっては違うという人もいるかもしれませんが、SEOやアクセシビリティを考える上で必要かそうでないかというのは比較的わかりやすい指標にはなるかと思います。
あと、背景画像（background-image）はあくまでCSSつまり装飾ということになりますから、「これはただの装飾！」と思ったら背景画像で良いですし、装飾以上の意味があるならimg要素ということになります。
「SEO・アクセシビリティを考慮した上で必要となる」イコール「装飾以上の意味を持つ」という場合に私はimg要素として画像を配置するようにしています。どなたかのご参考になれば幸いです。