学びブログ

Learning Blog

画像を小さく書き出しても、すべての画面へ同じファイルを渡すと、広い画面では粗く見え、狭い画面では必要以上に大きなデータを読む場合があります。画像形式の選択に加えて、どの候補をどの表示条件で使うかを設計します。

HTMLのsrcsetは画像の候補、sizesは条件ごとの表示枠の幅をブラウザへ伝えるための情報です。画像を実際に何ピクセルの幅で表示するかは、CSSなどの配置も関係します。公式：レスポンシブ画像

この記事では、同じ構図の画像を複数の大きさで用意する方法を扱います。AVIFやWebPなどの形式比較とは分け、候補の幅、表示枠、画素密度、CSSとの一致を確認します。実際の通信量や速度の改善率は測定していません。

1．画像ファイルの幅と、表示する枠の幅を分ける

画像のファイルが1600ピクセル幅でも、ページ上では768CSSピクセル幅で表示する場合があります。さらに画面の画素密度によって、表示枠より多い画素を持つ候補が役立つ場合があります。

数値は架空の学習例です。必要な候補数と幅は、実際の表示枠、素材、利用環境へ合わせて決めます。大きい画像を用意するだけでも、小さい画像だけへ統一するだけでも、目的の条件は決まりません。

同じ構図の候補を選ぶ仕事と、狭い画面で構図を変える仕事は別です。人物を大きく見せるために切り取りを変えるなら、pictureなどを使うアートディレクションとして設計します。srcsetの幅の候補へ、意図の違う構図を黙って混ぜません。

2．w記述子には、実際の画像の幅を書く

幅で候補を用意する場合は、srcsetにファイルと幅を並べます。480wは、480CSSピクセルで表示せよという指示ではありません。画像ファイルの固有の幅が480ピクセルであることを示します。

次は、同じ構図で8:5の画像を用意した独自のHTML例です。パスは架空なので、実際に書き出した画像へ置き換えてください。ファイルの名前だけを変えて、同じ幅の画像へ異なるw値を付ける方法は取りません。

<div class="photo">
  <img
    src="/images/course-800.jpg"
    srcset="/images/course-480.jpg 480w,
            /images/course-800.jpg 800w,
            /images/course-1600.jpg 1600w"
    sizes="(max-width: 800px) calc(100vw - 32px), 768px"
    width="1600"
    height="1000"
    alt="架空の陶芸講座で作る小皿"
  />
</div>

この例の高さ1000は、1600幅の8:5の素材に対する高さです。実際には候補の比率をそろえ、widthとheightも使う素材の寸法に合わせます。何もない仮の寸法で、実際と違う比率を先に確保しないようにします。

srcには候補を使わない場合の画像も指定します。altはファイルの大きさごとに変えるのではなく、その画像が読者へ伝える内容へ合わせます。同じ内容の解像度違いで、意味の違う説明を付ける必要はありません。

3．sizesを、CSSの表示枠と一致させる

上のHTMLは、800CSSピクセル以下では画面幅から32ピクセルを引いた幅、それより広い場合は768ピクセルの枠を想定しています。CSSも同じ配置へ合わせます。

body {
  margin: 0;
}

.photo {
  width: calc(100% - 32px);
  max-width: 768px;
  margin-inline: auto;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

この例は、photoの親が画面幅と同じになる単純な配置を前提にしています。親に幅の制限や別の余白があるページへそのまま貼ると、100vwから計算したsizesと実際の枠がずれる場合があります。

sizesはCSSの幅を直接変えるものではありません。候補を選ぶ手掛かりとして伝える幅です。実際のCSSを変更したら、sizesも読み直します。画像の枠だけを変えて、候補の案内を以前のままにしません。

条件の順序にも注意します。sizesは最初に一致した条件を使うため、狭い画面の条件と広い画面の条件が混ざる場合は、どれが先に一致するかを確認します。条件のない最後の値も、実際の配置へ合わせます。

4．候補の選択を、画面幅だけで決め付けない

ブラウザは、表示枠に加えて、画素密度などの条件を使って候補を選びます。この例で表示枠が360CSSピクセル、画素密度が2なら、720画素程度を用意する考え方ができます。ただし、それだけで特定ファイルが必ず取得されると断定しません。

この表は計算上の目安で、ブラウザを実行して測った結果ではありません。キャッシュなどの条件でも、同じ確認がいつも同じ取得へなるとは限りません。実際に選ばれた画像と表示枠を点検します。

固定した表示枠へ、画素密度違いの候補を出す場合は、1x、2xといった記述子も使えます。その方法と、w記述子とsizesを組み合わせる方法を混ぜず、何の条件を表したいかで選びます。

候補の画像に文字が入っている場合、縮小しても読めるかを別に確認します。必要な文字を画像に焼き込む設計そのものも見直せます。解像度を増やすだけで、小さく表示された文字が読みやすくなるとは限りません。

5．表示枠と選ばれた画像を、同じ記録へする

検証では、画像の見た目だけでなく、実際の枠と選ばれたファイルを対応させます。ブラウザの開発者ツールなどで、表示寸法、currentSrc、取得したファイルを確認できます。確認した環境も記録します。

1. 同じ構図で候補を用意し、それぞれの実寸を確認します。
2. CSSの枠を決め、狭い幅と最大幅を記録します。
3. srcsetのw値と実寸、sizesとCSSの枠を照合します。
4. 狭い画面と広い画面で、実際の表示寸法と候補を確認します。
5. 画素密度や拡大条件を変え、見た目を点検します。
6. 配置を変更したあとも、sizesと画像の比率を再確認します。

読み込みの記録を比べる場合は、キャッシュを含めた条件を残します。一度大きな候補を読んだあとに画面を狭めた結果だけで、狭い画面の初回取得を測ったとは扱いません。何を比べたかを記録します。

候補を増やす場合も、同じ画像を必要以上に細かく書き出す必要はありません。枠の幅と、素材の見え方を確認し、役に立つ差がある候補へ絞ります。運用で書き出しと更新を管理できる範囲を選びます。

6．CMSが作る画像候補も、掲載後に確認する

WordPressなどのCMSでは、画像の候補やsrcsetが出力される場合があります。それでも、本文のCSSとsizesの想定が一致しているかは確認します。CMSが候補を作ることと、実際の掲載条件が適切なことを分けます。

独自のHTMLを貼る場合も、メディアへ登録された実際のURLを使います。ローカルのファイル名だけを書いて、サイトから読める画像があると扱いません。候補が読めない場合、別の候補で見えているからという理由だけで放置しません。

カバーや重要な画像では、表示枠と比率の変化も確認します。本文が読み込まれる間に画像の高さが大きく変わるなら、寸法の指定と素材の比率を見ます。遅延読み込みの扱いは、どの画像が最初に必要かという配置へ合わせて別に決めます。

最初の練習は、同じ構図の三候補と、単純な一列の枠から始められます。幅を変え、CSSの表示枠とsizesが一致するかを説明してみてください。その後、サイドバーなどの複雑な配置へ広げます。

今日の点検では、候補の実寸、表示枠、選ばれた画像の三つを一組にしてください。形式を選び、画像を圧縮する工程に加えて、必要な大きさを渡す条件を確認することで、Web素材の使い方を設計できます。

情報確認：2026年10月13日。題材、寸法、表、HTML・CSSと図解は独自の学習例です。枠の条件と数値の整合をローカルで確認しています。ブラウザの候補選択、実画像の取得、通信量と速度の測定は未実施です。