【2023年最新版】imgタグとは何か＋正しい指定方法を徹底解説【コピペ可】

こんにちは。サイト制作において、使わないことはほぼないであろうimgタグ。近年はHTMLの発展によって実は記述すべき属性がいくつかあります。

具体的な記述と、それぞれが何のためのものでどんな効果があるかを解説していきます。

2023/10/15 追記

imgタグのサイズについて徹底解説しました。これを読めば、いつでも画像を思い通りのサイズに指定できます。

結論
概要
詳細解説
まとめ

結論

理屈はさておき、とにかくこれを書いておけば良いです。

<img
  width="1600" 
  height="900" 
  loading="lazy"
  decoding="async"
  src="path/to/image"
  alt="代替の文章"
/>

<!-- 
  widthにはデザイン上の横幅、もしくは実際の画像の横幅を指定する
  heightにはデザイン上の縦幅、もしくは実際の画像の縦幅を指定する
-->

※loading=”lazy”だけは場合によって記述しない方が良い場合があります（後述）。

概要

それぞれの属性についてざっくりまとめます。どの属性も概ねUI/UXの向上（例：読み込み速度を上げる）やアクセシビリティ（例：読み上げツール対応）など、ユーザビリティを高めるために記述します。

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

src: 画像のURLを指定します。当然この属性がないと何の画像も表示されませんね。
alt: 何らかの理由で画像が表示できない場合や、スクリーンリーダーなどのアクセシビリティツールを使用しているユーザーに対して代わりのテキストを提供します。
width と height: 画像サイズを定義します。最終的に表示されるサイズはCSSで指定したものになります。しかしこれらを指定すると、ブラウザは画像がロードされる前に適切なスペースを確保しレイアウトのシフト（詳細は後述）を防ぐことができます。
loading: 画像のロード方法を制御します。”lazy”を指定すると画像の近くまでスクロールされるまで読み込まれません。特に規模が大きなWebページで有用で、ユーザーがページのすべてを見る前に不必要なデータをダウンロードするのを防ぐことで初期読み込みを高速にしたり、通信量を削減できます。
decoding: 画像のデコードをどのように処理するかを指定します。”async”を指定するとデコードは非同期的に行われ、主要なレンダリングのブロック（詳細は後述）を減らすことができます。

こういった視点は「Core Web Vitals」というGoogleが定義したWebページのユーザ体験を測定するための一連の指標に基づいています。

Web Vitals | Articles | web.dev

Essential metrics for a healthy site

画像の読み込み方を工夫してページの読み込み速度をあげる方法については次の記事も合わせてご覧ください。

詳細解説

srcは説明するほどでもないので割愛します。

alt

alt属性は「画像が何を表しているか」をテキスト形式で説明するためのものです。

主に以下の3点の効果があります。

画像が表示されなかった場合に代わりに表示させる。
視覚障害があるなどの理由でスクリーンリーダーを使用している場合、このalt属性の文言が読み上げられる。スクリーンリーダーはWebページの内容を音声で読み上げるツール。
SEO効果

このように、まずは画像が何らかの理由で閲覧できない場合の代替としての役割を持つわけですね。

文章やコンテンツにおいて、「その画像が見れないと意味が通りにくくなってしまう」ような場合は特にalt属性の文章が重要です。例えば記事コンテンツに参考画像をおいていた場合、それがないと前後の文章がわかりにくくなってしまいます。

またSEO上の効果もあります。Googleのクローラーは基本的にテキストデータしか解釈できず、画像の中身をそのまま理解することができません。よってalt属性でその画像の説明を加えてあげることでクローラーにそのコンテンツがより適切に伝わります。

さらに詳しくはこちら（https://itokoba.com/archives/7017）をご覧ください。

width と height

width属性は画像の幅を、height属性は画像の高さを指定します。実際の画像あるいはデザインファイル上の画像の横幅と縦幅の値、もしくはその比率を指定します。

例：画像が800x450の場合
以下のどの指定でも良い。

<img
  width="800" 
  height="450"
/>

<img
  width="80" 
  height="45"
/>

<img
  width="16" 
  height="9"
/>

この属性の値はピクセルで指定することができます。値は単位のない整数でなければなりません。

例えば、width="500"は画像の幅を500ピクセルに設定します。heightも同様です。

この属性は何のために使われるかというと、「レイアウトシフト」を防ぐためにあります。まずは次のgifを見てみましょう。デモページ（https://itokoba.com/demos/image-attribute-sample/）で実際に試していただくこともできます。

ページ読み込みにおける、width属性とheight属性を指定した場合とそうでない場合の比較例

左がwidth/height属性を指定した場合、右が指定しない場合です。このように、右はページ読み込み時に文字の部分が一瞬動いてしまっています。これが「レイアウトシフト」と呼ばれる現象で、Webページがロードされる間に視覚的な要素が予期せずに動く現象を指します。

ユーザーがページを読んでいる時やボタンをクリックしようとしている時に、突然ページ上の要素が移動したりサイズが変わったりするとユーザーにとっては迷惑ですよね。皆さんもページを読み込んで2秒後くらいに広告が読み込まれて文章やボタンがボコッと動いてイライラした経験があるのではないでしょうか。

widthとheight属性を指定すると、画像が読み込まれる前段階で画像のサイズ分のエリアを確保するようになります。先ほどのgifの左の例のように、すでにスペースが確保されていてそこに画像が収まるような挙動になります。

細かい話ですが、これでUXを大きく改善できますね。

さらに詳しくはこちら（https://itokoba.com/archives/7047）をご覧ください。

loading

いわゆる非同期読み込みを指定することができる属性です。これの値を”lazy”に指定すると、近くまでスクロールされるまで画像が読み込まれません。その結果、以下2つの利点があります。

ページの初回読み込み時間を短縮する
データ通信量を削減する

まずは遅延読み込みの仕組みについて確認しましょう。画像の遅延読み込みまでは、下記の流れで処理が行われます。

「ブラウザが画像の位置を把握する → 画像の近くまでスクロールされる → そのタイミングで初めて読み込みを開始する」

こうすることで初期の読み込みにおいて余計なファイルをダウンロードせず、その分画像以外の読み込みが速くなります。

大抵は指定しておけば問題ないのですが、ファーストビューやページ前半の画像である場合は指定しない方が良いです。明らかに最初から読み込んでおくべきなのに、lazyを指定すると上記の「ブラウザが画像の位置を把する」という手順を不必要に挟んでしまい表示が遅れるからです。

googleのガイドラインにもその旨が表記されています。

Browser-level image lazy loading for the web | Articles | web.dev

This post covers the loading attribute and how it can be used to control the loading of images.

というわけで、ページ前半で表示される画像以外に指定しましょう。明示的に遅延読み込みをさせないようにするにはloading=”eager”を指定すればOKです。

また、近くまでスクロールされなかった画像は読み込まれませんからその分の通信量が削減されます。特にスマホユーザーにとっては通信量の節約になりますから嬉しいポイントですね。

さらに詳しくはこちら（https://itokoba.com/archives/7114）をご覧ください。

decoding

画像のデコード方法を制御する属性です。この属性は以下の3つの値を取ることができます。

async: 画像のデコードを非同期に行うように指示します。これはページのレンダリングをブロックするのを防ぎ、ページの読み込み速度を向上させることができます。
sync: 画像のデコードを同期的に行うように指示します。画像がすぐに表示されることを保証しますが、大きな画像をデコードするとページのレンダリングがブロックされる可能性があります。
auto: ブラウザにデコード方法を自動的に決定するように指示します。ページの他の要素や画像のサイズや種類などの要素に基づいて最適なデコード戦略を選択します。

さて、非常にややこしくなってきましたね。笑

まず「レンダリングをブロックする」とは何なのか説明します。

「レンダリングをブロックする」とは

その文言の通り、レンダリング（＝画面への描画）を止めてしまうことを言います。代表的なのは、画像、CSS、JavaScriptなどの外部リソースを読み込む時に発生することでしょう。例えば以下のようなHTMLがあったとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./resources/styles/style.css" /> 
  </head>
  <body>
    <!-- 省略 -->
  </body>
</html>

7行目でlinkタグを使ってCSSファイルを読み込んでいます。この時、CSSファイルの読み込みが完了するまでHTMLの次の行以降が一切読み込まれません。もしCSSファイルの容量が大きいと、しばらくの間画面には何も表示されなくなります。これがレンダリングをブロックするということです。

そして、画像のデコードという行為はこれと同様に完了するまで他の要素の表示を止めてしまうのです。

画像のデコードとは

画像は通常、JPEGやPNGなどの形式でエンコードされた上で通信されます。ブラウザがこれらのデータを受け取ったとき、実はそのまま表示させているのではありません。画面の表示に適したビットマップ形式という別の形式にデコード（つまり、エンコードを解除して画像を再構成）する必要があります。このデコード処理は画像のサイズや複雑さによっては時間がかかる可能性があります。

そしてこのデコード処理は、完了するまでブラウザの他のレンダリングを停止させます。

ここでdecoding属性が登場します。decoding=”async”を指定するとブラウザはレンダリング操作を停止せずデコードを並列的に行うことができます。非同期に処理をするとも言います。これによりページの読み込み速度が速くなります。

デコード処理についての参考はこちらです。