Responsive images
Responsive layout
size={100} declares the image occupies 100vw, which becomes the sizes attribute. The browser then picks a width from srcset for its own viewport and DPR — which is why no import here asks for a width above 1120, the intrinsic width of these files. The plugin would report the requested width regardless, and a srcset that overstates a candidate misleads exactly the calculation it exists to feed.
- import
- racing.jpg?w=640;828;1120
- formats
- jpeg, webp, avif
- widths
- 640, 828, 1120
- aspect ratio
- 1.000
- largest candidate
- /_astro/example-guitar-racing-1120w.DVFKOgIG.jpg
Fixed layout
width without size switches to the fixed strategy: a 240px box, with the 480px candidate reserved for 2x displays. Height is derived from the aspect ratio, so the box never shifts while loading.
- import
- racing.jpg?w=240;480&format=original;webp
- formats
- jpeg, webp
- widths
- 240, 480
- aspect ratio
- 1.000
- largest candidate
- /_astro/example-guitar-racing-480w.DTLcnsmb.jpg
Placeholders (LQIP)
Throttle the network in devtools and reload — each tile shows a different placeholder while the full image streams in. The cost is paid in the HTML, not in an extra request.
