目次
imgタグとは
imgタグは「image」の省略形で、HTMLにおいて画像を表示させるタグです。
imgタグを使用する場合、「src属性」と「alt属性」が必須項目となっています。
基本的な書き方
<img src="" alt="">imgタグのように終了タグが不要なものを、空要素や空タグと呼びます。
src属性とは
src属性は「source」の省略形で「情報源」や「参照元」という意味です。
src属性に入力する値には、現在作成しているファイルから表示させたい画像までのパスを指定する「相対パス」と、URLを指定する「絶対パス」があります。
alt属性とは
alt属性は「alternative text」の省略形で「代替えテキスト」という意味です。
どんな画像が表示されているのかを詳しく書く必要がありますが、無理にキーワードを詰め込んだりするとGoogle評価が下がる可能性があるため注意が必要です。
音声読み上げにも対応しているため、読み上げられた際に不自然にならないテキストを入力しましょう。
装飾で使用する場合は空のままでも良いですが、alt属性は必須項目のため、必ず「alt=""」を入力しておきましょう。
HTMLでは、画像はテキストと同じものとして考えるため、何かしらの要素（タグ）で囲むようにしましょう。
テキストとして認識させる場合
<p><img src="" alt=""></p>alt属性にテキストを入力した場合、ブラウザにもテキストとして認識されるため、用途に合わせて「h（見出し）タグ」や「pタグ」などで囲みましょう。
装飾として使用する場合
<figure><img src="" alt=""></figure>装飾として使用する場合は「figureタグ」や「divタグ」などで囲みましょう。
レイアウトシフト対策
<img src="" alt="" width="" height="">レイアウトシフト（海外ではJankと呼ばれる）とは、画面上に画像が読み込まれた際に、画像以下のテキストがズレて表示される現象です。
imgタグ内に横幅（width属性）と高さ（height属性）を入力することにより、ブラウザに縦横比を認識させ、ズレる現象を抑えることが出来ます。
ここで入力する数値は実際に表示するサイズではなく、画像本来のサイズを入力しましょう。
「width属性」と「height属性」に入力する数値の単位は、初期値で「px（ピクセル）」が指定されているため、単位を省略して数値のみを入力するのが一般的です。
注意点
HTMLで「width="200" height="200"」と入力し、cssで「width: 100%;」と入力した場合、横幅は100%になりますが、高さが200pxのままになるので画像が歪んでしまいます。
HTMLで横幅（width属性）と高さ（height属性）を入力する場合は、cssで「height: auto;」も忘れず入力しましょう。
参考サイト
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
デコード処理
<img src="" alt="" width="" height="" decoding="async">デコードとはブラウザが画像を読み込んで表示するまでの処理のことです。この処理が完了するまで、これ以降の読み込みがストップしてしまうため、ページ全体の読み込みが遅くなってしまいます。
何も指定していない場合は「auto」が設定されており、ブラウザの設定に従う状態になっていますが、ブラウザ側の基本設定は「sync」になっているため、他の読み込みを阻害してしまいます。
「async」を指定することにより、他の読み込みと同時に行うため、ページ全体の読み込み速度が向上します。
ローディング処理
<img src="" alt="" width="" height="" decoding="async" loading="lazy">ローディングとはブラウザが画像を読み込む処理のことです。
デコード処理同様、この処理が完了するまで、これ以降の読み込みがストップしてしまいます。
何も指定していない場合は「auto」が設定されており、ブラウザの設定に従うの状態になっていますが、ブラウザの基本設定は「eager」になっているため、ページ内全ての画像を読み込むまでページ全体の読み込みが完了しません。
「lazy」を指定することにより、画面が表示される寸前に読み込むようになるため、ページ全体の読み込み速度が向上します。
また、loading属性はimgタグだけでなく、iframeタグにも有効です。
注意点
ファーストビュー（最初に画面に表示される領域）」に「loading="lazy"」を設定してしまうと画像が遅れて表示されてしまうため、ファーストビュー内の画像には指定しないほうが良いでしょう。
全てのブラウザが対応しているわけではないので、注意が必要です。