目次
スマートフォン向けにsrcsetを付けたのに、デスクトップ用の大きな画像が転送されている。原因は候補ファイルの数ではなく、ブラウザーへ伝えた表示幅が実際のCSSと合っていないことかもしれません。画像では、何を用意するかと、どの大きさで表示するかを一組で設計します。
本稿は新機能のニュースではなく、Web制作で使う画像配信の実装解説です。2026年10月24日にHTML仕様とブラウザー提供元の資料を確認しました。本文最大幅720pxの画像を例に、選ばれたファイルを検証するところまで紹介します。
スポンサーリンク
CSSだけではダウンロードする画像は小さくならない
width:100%を指定すれば表示上は縮みますが、srcに指定した大きなファイル自体はそのまま取得されます。画像候補をsrcsetへ列挙し、ブラウザーが選ぶための材料を渡します。w記述子を使うときの480wは、そのファイルの実際の横ピクセル数です。ファイル名が480でも、実寸が960なら480wと書いてはいけません。
WHATWG HTML Standardの画像仕様では、srcsetとsizesによる候補選択が定義されています。同じ構図の解像度違いを選ぶ仕組みと、スマートフォン用に構図を変える仕組みを使い分けることが出発点です。
表示幅720pxの本文画像を実装する
<div class="article-image">
<img
src="/images/studio-960.jpg"
srcset="/images/studio-480.jpg 480w,
/images/studio-960.jpg 960w,
/images/studio-1440.jpg 1440w"
sizes="(min-width: 768px) 720px, calc(100vw - 48px)"
width="1440" height="960"
alt="大きな窓から自然光が入る制作スタジオ">
</div>.article-image {
inline-size: min(720px, calc(100vw - 48px));
margin-inline: auto;
}
.article-image img {
display: block;
inline-size: 100%;
block-size: auto;
}例は、画面幅768px未満では左右24pxずつを残し、それ以上では幅720pxにする設計です。sizesも同じ条件を伝えます。HTML内の画像パスは差し替え用で、480・960・1440px幅の同じ構図・同じ比率の画像を実際に書き出して配置してください。
sizesは画像のCSS幅を設定する属性ではありません。「CSSを適用するとこの幅で表示される」という見込みを、先にブラウザーへ伝える情報です。実際の描画はCSSが決めます。web.devのsrcsetとsizesの解説も、この区別を説明しています。カードへ転用すると表示幅が変わるため、本文用のsizesをそのまま使い回さないようにします。
スポンサーリンク
DPRを含めて候補の大きさを考える
画面幅390pxなら、例のCSS表示幅は342pxです。DPRが2の環境では、目安として684ピクセル程度の情報があると細部を表現できます。候補が480・960・1440なら960が有力な候補になりますが、ブラウザーの選択は密度、、通信状況などにも左右されます。必ず特定ファイルが選ばれると決めつけないでください。
逆に本文の表示幅が720pxでDPR2なら、1440px幅は合理的な候補です。「スマホでは480pxだけ」「パソコンでは必ず最大」という単純な分岐ではありません。実際に必要な幅を想定し、隣り合う候補の差が大きすぎる場所だけ中間サイズを追加します。むやみに十数種類を書き出すと、画像処理、保存、変換の運用負荷が増えます。
pictureは構図や形式を切り替えるときに使う
<picture>
<source media="(max-width: 600px)"
srcset="/images/studio-close-640.jpg">
<img src="/images/studio-wide-1440.jpg"
width="1440" height="960"
alt="窓際の作業台と制作道具が並ぶスタジオ">
</picture>この例は狭い画面で被写体を大きく切り取った画像を使うアートディレクションです。sourceのmediaで構図を選び、必要なら各sourceにも解像度候補を持たせます。同じ構図のサイズ調整だけなら最初のimgとsrcsetで足ります。sourceにはaltを書かず、代替テキストはimgで管理します。構図が変わっても伝える意味が一致する内容にしましょう。
AVIFやWebPとJPEGの切り替えもpictureのtypeで表現できます。ただし、形式を増やしたこと自体を成果とせず、同じ視覚品質で容量が減るか、書き出しの手間と配信構成が見合うかを確認します。ロゴや線画、写真では適した圧縮条件が異なります。
スポンサーリンク
幅と高さで読み込み前の場所を確保する
widthとheightは、読み込み前に縦横比を計算する材料になります。CSSのinline-size:100%とblock-size:autoを併用すれば、実際の幅へ縮めながら比率を保てます。解像度候補が同じ比率なら、最大候補の寸法を指定する構成で扱いやすくなります。
画面によって縦横比そのものを変えるアートディレクションでは、各構図に応じた場所を確保する設計が必要です。単にimgの寸法だけを固定して終わらず、sourceの寸法指定やCSSのaspect-ratioなど、対象ブラウザーに合う方法で、切り替え前後のレイアウトを試してください。
最初に見える画像を遅延させない
下の方にある本文画像やカード画像にはloading="lazy"を検討できます。一方、ファーストビューの主画像やLCP候補へ一律にlazyを付けると、表示開始を遅らせる可能性があります。最初の実装例では遅延読み込みを指定していません。スクロール後に表示する画像へ使うなら、imgへloading="lazy"を追加します。
web.devのブラウザー標準の画像遅延読み込み解説は、画面外画像の遅延と寸法指定の重要性を説明しています。fetchpriority="high"も、すべての画像へ付けるものではありません。実際にLCPとなる重要画像を確認し、その取得優先度を高める必要があるときだけ使います。
currentSrcと転送サイズで検証する
const img = document.querySelector('.article-image img');
console.table({
selected: img.currentSrc,
cssWidth: img.getBoundingClientRect().width,
dpr: window.devicePixelRatio
});currentSrcで選ばれたURLを見て、開発者ツールのNetworkで転送量と実際の画像寸法を照合します。CSS幅が342pxなのにsizesが100vwのままなら、390pxとして選ばれている可能性があります。差が小さい例でも、2カラムやサイドバーでは過剰取得が大きくなります。
大きな画面で読み込んでから幅を狭めても、ブラウザーがすでに持つ大きな画像を使い続ける場合があります。幅とDPRを設定した後で新しく読み込み、必要ならキャッシュを無効にして比較します。キャッシュなしの初回転送と、再訪時の再利用は別々に確認してください。
制作と更新のルールまで揃える
- 元画像の構図、書き出し幅、品質、縦横比をコンポーネント単位で定義する。
- 画像の実寸とw記述子を照合し、CSSを変更したらsizesも見直す。
- スマートフォンとデスクトップの幅、DPR1と2、キャッシュ有無で選択結果を見る。
- 主画像と画面外画像でloadingの方針を分け、レイアウトのずれとLCPを計測する。
レスポンシブ画像は属性を追加する一度きりの作業ではありません。デザインの表示幅、画像の書き出し、が生成するHTMLが同じ前提を共有して初めて、適切な転送量になります。まず主画像一枚でcurrentSrcとCSS幅を見比べ、実際にずれているところから直すと効果を確かめやすくなります。
スポンサーリンク
