PageSpeed Insightsで「適切なサイズの画像を指定してください」と指摘された、 スマホで見ると画像の読み込みだけやたら時間がかかる—— Web制作をしていると一度は突き当たるこの問題の多くは、PC用に書き出した1枚の大きな画像を、スマホにもそのまま配信していることが原因です。 この記事では、その解決策であるsrcset・sizes属性の仕組みと、 複数解像度の画像を用意する具体的な手順を解説します。
なぜ1枚の画像だけでは足りないのか
PCの大きな画面とスマホの小さな画面では、画像に必要な解像度がまったく異なります。 PCでは横幅1920pxのヒーロー画像を表示する一方、スマホでは横幅375px程度でしか表示されません。 にもかかわらず同じ1920px幅の画像を配信すると、スマホ側では表示に不要な情報量まで一緒にダウンロードしてしまうことになります。
さらに話をややこしくしているのがRetinaディスプレイ（高精細ディスプレイ）の存在です。 DPR（Device Pixel Ratio、デバイスピクセル比）が2の端末では、 CSS上の表示幅が同じでも実際には2倍の解像度で描画されるため、 見た目の幅だけを基準に画像サイズを決めると、Retinaディスプレイでは画像がぼやけて見えてしまいます。
つまり「PC・スマホ」という画面幅の違いと、「標準・Retina」という画面密度の違いの 2軸を同時に満たす必要があり、1枚の画像だけでは全端末に最適化することはできません。
srcset・sizes属性の構文
srcset属性を使うと、1つの<img>タグに複数の画像候補を指定でき、 ブラウザが画面状況に応じて最適な1枚だけを選んでダウンロードします。 記述子には幅記述子（w）と倍率記述子（x）の2種類があります。
| 記述子 | 記述例 | 意味 | 向いている用途 |
|---|---|---|---|
| 幅記述子（w） | image-1280.jpg 1280w | 画像の実際の幅が1280pxである | 表示幅がレイアウトで変化する画像 |
| 倍率記述子（x） | [email protected] 2x | 標準解像度の2倍で書き出した画像である | 表示サイズが固定のロゴ・アイコン |
w記述子を使う場合は、sizes属性で「その画像が実際にどれくらいの幅で表示されるか」を あわせて宣言する必要があります。
<img src="image-1280.jpg" srcset="image-640.jpg 640w, image-1280.jpg 1280w, image-1920.jpg 1920w" sizes="(max-width: 600px) 100vw, 50vw" alt="商品写真" >
この例では「画面幅が600px以下ならビューポート幅の100%、それ以外は50%で表示する」とsizesで宣言しています。 ブラウザはこの宣言と実際の画面幅・DPRを掛け合わせて必要な実ピクセル数を計算し、 srcsetの候補の中から過不足のない1枚を選びます。 sizesを省略すると、ブラウザはビューポート幅いっぱいに表示されると仮定してしまい、 実際より大きな画像を選んでしまうことがあるため注意が必要です。
img srcsetとpictureの使い分け
どちらも複数画像を出し分ける仕組みですが、目的が異なります。
<img srcset>— 同じ構図・同じ画像の解像度違いを出し分ける。 「サイズは変わるが写っているものは同じ」場合に使います。<picture>— 画面幅によって構図そのものを変える 「アートディレクション」（スマホでは人物の寄り縦構図、PCでは背景込みの横構図など）や、 WebP対応ブラウザにはWebP・非対応ブラウザにはJPEGを出すフォーマット切り替えに使います。
フォーマット切り替えについてはWebP変換ツールで事前にJPEG・PNG・WebPを用意しておくと、<picture>と組み合わせやすくなります。 単純な解像度違いの出し分けだけであれば、<img srcset>だけで十分です。
Core Web Vitals（LCP）への影響
Googleがsrcset対応を推奨する最大の理由は、LCP（Largest Contentful Paint、最大コンテンツの描画時間）の改善効果です。 LCPはページ内で最も大きな要素が表示されるまでの時間を計測する指標で、 多くのページではヒーロー画像やファーストビューの写真がこの「最大の要素」に該当します。
PC用に書き出した4000px幅の写真をスマホでもそのまま配信していると、 モバイル回線では転送に時間がかかり、LCPが悪化してGoogleの評価にも影響します。 srcset対応でスマホには640px程度の軽い画像を配信すれば、 転送量を数分の1に減らせてLCPの改善につながりやすくなります。 PageSpeed Insightsの「適切なサイズの画像を指定してください」という指摘は、 まさにこのsrcset未対応を検出したものです。
手作業の手間とツールでの一括生成
srcset対応の効果は分かっていても、実装のハードルは意外と高いです。 1枚の画像につき4〜5段階のサイズを画像編集ソフトで個別に書き出し、 ファイル名を管理しながらsrcset・sizes属性を手打ちする作業は、 掲載画像の枚数が増えるほど線形に手間が増えていきます。 サイズを1つ間違えるだけでレイアウト崩れやぼやけの原因にもなります。
レスポンシブ画像srcset生成ツールを使えば、元画像をドラッグ＆ドロップするだけで複数解像度への一括リサイズと、 srcset・sizes属性を含んだHTMLコードの生成までをその場で完結できます。処理はすべてブラウザ内で完結し、画像はサーバーに送信されません。 公開前のデザイン案や社外秘の商品写真でも、外部にアップロードせずに複数解像度を用意できます。 書き出した画像をさらに軽量化したい場合は画像圧縮ツールや、単一サイズへの調整には画像リサイズツールの併用も効果的です。
まとめ
- PCとスマホでは必要な画像解像度が異なり、Retinaディスプレイ（DPR2以上）も考慮する必要がある
- srcset属性は複数解像度の候補リスト、sizes属性は実際の表示幅の宣言。両方セットで初めて効果を発揮する
- 解像度違いの出し分けはimg srcset、構図やフォーマットを変える場合はpictureを使う
- srcset対応はLCP（Largest Contentful Paint）改善に直結し、PageSpeed Insightsの指摘解消にもつながる
- 複数解像度の手作業書き出しは手間が大きいため、ブラウザ完結のツールで一括生成するとミスなく効率化できる