Part of #734. The highest-leverage DevEx item: stop asking call sites to hand-write widths and sizes.
Today a module author must know srcset/sizes semantics, resource-vs-CSS pixels, and DPR to write widths={[300,600]} sizes="300px" — and get it right at every call site (13 in luxe, split into two undocumented conventions, one file explaining its reasoning; a missing sizes silently means 100vw and over-download).
Borrow Astro's layout: declare the intent, derive the rest.
layout |
candidates |
derived sizes |
fixed (needs width) |
width, 2×width |
<width>px |
constrained (needs width) |
breakpoints ≤ width, width, 2×width |
(min-width: <width>px) <width>px, 100vw |
full-width |
configured breakpoints |
100vw |
Part of #734. The highest-leverage DevEx item: stop asking call sites to hand-write
widthsandsizes.Today a module author must know srcset/sizes semantics, resource-vs-CSS pixels, and DPR to write
widths={[300,600]} sizes="300px"— and get it right at every call site (13 in luxe, split into two undocumented conventions, one file explaining its reasoning; a missingsizessilently means100vwand over-download).Borrow Astro's
layout: declare the intent, derive the rest.layoutsizesfixed(needswidth)width,2×width<width>pxconstrained(needswidth)width,2×width(min-width: <width>px) <width>px, 100vwfull-width100vwlayoutongetImagePropsand the component; defaultconstrained.widths+sizesremain as the explicit escape hatch, not the primary API.