サキ今回はimgタグについて解説していきます。
よく使用するタグだからことしっかり理解したいですね。
imgタグとは
HTMLのimgタグはページに画像を表示するためのタグです。
この記事では基本的な使い方と、最新の記述方法やベストプラクティスについて解説していきます。
imgタグの基本的な使用方法
imgタグはsrc属性に画像のURLを指定します。
alt属性には画像についての説明を記載しておきます。
このalt属性は通常は表示されませんが、画像がリンク切れや通信エラーなどで表示されなかった場合に代替テキストとして表示されます。
<img src="image.jpg" alt="画像の説明">src属性について
src属性で指定できるものは絶対パス、相対パス、ルート相対パスなどが使用できます。
絶対パス
絶対パスはプロトコル（http, https）から始まり、完全なアドレスを指定します。
このパスはインターネット上の任意の場所にある画像を指すことができ、異なるウェブサイト間でリソースを共有する際に使用されます。
<img src="https://example.com/images/photo.jpg" alt="画像の説明">相対パス
相対パスは、現在のファイルの位置に基づいて画像の場所を指定します。
この指定形式は現在のファイルと画像との位置関係が変わらなければ、別の環境へ移行しても使用できます。
同じディレクトリに画像がある場合
そのまま画像ファイル名を指定します。
<img src="photo.jpg" alt="画像の説明">一つ下のディレクトリに画像がある場合
ディレクトリ名を指定してから、画像ファイル名を指定します。
<img src="images/photo.jpg" alt="画像の説明">一つ上のディレクトリに画像がある場合
../で上の階層を指定してから、画像ファイル名を指定します。
<img src="../photo.jpg" alt="画像の説明">一つ上のディレクトリにある別ディレクトリに画像がある場合
../で上の階層を指定してから、ディレクトリ名を指定して、画像ファイル名を指定します。
<img src="../images/photo.jpg" alt="画像の説明">ルート相対パス
ルート相対パスは、ウェブサイトのルートディレクトリ（ドメインレベル）からの絶対パスですが、プロトコルやドメイン名は含まれません。
この方式を使うと、サイト内の任意の場所から同じパスでリソースにアクセスできるため、別ドメインへの引越しなどにも対応できます。
<img src="/images/photo.jpg" alt="画像の説明">alt属性について
alt属性についてもう少し詳しく説明していきます。
alt属性を指定する理由
画像が表示されない際の代替テキストと説明しましたが、主に以下のようなことについて有用な可能性があるため、必ずimgタグには指定をしましょう。
アクセシビリティ
アクセシビリティはさまざまなユーザーにとってアクセスしやすく、理解しやすい設計や考え方を指します。
目の悪い人がスクリーンリーダーを使用した際に音声で読み上げる際に使用されるため、alt属性を入れておくとアクセシビリティの面で有効です。
SEO
SEO（Search Engine Optimization）は検索エンジン最適化のことで、SEO対策と言ったりしますが、要するに検索順位を上げるための施策を指します。
代替テキストを入れておくことで検索エンジンが画像の内容を理解しやすくなります。
そのためSEOで効果も出やすくなります。
CPC
CPC（Cost Per Click）は広告を見たユーザーの1クリックあたりの単価になります。
Google広告はLP（ランディングページ）に品質スコアというものを定義しており、アクセシビリティやエンゲージメント率の向上がCPCを間接的に下げてくれる可能性があります。
画像コーディングのLPだから見れればいいや！と言うわけではないので注意です！
altを指定しないケース
ここまでalt属性を記述した方が良いという話をしてきましたが、実はしなくていいケースが存在します。
正確にはalt属性の値を指定しなくていいケースです。
例えばその画像自体があまり意味をなさない画像だったり、テキストの補足としてのアイコンだったりした場合です。
alt属性は読ませなくて良いような場合はaltの値を空にします。
<img src="icon.svg" alt="">なぜ属性自体を消さずに空の値を入れておくかについてですが、これは読まなくていいということを明示的に表すためです。
例えば先ほどの例で言うとスクリーンリーダーで読ませる場合に、上記の空altの場合は読み上げずにスルーします。
しかし、alt自体がない場合はイレギュラーな読み方をしてしまう場合があり、画像のファイル名などを読み上げてしまいます。
これでは、聞いている人はどう受け取っていいか分からないですよね？そのため、読まなくていいということを指定する必要があります。
alt属性は必ず指定しましょう！
その他の属性について
最低限必要な属性はここまでで紹介した通りですが、より良く設定するべき設定値について説明していきます。
width属性・height属性
こちらは画像のサイズを指定する属性です。
width属性は画像の横幅、height属性は画像の高さを単位なしで指定します。
<img src="photo.jpg" alt="画像の説明" width="200" height="200">こちらは指定することで事前に画像を入れ込む枠を作っておき、レイアウトシフトを防ぐものになります。
レイアウトシフトとは、画像が読み込まれることによってガタガタと高さが変わる現象です。
レスポンシブデザインが流行り出すと可変になるため、意味がないと考えるかもしれませんが元サイズを指定しておくとアスペクト比を認識してくれるため、指定すること自体に意味はあります。
その場合はCSS側でheghtをautoにするなど上書きが必要になる場合がありますので、制作コストなどと合わせて検討してみてください。
また、CSSにaspect-ratioプロパティがありアスペクト比を指定できますが、CSS外部ファイルに記述することによりレイアウトシフト対策として難しいと考えます。
こちらもインラインスタイルであれば即時適用されるかもしれませんが、ブラウザ対応状況など考えると採用するならwidth・height属性ではないでしょうか。
title属性
こちらの属性は画像にマウスオーバーした際に追加情報として表示されるテキストを表示します。
この属性は他のタグにも存在する汎用的な属性でalt属性と被るため、サイトの仕様上必要となる場合以外は特別指定しなくても良いと考えます。
<img src="photo.jpg" alt="画像の説明" title="追加情報です">loading属性
loading属性は読み込みタイミングを制御する属性です。
こちらの属性は3つほど値として指定できるものがあり、デフォルトはeagerとなります。
この値は即時読み込みとなります。
では、どのようにこの属性を使用するかと言うとlazyという値を使用していきます。
<img src="photo.jpg" alt="画像の説明" loading="lazy">このように指定すると遅延読み込み（Lazy Loading）となります。
これは画像が表示領域（ビューポート）に近づくと読み込みを行う設定となり、初期読み込みが高速になります。
そのため、ファーストビューだけでも早めに表示して体感速度を上げたいという場合に最適です。
また、読み込まれていない場合は通信量の節約にも貢献するため非常に有用です。
良いことづくめな気がしますが、以下の点は注意してください。
ファーストビューの画像にはloding=”lazy”は指定しないこと。
処理は非同期で行われるため、ファーストビューで指定してしまうと処理が遅くなる場合が考えられる。
lazyを指定すると後読み込みとなるため、高速なスクロールに対応できないことがあります。
また、高さを測定するような処理がうまくいかない場合があります。
最もよくある例としてスムーススクロールでのページ内リンクがズレることがありますので、ご認識いただいた上での使用してください。
decoding属性
こちらは表示に関する指定をする属性になります。
デフォルトの値はautoとなっており、sync（同期）async（非同期）などを指定できます。
こちらはloading属性同様にスクロール後の画像はasyncにするといいと言われていますが、基本的にはautoで指定で問題ないと判断しています。
理由としてはautoであればブラウザに最適な方法で判断してくれるという指定になるため、かなり詳しい方でなければ特に指定なしで良いのではないでしょうか。
他タグを用いた実用的な実装
レスポンシブ対応
画像をレスポンシブ対応させる場合は以下のようにします。
レスポンシブ指定の仕方は様々ですが、今回はブレイクポイントに合わせて切り替える方法について説明します。
<picture>
<source media="(max-width: 768px)" srcset="photo-sp.jpg">
<img src="photo-pc.jpg" alt="画像の説明">
</picture>上記の場合は通常はphoto-pc.jpgを使用します。
ただし、sourceタグにあるmedia属性の条件（今回で言うと769px以下）はphoto-sp.jpgを使用してください。という指定になります。
ちなみによく見るレスポンシブの切り替え方法として以下のようなものがありますが、こちらの指定方法はCSSで非表示にしているだけなので必要のない画像の読み込みを行なってしまうことになり、ページの読み込みが遅くなるので、ブレイクポイントで切り替える場合はsourceタグなどで切り替えるようにしましょう。
<img class="pc-only" src="photo-pc.jpg" alt="画像の説明">
<img class="sp-only" src="photo-sp.jpg" alt="画像の説明">キャプション対応
画像にキャプション（タイトルや説明文）をつけたい場合は、altとは別に指定します。
alt属性はあくまで代替テキストで画像を説明するものであり、そもそも最初から表示したい場合のテキストはfigureタグとfigcaptionタグを使用して指定します。
<figure>
<img src="photo.jpg">
<figcaption>キャプションを指定します。</figcaption>
</figure>上記のようにfigureタグで全体を囲ってグループ化します。
その中でfigcaptionタグに画像のキャプションを指定することで認識させることが可能となります。
最後に
今回はimgタグについて解説しました。
私自身もまだまだ知らないことが多く、imgタグ一つの使い方だけでも奥が深いです。
特に他のタグに比べると画像という最もページで使われている容量の多い部分となるため、重要なタグになります。
適切な指定を行い、ユーザビリティやアクセシビリティを上げていきましょう！
