img 要素についてまとめてみた【初心者向け】

img は image を表していて、画像を Web ページに載せるときに使う HTML 要素というのは、すでに皆様ご承知の事実だと存じますれば、めちゃくちゃたくさん使う HTML 要素のうちのひとつでございます。

そんな img 要素について初心に帰ってまとめてみました。

img 、src 、alt
3点セット！

img 要素は、div 要素や p 要素のような挟んで使う要素とは違い、閉じタグがありません。属性を追加して、初めて img 要素としての責務を全うすることができます。そして、必須で追加するのが、src 属性と alt 属性です。

<img src="画像のパス" alt="画像の代替説明">

ですので、
img 要素は、src 属性と alt 属性と3点セットで使う！と覚えちゃいましょう！

この3点セットで記述すれば、とりあえず画像は表示はされます！（もっと言ってしまえば alt 属性を入れ忘れても表示自体はされます。しかし、それはSEOの観点からもイマイチです。）

src 属性には、画像のパスを。

src 属性の属性値は、画像のパスです。

src="/images/red-flower.jpg"

こんな感じの記述です。

パスというのは、ファイルやフォルダの置いてある場所のことです。指定方法には、絶対パス、ルートパス、相対パスの3種類あります。詳しくは、下の参考記事をご覧ください。

また、
src は、source （ソース）の略だと思われます。意味は、「元、情報源」。ちなみにデミグラスソースのソースは sauce です。発音もサースって感じ？？

alt 属性には、“思いやり”を。

alt 属性は、画像が表示されない場合やスクリーンリーダーなどで内容を伝える際に、代わりとなる説明テキストを設定するための属性です。

とくに、スクリーンリーダーのような支援技術を意識して alt 属性を設定することで、アクセシビリティに優れたステキなコードになります！見なくても読み上げだけで Webページとして成り立つのが理想系だと思います。このように alt 属性を正しく設定することで、検索エンジンにも画像の内容が伝わりやすくなり、結果的に、SEO的にもグレートです！

alt="ここに代替説明を入れる"

MDNでは、
このalt 属性の記述も必須と記載されています。

ただし、W3C では、alt 属性自体がない場合の意味は「画像はコンテンツの重要な部分である可能性があって、それに相当するテキストがない。」という扱いみたいです。

If the src attribute is set and the alt attribute is not

The image might be a key part of the content, and there is no textual equivalent of the image available.

W3C

その具体例が一体何かはわかりませんでしたが、、現在の Web 業界では、alt 属性の記述も必須として覚えてしまって問題ないような気がします。

装飾目的の画像や、特に意味を伝える必要がない画像の場合は、alt="" という感じで空（から）に設定します。この設定を行うことで、スクリーンリーダーはその画像をスキップし、支援技術を使用するユーザーに不要な情報を伝えずに済むようになります。

実践的な、
パターンで考えてみましょう。

タイトルや見出しを画像にした場合

この場合は、alt 属性に“タイトルのテキスト”をしっかりと入れます。

写真をそのまま掲載した場合

その写真がメインのコンテンツであるのであれば、alt 属性に属性値を入れた方がよいかもしれません。ただし、その場合も工夫が必要です！

alt=”赤い花”、alt=”美しい薔薇が咲いていました。”みたいな書き方ができます。

実際のところ、何が正解なのかは明示されてはいませんが、私は後者の方が思いやりがある素敵な alt だなと思います。ただ、alt のテキストは、画像の内容とその文脈に合わせた情報を伝えることが大切です。例として、alt="庭に美しい薔薇が咲いていました。" は、画像の詳細と状況を説明しており、より豊かな情報を提供できますが、簡潔さもまた重要なので、必要以上に長い説明は避けましょう。

また、
〇〇の写真、〇〇の画像、みたいな書き方はあまり推奨されません。スクリーンリーダーが読み上げて自然な文章になるように alt を入れるとよいと思います。

テキストの補足としての画像である場合。

装飾や図などは、とくに alt 属性の属性値が空（から）である場合が多いかもしれません。むしろその方が良いかと思います。あくまで補足としての画像として文章をつくっていきたいものです。

img 要素のサイズの話

img 要素は、width 属性と height 属性で初期設定のサイズを決めます。

<img src="画像のパス" alt="画像の説明" width="300" height="200">

こんな感じで記述します。
※width 属性と height属性の属性値は単位のない整数でなければなりません。

width 属性と height 属性が無い場合は、画像ファイル自体のサイズが初期設定として取得されます。そして CSS でサイズが指定された場合は、サイズが上書きされます。

優先度で表すと、
CSS > width ＆ height 属性 > 元々の画像のサイズ
って感じですね！

個人的には、
widht ＆ height 属性は入れずに、CSS でサイズを決めるのが好きです。

その他の属性

img 要素に加える属性として、
src 属性と alt 属性、width ＆ height 属性以外で、W3C で紹介されていた属性は以下です。

・グローバル属性
・srcset
・sizes
・crossorigin
・usmap
・ismap
・referrerpolicy
・decoding
・fetchpriority

グローバル属性とは、すべての要素で共通で使える属性のことです。class 属性とか id 属性なども含まれています。他の属性は、それぞれなかなかレベルの高い属性なので説明は割愛します。初心者の内はほとんど使う機会もないと思うのでサラッと眺めてスルーしてしまっていいかと思います。

非推奨の属性

img 要素には、レイアウトや見た目、アクセシビリティや説明などを補うための属性がいくつか存在します。しかし、これらは CSS や JavaScript を使って実現する方が現在の標準的な方法です。

MDN では、
以下の属性は非推奨であると紹介されています。

・align 系の属性
top、middle、tottom、left、right など画像の整列を指定する属性です。

・border
画像に枠線をつける属性です。CSS の border プロパティで設定する方が適切です。

・hspace / vspace
画像の周囲に余白を設定する属性です。CSS の margin プロパティや padding プロパティを使いましょう。

・longdesc
画像の詳細な長い説明へのリンクを指定する属性です。代わりに a 要素や aria-describedby を使う方法が推奨されます。

・name
画像の識別子として使われていましたが、現在は id 属性を使う方が良いとされています。

align 系や boder はあまり知識がないと使っちゃいそうですね。基本的には CSS で対応できるものが多いですね！

NG なこと

・img 要素をレイアウトのために使ってはいけない。
例えば透明な画像などでマージンをつくったりするような行為です。いにしえの Web ならまだしも、いまどきこんな荒業をする人はなかなかいないような気がしますが、、、。

・alt 属性は title 属性のような使い方をしてはいけない。
alt 属性は、画像の代替説明として使うべきであり補足的な情報を伝える title 属性とは役割が異なります。

まとめ

img 要素は、src 属性と alt 属性をつけて記述します。基本形は<img src="" alt="">の３点セットで覚えておきましょう。src 属性には画像のパス、alt 属性には画像の画像の代替説明を入れます。その他属性も必要に応じて入れましょう！サイズに関しては、CSS で指定するのが個人的にはオススメ！

普段何気なく使う img 要素ですが、調べてみるとかなり細かい説明がありました。ぜひ一度、公式のW3C や MDN を覗いてみてください！

参考・出典

・W3C. 「4.8.3 The img element」. https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element, 2024年11月16日閲覧。

・MDN. 「<img>: 画像埋め込み要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/img, 2024年11月16日閲覧。

・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典. 「ファイルパス」. https://wa3.i-3-i.info/word18264.html, 2024年11月19日閲覧。

・weblio. 「sourceとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/source, 2024年11月19日閲覧。