--- title: "srcset・sizesとは？画面に合う画像を出し分ける仕組み" description: "スマホには小さな画像、高解像度ディスプレイには2倍サイズを届けたい場合に使うsrcsetとsizes属性の基礎を解説。ブラウザが画像を自動選択する仕組みと、よくある書き方のミスを防ぐための確認ポイントまで整理します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/what-is-srcset" markdown: "https://giga-site.com/articles/what-is-srcset/index.md" category: "用語解説" publishedAt: "2026-06-24" updatedAt: "2026-06-25" readingMinutes: 6 --- # srcset・sizesとは？画面に合う画像を出し分ける仕組み 同じ画像でもスマホとPCでは必要な大きさが違います。srcsetとsizes属性は、複数の画像候補をあらかじめブラウザに渡し、画面の幅や画素密度に合った1枚を自動で選ばせる仕組みです。この記事では基本の考え方と書き方、よくあるつまずきまでを整理します。 > Source HTML: https://giga-site.com/articles/what-is-srcset > Article index: https://giga-site.com/articles/index.md ## srcsetとは何か srcsetはimg要素に追加できる属性で、表示する画像の候補を複数並べて記述します。ブラウザはその一覧から、表示環境にもっとも適した画像を選んで読み込みます。1枚の画像をすべての端末に配るのではなく、状況に応じて最適なものを使い分けるための仕組みです。 従来のimgはsrcに1つの画像しか指定できませんでした。そのため大きな高解像度画像を全端末に配ると、スマホでは無駄に重く、逆に小さい画像をPCの大画面に拡大するとぼやけてしまいます。srcsetはこのジレンマを解決します。 srcsetだけでも機能しますが、後述するsizes属性と組み合わせることで、ブラウザがより正確な判断を下せるようになります。 ## width指定（w）とdensity指定（x）の違い srcsetの候補には2つの書き方があります。1つはdensity記述子（1x、2xなど）で、画面の画素密度に応じて画像を出し分けます。Retinaのような高密度ディスプレイでは2xの画像が選ばれます。 もう1つはwidth記述子（480w、960wなど）で、画像そのものの実際の横ピクセル数を伝えます。こちらは表示幅が端末によって変わるレスポンシブな画像に向いており、sizes属性と必ずセットで使います。 用途を簡単に言えば、表示サイズが固定なら density指定、表示幅が可変なら width指定が基本です。 ## 実務ではどこで関係する？ srcsetは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。 srcset・sizesについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。 - 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する - 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける - 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない - 運用の話: 期限、差し替え、削除、共有メッセージまで決める ## sizes属性の役割 width記述子を使うとき、ブラウザは「その画像が画面上で実際にどのくらいの幅で表示されるか」を知る必要があります。それを伝えるのがsizes属性です。 sizesにはメディア条件と表示幅の組み合わせを書きます。たとえば画面幅が600px以下なら表示幅は100vw、それより広ければ50vwといった指定です。ブラウザはこの情報とsrcsetの候補幅、そして画素密度をあわせて、ダウンロードすべき1枚を決めます。 sizesを省略すると表示幅は100vwとみなされ、必要以上に大きい画像が選ばれることがあります。width指定を使うなら、できるだけ実態に近いsizesを書きましょう。 ## 基本的な書き方の手順 実際にレスポンシブ画像を用意する手順は次のとおりです。元画像から複数サイズを書き出し、それを候補として並べていきます。 難しく見えますが、やることは画像の書き出しと属性の記述に分けて考えると整理しやすくなります。順を追って進めれば、特別なツールがなくても設定できます。 1. 元画像から幅違いの画像を数種類（例: 480px、960px、1440px）書き出す 2. img要素のsrcに、古いブラウザ向けのフォールバック画像を指定する 3. srcsetに各画像のパスと実幅をwで列挙する（例: small.jpg 480w, large.jpg 1440w） 4. sizesにレイアウト上の表示幅を条件付きで指定する 5. 実機やブラウザの開発ツールで、どの候補が読み込まれたか確認する ## よくある落とし穴 もっとも多いミスは、width記述子を使っているのにsizesを書かないことです。これではブラウザが表示幅を読み違え、最適化の効果が薄れます。 また、density指定とwidth指定を同じsrcset内で混在させることはできません。どちらか一方に統一します。元画像が小さいのに大きなwを書くと、引き伸ばされてぼやけるため、書き出した実寸と記述子の値を一致させることも大切です。 ## 出し分けの確認とレビュー srcsetは端末や解像度によって挙動が変わるため、自分のPCだけで確認すると見落としが出ます。ブラウザの開発ツールで端末をエミュレートしたり、実際のスマホで開いて確認するのが確実です。 チームやクライアントに「スマホとPCで正しく出し分けられているか」を見てもらいたいときは、確認用のページを一時的なURLで共有すると便利です。ギガサイト便ならHTMLや画像入りのZIPをドロップするだけで〇〇.giga-site.com形式の共有URLが発行され、関係者がそれぞれの端末で実機確認できます。期限や認証も設定できるので、レビュー用の一時共有に向いています。 ## よくある質問 ### srcsetとsizesは必ず両方書く必要がありますか？ density指定（1x、2x）だけなら srcsetのみで動きます。一方、width記述子（w）を使う場合は、ブラウザが表示幅を判断するためにsizesも書くのが基本です。sizesを省くと表示幅は100vwとみなされ、過大な画像が選ばれることがあります。 ### picture要素とは何が違いますか？ srcsetは同じ画像をサイズ違いで出し分けるのに向いています。picture要素はアートディレクション、つまり画面幅によって構図やトリミングが異なる別画像へ切り替えたい場合や、画像形式の出し分けに向きます。目的に応じて使い分けます。 ### 古いブラウザでも表示されますか？ srcsetに対応しないブラウザは、imgのsrcに指定したフォールバック画像をそのまま表示します。そのためsrcには標準的なサイズの画像を必ず入れておけば、対応・非対応どちらの環境でも画像が表示されます。 ### どのサイズの画像を用意すればよいですか？ 決まった正解はありませんが、スマホ・タブレット・PCの代表的な表示幅をカバーできるよう数種類を用意するのが一般的です。高密度ディスプレイを考慮し、実際の表示幅の2倍程度までの画像も用意しておくと安心です。 ### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？ 細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。 ## 関連記事 - [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md) - [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md) - [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md) - [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md) - [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md) - [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "srcset・sizesとは？画面に合う画像を出し分ける仕組み", "description": "スマホには小さな画像、高解像度ディスプレイには2倍サイズを届けたい場合に使うsrcsetとsizes属性の基礎を解説。ブラウザが画像を自動選択する仕組みと、よくある書き方のミスを防ぐための確認ポイントまで整理します。", "datePublished": "2026-06-24", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/what-is-srcset", "url": "https://giga-site.com/articles/what-is-srcset", "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": "density指定（1x、2x）だけなら srcsetのみで動きます。一方、width記述子（w）を使う場合は、ブラウザが表示幅を判断するためにsizesも書くのが基本です。sizesを省くと表示幅は100vwとみなされ、過大な画像が選ばれることがあります。" } }, { "@type": "Question", "name": "picture要素とは何が違いますか？", "acceptedAnswer": { "@type": "Answer", "text": "srcsetは同じ画像をサイズ違いで出し分けるのに向いています。picture要素はアートディレクション、つまり画面幅によって構図やトリミングが異なる別画像へ切り替えたい場合や、画像形式の出し分けに向きます。目的に応じて使い分けます。" } }, { "@type": "Question", "name": "古いブラウザでも表示されますか？", "acceptedAnswer": { "@type": "Answer", "text": "srcsetに対応しないブラウザは、imgのsrcに指定したフォールバック画像をそのまま表示します。そのためsrcには標準的なサイズの画像を必ず入れておけば、対応・非対応どちらの環境でも画像が表示されます。" } }, { "@type": "Question", "name": "どのサイズの画像を用意すればよいですか？", "acceptedAnswer": { "@type": "Answer", "text": "決まった正解はありませんが、スマホ・タブレット・PCの代表的な表示幅をカバーできるよう数種類を用意するのが一般的です。高密度ディスプレイを考慮し、実際の表示幅の2倍程度までの画像も用意しておくと安心です。" } }, { "@type": "Question", "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？", "acceptedAnswer": { "@type": "Answer", "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。" } } ] } ```