HTML・CSSで画像を表示する方法｜imgタグ・背景画像・レスポンシブ対応を解説

HTML・CSSで画像を表示したいけれど、「imgタグと背景画像はどう使い分ける？」「スマートフォンで画像がはみ出すのはなぜ？」と迷っていませんか。

記事写真や商品画像など、内容として意味がある画像はHTMLのimg要素で配置します。模様や背景のような装飾画像は、CSSのbackground-imageが適しています。

この記事では、画像ファイルの準備、HTMLでの貼り方、パスと代替テキスト、CSSでのサイズ調整、object-fit、背景画像、レスポンシブ画像、表示速度への配慮まで初心者向けに解説します。

HTMLの画像とCSSの背景画像を使い分ける

CSS背景画像は支援技術へ特別な情報を伝えません。画像がなくなると記事の意味が分からなくなる場合は、背景画像ではなくimg要素を使い、適切な代替テキストを設定してください。

HTMLで画像を表示する基本の書き方

HTMLではimg要素を使います。画像ファイルの場所をsrc属性、画像の意味をalt属性へ書きます。

<img
  src="images/mountain-lake.jpg"
  alt="山に囲まれた湖と青空"
  width="1200"
  height="800"
>

img要素は終了タグを持たない空要素です。現代のHTMLでは末尾の/は不要ですが、既存コードに/>と書かれていても画像は表示されます。

widthとheightには、画像ファイル本来のピクセル寸法を指定します。CSSで表示幅を変更しても、ブラウザが読み込み前に縦横比の領域を確保できるため、画像表示時のレイアウト移動を抑えられます。

画像ファイルとHTMLを同じフォルダーに置く

最初は、HTMLと画像の位置関係が分かるようにフォルダーを整理します。

sample-site/
├── index.html
├── style.css
└── images/
    └── mountain-lake.jpg

index.htmlから見ると、画像はimagesフォルダーの中にあります。そのためsrc="images/mountain-lake.jpg"と書きます。

ファイル名は半角英数字とハイフンを使い、大文字と小文字も一致させてください。photo.JPGとphoto.jpgを別ファイルとして扱うサーバーもあります。

画像パスの書き方

画像が表示されない原因として多いのが、src属性のパス間違いです。現在のHTMLファイルを基準に、画像までの道順を書きます。

自分のサイト内では相対パスを使うと、ドメインや作業場所が変わっても同じフォルダー構成を保ちやすくなります。他サイトの画像URLを直接指定すると、削除・変更・利用規約・著作権の問題があるため、許可を確認せずに使わないでください。

alt属性の書き方

alt属性は、画像を見られない読者にも内容を伝え、画像が読み込めない場合にも表示されます。ファイル名ではなく、その文脈で画像が伝えている内容を書いてください。

「画像」「写真」と機械的に書く必要はありません。直前の文章と同じ説明を繰り返すのではなく、画像が追加している情報を簡潔に表します。

装飾画像には空のalt=""を設定します。alt属性自体を省略すると、支援技術がファイル名などを読み上げる場合があるため、空の場合も属性は残してください。

画像とキャプションをまとめる

画像へ説明文を付ける場合は、figure要素の中に画像とfigcaption要素を入れます。

<figure>
  <img
    src="images/card-layout.jpg"
    alt="3列のカードが並んだパソコン表示"
    width="1200"
    height="800"
  >
  <figcaption>パソコンではカードを3列で表示します。</figcaption>
</figure>

altは画像自体の代替、figcaptionは画像を見ている読者にも表示する補足です。役割が異なるため、同じ文章をそのまま重ねる必要はありません。

CSSで画像をレスポンシブにする

画像ファイル本来の幅が画面より大きいと、スマートフォンで横にはみ出します。次のCSSを基本にすると、親要素より大きい画像だけを縮小し、縦横比を保てます。

img {
  max-width: 100%;
  height: auto;
}

max-width: 100%は画像の最大幅を親要素の幅までに制限します。height: autoは、幅の変更に合わせて高さを自動計算し、画像が縦や横につぶれるのを防ぎます。

論理プロパティを使う場合は、max-inline-size: 100%とblock-size: autoでも同じ考え方を表せます。

画像サイズの指定方法をさらに詳しく確認したい場合は、次の記事も参考にしてください。

object-fitで同じ比率の枠へ画像を収める

カード一覧で画像の縦横比がバラバラなときは、画像の表示枠を決めてobject-fitを使います。

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

coverでは被写体が切れることがあります。object-position: 50% 30%のように表示位置を調整し、人物の顔や商品の重要部分が隠れていないか確認してください。

object-fitの値と動作は、MDNのobject-fitリファレンスでも確認できます。

CSSで背景画像を表示する

背景模様やヒーロー部分の装飾など、内容として読み上げる必要がない画像にはbackground-imageを使えます。

<section class="hero">
  <h1>山と湖を楽しむ旅</h1>
  <p>季節ごとの景色を紹介します。</p>
</section>

.hero {
  min-height: 420px;
  padding: 48px 24px;
  display: grid;
  place-items: center;
  color: #ffffff;
  text-align: center;
  background-color: #164e63;
  background-image:
    linear-gradient(rgb(15 23 42 / 55%), rgb(15 23 42 / 55%)),
    url("images/mountain-lake.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

背景画像の上へ文字を置く場合は、写真の明るさに左右されないよう、半透明のグラデーションを重ねてコントラストを確保します。画像が読み込めない場合に備えて、近い明るさのbackground-colorも指定してください。

srcsetとsizesで画面に合う画像を選ぶ

CSSで表示幅を縮めても、元画像が大きければダウンロード量は変わりません。複数サイズの画像を用意し、srcsetとsizesを使うと、ブラウザが画面幅や解像度に合うファイルを選べます。

<img
  src="images/mountain-lake-800.jpg"
  srcset="
    images/mountain-lake-480.jpg 480w,
    images/mountain-lake-800.jpg 800w,
    images/mountain-lake-1200.jpg 1200w
  "
  sizes="(max-width: 640px) calc(100vw - 32px), 800px"
  alt="山に囲まれた湖と青空"
  width="1200"
  height="800"
>

480wなどの数値は画像ファイル本来の幅です。sizesには、その条件で画像を何px相当の幅で表示する予定かを書きます。srcは対応しない環境の代替として残してください。

画像の内容や切り取り方自体を画面幅で変える場合は、picture要素を使います。

<picture>
  <source
    media="(max-width: 640px)"
    srcset="images/mountain-lake-portrait.jpg"
  >
  <img
    src="images/mountain-lake-wide.jpg"
    alt="山に囲まれた湖と青空"
    width="1200"
    height="800"
  >
</picture>

代替テキストはsourceではなく、最後のimg要素へ設定します。

画像の表示速度を改善する基本

• 表示サイズに対して極端に大きい画像を使わない
• widthとheightで縦横比を伝える
• ファーストビューより下の画像へloading="lazy"を使う
• 重要な先頭画像をむやみに遅延読み込みしない
• JPEG、WebP、AVIFなど内容に合う形式と圧縮率を選ぶ
• srcsetで必要以上に大きい画像の取得を避ける

画面をスクロールしないと見えない画像には、次のように遅延読み込みを指定できます。

<img
  src="images/gallery-01.jpg"
  alt="夕日に照らされた山の稜線"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

ページを開いて最初に見える大きな画像へloading="lazy"を付けると、表示が遅れる場合があります。遅延読み込みは画面外の画像を中心に使ってください。

レスポンシブ画像とwidth・heightの考え方は、web.devのImagesでも確認できます。

画像をリンクにする

a要素でimg要素を囲むと、画像全体をリンクにできます。代替テキストには、画像の見た目だけでなくリンク先の目的が伝わる表現を使います。

<a href="gallery.html">
  <img
    src="images/gallery-cover.jpg"
    alt="山と湖の写真ギャラリーを見る"
    width="800"
    height="600"
  >
</a>

リンクの直後に同じリンク文がある場合は、読み上げが重複しない構造も検討します。画像だけがリンクの役割を持つなら、リンク先が分かる代替テキストを省略しないでください。

画像が表示されないときの確認項目

1. HTMLと画像ファイルを保存したか確認する
2. srcのファイル名と拡張子を確認する
3. 大文字と小文字が一致しているか確認する
4. HTMLから画像までのフォルダー位置を確認する
5. ファイル名に全角空白や特殊文字がないか確認する
6. 開発者ツールのNetworkで404になっていないか確認する
7. CSSでdisplay: noneや幅0になっていないか確認する

画像の代わりに代替テキストが表示される場合は、img要素自体は読み込まれていますが、画像ファイルを取得できていません。最初にパスとファイル名を見直してください。

HTMLとCSSのファイル作成やパスの基本を復習したい場合は、次の記事も役立ちます。

HTML・CSSの画像に関するよくある質問

画像サイズはHTMLとCSSのどちらで指定しますか？

HTMLのwidthとheightには画像本来の寸法を書き、実際の表示幅やレイアウトはCSSで調整するのが基本です。HTMLの寸法は、読み込み前の縦横比をブラウザへ伝える役割もあります。

imgとbackground-imageはどちらがSEOに有利ですか？

優劣で選ぶのではなく役割で選びます。記事内容を伝える画像はimgと適切なalt、装飾画像はCSS背景にしてください。意味のある画像を背景にすると、支援技術へ内容を伝えられません。

画像を中央に配置するにはどうしますか？

画像をブロック要素として扱い、左右のmarginを自動にします。

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

WebPやAVIFを使うべきですか？

写真ではJPEGより小さくできる場合があるため有効です。ただし、画像ごとに見た目と容量を確認し、必要ならpicture要素で代替形式も用意します。形式だけでなく、表示寸法と圧縮設定も重要です。

画像の意味と表示方法を分けて考えよう

内容を伝える画像はHTMLのimg要素、装飾画像はCSSのbackground-imageを使います。imgには画像パス、文脈に合うalt、本来のwidthとheightを設定してください。

CSSでは画像を親要素より大きくしない設定を行い、同じ比率の枠へ収める場合はobject-fitを使います。最後にパソコンとスマートフォンの両方で、切り抜き位置、代替テキスト、読み込み時のレイアウトを確認しましょう。