レスポンシブ画像、srcset、WebP ワークフロー

ヒーロー画像、ブログカバー、ドキュメントのスクリーンショットは、しばしば 1 つの大きな解像度で配信されます。それでもブラウザは、スマホ、タブレット、制約のあるレイアウト向けに小さなバリアントを必要とします。それらのバリアントをローカルで生成し、エクスポートしたファイル名に合うマークアップをコピーできます。

srcset が役立つ場面

srcset は、どの表示幅にどの画像ファイルがあるかをブラウザに伝えます。sizes と組み合わせれば、レイアウト描画前に妥当なファイルを選べます。

多くの静的サイトやコンポーネントライブラリでは、ワークフローは次のとおりです。

1. 1 つのソース画像から複数幅をエクスポート
2. ファイルをページ横または public/ に配置
3. それらのファイル名を参照する <img srcset> または <picture> ブロックを貼り付け

実用的なローカルワークフロー

1. ソース画像を 1 枚用意（例: 1920×1080 のヒーロー JPEG）
2. Responsive Image Generator を開く
3. デフォルト幅（480、768、1024、1280）を維持するか、レイアウトに合わせて調整
4. ホストがモダン形式を配信するなら WebP、最大互換なら JPEG
5. Generate images をクリックし、ファイルごとのサイズを確認して zip をダウンロード
6. srcset、<picture>、または Next.js <Image> スニペットをコピーし、ページ向けに sizes / alt を更新

処理はマシン上で完結します。

WebP + フォールバックパターン

WebP をエクスポートすると、<picture> スニペットに WebP <source> とフォールバック <img> が含まれます。古いクライアント向けに JPEG や PNG がまだ必要なら、生成前に出力形式を切り替え、代わりに <img srcset> スニペットを使います。

幅選択だけでは足りない場合、個別ファイルの追加圧縮には Image Compressor を使います。

関連ツール

• Image Cropper — レスポンシブ幅生成前にアスペクト比を調整
• Image Compressor — 幅削減だけでは足りないときに個別出力を縮小
• Markdown Preview — レスポンシブ画像を埋め込んだドキュメントをプレビュー