Performance · Astro
How to use srcset for responsive images in Astro
Without a `srcset`, a phone downloads the same file a desktop does — often several times the pixels it can display. It is wasted bandwidth on exactly the connections least able to spare it.
The fix for Astro
13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.
Astro's <Image /> and <Picture /> generate responsive output at build time:
---
import { Image } from "astro:assets";
import hero from "../assets/hero.jpg";
---
<Image
src={hero}
widths={[400, 800, 1600]}
sizes="(max-width: 700px) 100vw, 800px"
alt="Describe the image"
/>Importing the asset rather than referencing a path in public/ is what lets
Astro read the intrinsic dimensions and emit width/height automatically.
On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.
Check your Astro site
113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.
No signup. Results in 30 seconds.