0Pricing
CSS Academy · レッスン

レスポンシブ画像とPicture要素

srcset、sizes、HTMLのpicture要素を使って、適切なサイズの画像を配信します。

「レスポンシブ画像とPicture要素」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

レスポンシブ画像の課題

モバイルデバイスでデスクトップ用のフル解像度画像をダウンロードすると、帯域幅を無駄に消費し、読み込み時間も長くなります。レスポンシブ画像を使うと、デバイスに適したサイズの画像を配信できます。

max-width: 100%の基本設定

レスポンシブ画像に必要な最小限のルールです。縦横比を保ちながら、画像がコンテナからはみ出さないようにします。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />

異なる解像度に対応するsrcset

srcset属性では、複数の画像ソースを指定できます。ブラウザは、デバイスピクセル比（DPR）に基づいて最適なソースを選択します：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
  alt="A beautiful landscape"
  style="max-width:100%;height:auto;display:block;"
>

幅記述子を使ったsrcset

w記述子を使って、各画像ファイルの実際のピクセル幅をブラウザに伝えます：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
  alt="Hero image"
  style="max-width:100%;height:auto;display:block;"
>

sizes属性

sizes属性は、さまざまなビューポートサイズで画像が表示される幅をブラウザに伝えます。これにより、srcsetから適切なソースを選択しやすくなります。

<img
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  alt="Product photo"
  style="max-width:100%;height:auto;display:block;"
>

picture要素

<picture>要素を使うと、メディア条件を指定した<source>要素によって、配信する画像ファイルを細かく制御できます。ブラウザは最初に一致したソースを使用します。

<picture>
  <source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
  <source media="(min-width: 600px)"  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>

pictureによるアートディレクション

アートディレクションでは、画面サイズごとに異なる切り抜きや構図の画像を配信します。同じ画像を小さくするだけではありません。

<picture>
  <!-- Wide crop for desktop -->
  <source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
  <!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>

最新の画像形式：WebPとAVIF

<picture>要素を使うと、形式を選択できます。フォールバック付きで最新の形式を配信します：

<picture>
  <source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>

パフォーマンスのためのloading="lazy"

loading="lazy"属性を指定すると、画面外にある画像の読み込みを、ユーザーが近くまでスクロールするまで遅らせることができます：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
  loading="lazy"
  decoding="async"
  alt="Product"
  style="max-width:100%;height:auto;display:block;"
>

width属性とheight属性

画像には必ずwidth属性とheight属性を指定してください。これにより、画像の読み込み前にブラウザがレイアウト用の領域を確保でき、レイアウトシフト（CLS）を防げます。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">

コンテナ内の画像に対するobject-fit

固定サイズのコンテナに画像を配置する場合は、object-fitを使って空間への収まり方を制御します：

<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />

クイックチェック

さまざまなビューポートサイズでの画像の表示幅をブラウザに伝えるために、srcsetと組み合わせて使うHTML属性はどれですか？

まとめ

レスポンシブ画像では、srcsetとsizesを使って適切なサイズの画像を配信します。<picture>要素を使うと、アートディレクションや形式の選択が可能になります。コンテナ内の画像には、必ずloading="lazy"、width/height属性、object-fitを使用してください。

よくある質問

「レスポンシブ画像とPicture要素」レッスンは無料ですか？

はい。「レスポンシブ画像とPicture要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「レスポンシブ画像とPicture要素」で何を学びますか？

srcset、sizes、HTMLのpicture要素を使って、適切なサイズの画像を配信します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「レスポンシブ画像とPicture要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. モバイルファーストとデスクトップファースト
  2. パーセンテージによる可変幅
  3. Min-WidthとMax-Widthのパターン
  4. レスポンシブ画像とPicture要素
← CSS Academyに戻る