2026-05-19 · 読了目安 1 分
レスポンシブレイアウト向け画像リサイズ
レイアウトが使う正確な幅をエクスポート — モバイルに 4000px ソースを送らない。
画像パフォーマンスフロントエンド
重要ポイント
- 先にリサイズ、次に圧縮 — 品質とバイトの順序が重要。
- アートディレクションでクロップが必要でない限りアスペクト比を維持。
srcset に合わせる
1つの巨大マスターではなく、ブレークポイントごとに 1x/2x 幅を生成。
出荷する形式と同じで Image Compress とリサイズ出力を組み合わせる。
よくある質問
リサイズ後の形式は？
モダンスタックの写真は WebP; UI エッジをシャープにしたい場合は PNG。
副フィールドの幅？
目標幅または WxH を入力; 不要なアップスケールなしで境界内に収める。