画像

img picture srcset

画像を埋め込むための要素。img はシンプルな画像埋め込み、picture はアートディレクションやフォーマット切り替え、srcset はレスポンシブ画像に使用する。

img 要素のデモ

img
160×100

width=160 height=100

avatar
80×80

円形アバター例

バナー画像 200×60

バナー例

src

画像のURL。必須属性。

alt

代替テキスト。アクセシビリティに必須。装飾画像は alt=""。

width / height

レイアウトシフト (CLS) 防止のため必ず指定する。

loading="lazy"

ビューポート外の画像を遅延読み込みする。

decoding="async"

デコードを非同期にしてメインスレッドをブロックしない。

fetchpriority="high"

LCP 画像の優先度を上げる。Chrome 101+。

<!-- 基本的な img -->
<img
  src="/images/photo.jpg"
  alt="山の風景"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

<!-- LCP 画像（ファーストビュー内）-->
<img
  src="/images/hero.jpg"
  alt="ヒーロー画像"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="async"
/>

<!-- 装飾画像（代替テキスト不要）-->
<img src="/images/divider.png" alt="" width="800" height="4" />

picture 要素（アートディレクション・フォーマット切り替え）

フォーマット切り替え（WebP → JPEG フォールバック）

WebP / JPEG
フォールバック

アートディレクション（モバイル別画像）

PC: 横長
SP: 正方形

<!-- フォーマット切り替え：WebP 非対応ブラウザは JPEG を使用 -->
<picture>
  <source type="image/webp" srcset="/images/photo.webp" />
  <source type="image/jpeg" srcset="/images/photo.jpg" />
  <img src="/images/photo.jpg" alt="風景写真" width="800" height="600" />
</picture>

<!-- アートディレクション：画面幅で別画像を切り替え -->
<picture>
  <source
    media="(max-width: 767px)"
    srcset="/images/photo-square.jpg"
    width="400"
    height="400"
  />
  <source
    media="(min-width: 768px)"
    srcset="/images/photo-wide.jpg"
    width="1200"
    height="600"
  />
  <img src="/images/photo-wide.jpg" alt="風景写真" width="1200" height="600" loading="lazy" />
</picture>

srcset と sizes（レスポンシブ画像）

ブラウザがデバイスの画面密度やビューポートサイズに応じて最適な画像を選択する仕組み。

1x (通常)

2x (Retina)

3x (高解像度)

<!-- 画面密度ベース（固定サイズ画像）-->
<img
  src="/images/logo.png"
  srcset="
    /images/logo.png    1x,
    /images/logo@2x.png 2x,
    /images/logo@3x.png 3x
  "
  alt="ロゴ"
  width="200"
  height="60"
/>

<!-- ビューポート幅ベース（レスポンシブレイアウト）-->
<img
  src="/images/photo-800.jpg"
  srcset="
    /images/photo-400.jpg  400w,
    /images/photo-800.jpg  800w,
    /images/photo-1200.jpg 1200w,
    /images/photo-1600.jpg 1600w
  "
  sizes="
    (max-width: 767px)  100vw,
    (max-width: 1199px) 50vw,
    800px
  "
  alt="風景写真"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

比較：img vs picture vs CSS background-image

方法	用途	アクセシビリティ	SEO	レスポンシブ
img	コンテンツ画像	alt 属性あり	インデックスされる	srcset / sizes
picture	アートディレクション・複数フォーマット	img の alt を使用	インデックスされる	source の media 属性
background-image	装飾・レイアウト目的	スクリーンリーダーに非表示	インデックスされない	image-set() / media query

Tips: alt テキストのベストプラクティス

コンテンツ画像：画像の内容・目的を簡潔に説明する。「写真」「画像」という言葉は不要。
装飾画像：alt=""（空文字）を指定してスクリーンリーダーにスキップさせる。alt 属性自体は省略しない。
リンク内の画像：リンク先の説明を alt に記述する（例：alt="ホームページへ"）。
グラフ・図表：グラフの内容・読み取れる結論を説明する。長い場合は longdesc や隣接テキストを使う。
CLS 防止：width と height 属性を必ず指定し、ブラウザがアスペクト比を計算できるようにする。
fetchpriority="high"：LCP（Largest Contentful Paint）の対象となるファーストビュー内の画像に指定する。Chrome 101 以降対応。

🤖 AIプロンプトテンプレート

以下の要件を満たす、レスポンシブ画像のHTML・CSSサンプルを作成してください。

- `srcset` と `sizes` を使って解像度・ビューポートに応じた画像切り替えを実装すること
- `loading="lazy"` による遅延読み込みを設定すること
- `alt` 属性に意味のある説明文を記述し、装飾画像は `alt=""` とすること
- `<picture>` 要素と `<source type="image/webp">` によるフォーマット切り替えを示すこと
- `width` / `height` 属性指定による CLS（累積レイアウトシフト）防止も実装すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee