実行できるHTMLドキュメント: HTML 画像

Q: HTML で画像を表示するには？

タグを使い、src にファイルを、alt に説明を書きます: 。 に終了タグはありません。

Q: HTML で画像のサイズを変えるには？

width と height 属性をピクセルで指定するか、img { width: 300px; height: auto; } のように CSS を使います。片方だけを指定してもう片方を auto にすると、縦横比が保たれます。

Q: HTML で画像が表示されないのはなぜですか？

たいていは src のパスが間違っています。パスは HTML ファイルからの相対位置で、多くのサーバーではファイル名の大文字と小文字が区別されます。また C:\photos\cat.jpg のようなパスは自分のパソコンにしか存在しません。画像の URL をブラウザで直接開いて確認しましょう。

Q: HTML の alt 属性とは何ですか？

alt 属性は画像の代わりになるテキストです。スクリーンリーダーが読み上げ、画像を読み込めないときはブラウザが表示します。画像に写っているものや画像の役割を説明し、純粋な装飾の画像には alt="" を使います。

Q: 画像をレスポンシブにするには？

CSS で max-width: 100%; height: auto; を指定します。画像は狭いコンテナに合わせて縮み、本来の幅より大きくなることはありません。

HTML で画像を表示する方法

<img> 要素を使います。src は画像ファイル、alt はその説明、width と height はピクセル単位のサイズです。<img> は空要素で、終了タグはありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

この例の src は、オフラインでも動くように URL の中に書いた小さな SVG (データ URI) です。実際のサイトでは src にファイルへのパスを書きます。

`src`	読み込むもの
`photo.jpg`	HTML ファイルと同じフォルダにある `photo.jpg`
`images/photo.jpg`	HTML ファイルの隣にある `images` フォルダから
`../photo.jpg`	1 つ上のフォルダから
`/images/photo.jpg`	サイトのルートにある `images` フォルダから
`https://example.com/photo.jpg`	別のサイトから (移動や削除のおそれがある)

多くの Web サーバーではパスの大文字と小文字が区別されます。Photo.JPG と photo.jpg は別のファイルです。

alt 属性のテキスト

alt のテキストは画像の代わりになります。スクリーンリーダーが読み上げ、画像を読み込めないときはブラウザが表示します。次の 2 つの画像は、どちらも存在しないファイルを指しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

1 つ目は画像があるべき場所に alt のテキスト「Coddy logo」を表示します。2 つ目は alt が空なので表示するテキストがなく、スクリーンリーダーも読み飛ばします。alt の書き方は次のとおりです。

文脈の中で重要なことを説明する。「棒グラフ: 3 月から 6 月で売上が倍増」は「グラフ」よりずっと多くを伝えます。
「〇〇の画像」で始めない。 スクリーンリーダーはすでに画像だと読み上げています。
装飾には alt="" を使う (区切り線や背景の飾りなど)。スクリーンリーダーが読み飛ばします。
alt を省略しない。 ないと、スクリーンリーダーによっては「IMG アンダースコア 4032 ドット jpg」のようにファイル名を読み上げます。
リンクの中の画像には、リンク先を説明する: <a href="/"><img src="logo.svg" alt="Home"></a>。

画像のサイズを指定する

width と height 属性の値は単位なしのピクセルです。CSS のサイズはこれより優先されます。画像で最も役に立つ CSS は次の組み合わせで、コンテナに合わせて縮みつつ、本来の幅より大きく伸びることはありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

1 つ目の画像は 300 ピクセルのままで、180 ピクセルの箱からはみ出します。2 つ目は 3:2 の形を保ったまま 180 × 120 に縮みます。height: auto が重要です。これがないと height="200" 属性のせいで画像の高さが 200 ピクセルのままになり、つぶれてしまいます。

レスポンシブ画像でも、HTML には必ず width と height を書きましょう。ブラウザはファイルが届く前にその値で必要な場所を確保するので、画像が読み込まれたときに下のテキストがずれません。

object-fit で切り抜く

形の違う箱を画像で埋めなければならないとき (横長の写真から正方形のアバターを作る、高さのそろったカードを作るなど)、はみ出す部分の扱いは object-fit で決まります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

元の画像は円を描いた 2:1 の画像で、正方形の箱に表示しています。

fill (初期値) は画像を箱に合わせて引き伸ばすので、円が楕円になります。
contain は画像全体を箱の中に収め、空いた帯が残ります。
cover は箱を埋めてはみ出した部分を切り抜くので、円は丸いままです。サムネイルやアバターにはこれを使うのが一般的です。

object-position は、切り抜くときにどの部分を残すかを決めます。たとえば人物の写真なら object-position: top です。

figure と figcaption でキャプションを付ける

画像に属するキャプションは <figcaption> に書き、両方を <figure> に入れます。スクリーンリーダーにとって 2 つが結び付き、figure を 1 つのまとまりとしてスタイルを付けることもできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

キャプションは alt の代わりにはなりません。alt は画像に何が写っているかを伝え、キャプションは目で見る読み手にも必要な情報を加えます。

画像の下の隙間

画像は文字と同じようにテキストのベースラインに乗るので、コンテナは g や y などの文字の下に伸びる部分のための余白を画像の下に残します。枠線を付けると隙間が見えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

1 つ目の枠線では、青い画像の下に白い帯があります。画像に display: block を指定すると (2 つ目の箱) 消えます。画像をインラインのままにしたいなら vertical-align: middle でも消えます。

遅延読み込みとレスポンシブな画像の指定

長いページの下のほうにある画像は、loading="lazy" を付けると、読み手がその近くまでスクロールするまでダウンロードを遅らせます。

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

ページ上部のメインの画像は遅延読み込みにしてはいけません。読み手が最初に見る部分の表示が遅れます。

小さな画面に小さなファイルを送るには、srcset に複数のサイズを並べ、sizes で画像が表示される幅をブラウザに伝えます。ファイルはブラウザが選びます。

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> を使うとさらに異なる形式も提供でき、<img> は alt も持つ代替として使われます。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

画像の形式

形式	適した用途
JPEG	写真
PNG	スクリーンショット、くっきりした輪郭や透過が必要な画像
WebP	写真や図。JPEG や PNG より小さく、透過にも対応
AVIF	写真。たいてい WebP より小さい
SVG	ロゴ、アイコン、図。どんなサイズにしてもぼやけない
GIF	短いアニメーション。ただし音声なしでループする `<video>` のほうがずっと小さい

よくある間違い

自分のパソコンのパスを使う。 src="C:\Users\me\photo.jpg" のようなパスは自分のマシンでしか動きません。ファイルを HTML の隣に置き、相対パスを使いましょう。
alt がない。 すべての <img> に必要です。装飾なら空にします。
CSS で width と height の両方を別の形の値にする。 画像が引き伸ばされます。片方だけ指定してもう片方を auto にするか、object-fit を使いましょう。
width と height 属性がない。 画像の読み込みに合わせてページがずれます。
巨大なファイルを CSS で縮小する。 400 ピクセルで表示する 4000 ピクセルの写真も、全体がダウンロードされます。サイズを変えるか、srcset を使いましょう。
終了タグ </img> を書く。 <img> は空要素で、閉じるものはありません。

上の例の画像はすべて小さなインライン SVG です。自分の写真で同じコードを試すには、HTML プレイグラウンドに貼り付けてください。

よくある質問

HTML で画像を表示するには？

<img> タグを使い、src にファイルを、alt に説明を書きます: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">。<img> に終了タグはありません。

HTML で画像のサイズを変えるには？

width と height 属性をピクセルで指定するか、img { width: 300px; height: auto; } のように CSS を使います。片方だけを指定してもう片方を auto にすると、縦横比が保たれます。

HTML で画像が表示されないのはなぜですか？

たいていは src のパスが間違っています。パスは HTML ファイルからの相対位置で、多くのサーバーではファイル名の大文字と小文字が区別されます。また C:\photos\cat.jpg のようなパスは自分のパソコンにしか存在しません。画像の URL をブラウザで直接開いて確認しましょう。

HTML の alt 属性とは何ですか？

alt 属性は画像の代わりになるテキストです。スクリーンリーダーが読み上げ、画像を読み込めないときはブラウザが表示します。画像に写っているものや画像の役割を説明し、純粋な装飾の画像には alt="" を使います。

画像をレスポンシブにするには？

CSS で max-width: 100%; height: auto; を指定します。画像は狭いコンテナに合わせて縮み、本来の幅より大きくなることはありません。

画像の下に隙間ができるのはなぜですか？

画像は初期状態でインライン要素で、テキストのベースラインに乗るので、その下に文字の下に伸びる部分のための余白が残ります。画像に display: block か vertical-align: middle を指定すると隙間が消えます。