---
title: "srcsetとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "HTMLの画像表示をデバイス別に最適化したいWeb担当者・開発者向け。srcset属性の書き方と動作原理、sizesとの組み合わせ方、AI生成HTMLへの追記手順を具体的に説明する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-srcset-html-share"
markdown: "https://giga-site.com/articles/what-is-srcset-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# srcsetとは？HTML共有・AI生成サイトでの意味をやさしく解説

AIで生成したHTMLをスマホとPCの両方でレビューしてもらう場面は多い。そのとき、同じ画像がスマホでも4K表示用の巨大ファイルのままダウンロードされていては、受け取った側の体験が悪い。`srcset`属性はその問題を解消するためにHTMLで使える標準機能で、ファイル1行の変更だけでデバイス最適化を実現できる。

> Source HTML: https://giga-site.com/articles/what-is-srcset-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

`srcset`とは`<img>`タグの属性で、複数の画像ファイルとその幅（Wディスクリプタ）またはデバイスピクセル比（Xディスクリプタ）を列挙し、ブラウザが最適なものを自動選択できるようにする機能だ。例えば`srcset="img-400.webp 400w, img-800.webp 800w"`と書けば、ブラウザは表示サイズとデバイスのdprを考慮して適切なファイルを選ぶ。

srcsetを正しく設定することで、スマホユーザーは軽いファイルだけをダウンロードし、Retinaディスプレイのユーザーには高解像度画像が自動で表示される。HTML配信において最も費用対効果の高い画像最適化手法の一つだ。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AI生成のHTMLをzipで共有する際にsrcsetが設定されているかを確認することが重要だ。設定されていない場合、スマホでレビューする担当者に2MB以上の画像が複数届くことになる。共有前に`grep -r 'srcset' ./dist/`でチェックし、srcsetがなければ画像を複数サイズで出力してsrcsetを追記する。

ギガサイト便でフォルダをアップロードする際、srcsetで参照される各画像ファイルがすべてフォルダ内に存在しているかを確認する必要がある。パスが相対参照なら通常問題ないが、`/images/hero-800.webp`のような絶対パスだと配信ドメインによってはファイルが見つからない場合がある。

## よくある誤解

「srcsetを設定すれば必ずそのサイズの画像が使われる」という誤解がある。srcsetはヒントであり、ブラウザが最適と判断したものを選ぶ。キャッシュに大きいサイズが既に存在する場合はそちらを使い続けることもある。`sizes`属性も合わせて設定することで、ブラウザへの判断ヒントがより正確になる。

「srcsetはPicture要素と同じ」という混同もある。srcsetは同じ内容の画像を解像度別に提供するもので、Picture要素は形式（WebP/AVIF/JPEG）の切り替えや、アートディレクション（スマホでは縦長、PCでは横長など）を制御するために使う。AI生成コードではどちらが使われているかを確認してから修正すると良い。

## 安全に使うための注意点

srcsetに列挙したファイルが存在しない場合、ブラウザは自動でsrc属性のフォールバック画像を使う。共有zip内の画像ファイルを整理する際に一部ファイルを削除すると、意図した解像度の画像が表示されなくなる。ファイル名の変更・削除の際はHTMLのsrcset記述も同時に更新すること。

srcsetに外部URL（CDNのURL）を混在させると、共有先のブラウザがそのCDNにアクセスしログが残る。社内の未公開ページのレビューで外部CDNの画像URLを使うと、CDNのアクセスログから共有URLや社内サイトの存在が間接的に漏れる可能性がある。レビュー共有時は画像をローカルファイルで完結させること。

## よくある質問

### srcsetとsizes属性は両方設定する必要がありますか？

srcsetだけでも動作しますが、sizesを省略するとブラウザはビューポート幅を100vwと仮定します。CSSでmax-width:800pxのコンテナに収まる画像なら`sizes='(max-width:800px) 100vw, 800px'`のように設定すると、より適切な画像が選ばれます。

### AI生成のHTMLに後からsrcsetを追加する場合、既存のsrc属性はどうすればいいですか？

srcはそのまま残してください。srcsetをサポートしない古いブラウザはsrcをフォールバックとして使います。`<img src='img.jpg' srcset='img-400.webp 400w, img-800.webp 800w'>`のように追記するだけで後方互換性が保たれます。

### srcsetで指定する画像の幅（400wや800wなど）はどこから計算しますか？

表示される最大幅に2倍（Retina対応）を掛けた値が目安です。例えばモバイルで最大400px表示されるなら400w、デスクトップで最大800pxなら800wを用意します。実際のブレークポイントをCSSから確認して設定してください。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "srcsetとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "HTMLの画像表示をデバイス別に最適化したいWeb担当者・開発者向け。srcset属性の書き方と動作原理、sizesとの組み合わせ方、AI生成HTMLへの追記手順を具体的に説明する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-srcset-html-share",
  "url": "https://giga-site.com/articles/what-is-srcset-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "srcsetとsizes属性は両方設定する必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "srcsetだけでも動作しますが、sizesを省略するとブラウザはビューポート幅を100vwと仮定します。CSSでmax-width:800pxのコンテナに収まる画像なら`sizes='(max-width:800px) 100vw, 800px'`のように設定すると、より適切な画像が選ばれます。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成のHTMLに後からsrcsetを追加する場合、既存のsrc属性はどうすればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "srcはそのまま残してください。srcsetをサポートしない古いブラウザはsrcをフォールバックとして使います。`<img src='img.jpg' srcset='img-400.webp 400w, img-800.webp 800w'>`のように追記するだけで後方互換性が保たれます。"
      }
    },
    {
      "@type": "Question",
      "name": "srcsetで指定する画像の幅（400wや800wなど）はどこから計算しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "表示される最大幅に2倍（Retina対応）を掛けた値が目安です。例えばモバイルで最大400px表示されるなら400w、デスクトップで最大800pxなら800wを用意します。実際のブレークポイントをCSSから確認して設定してください。"
      }
    }
  ]
}
```