How does Astro's image optimization work?

Astro's image optimization is one of its standout features. For local images: import the image and use the <Image /> component: import hero from "../assets/hero.jpg"; <Image src={hero} width={800} height={400} alt="Hero" />. At build time, Astro processes the image using Sharp: converts to WebP/AVIF, resizes, optimizes quality. The output has hashed filenames for cache busting. For remote images: configure allowed domains in astro.config: image: { domains: ["cdn.example.com"] }. Then use: <Image src="https://cdn.example.com/photo.jpg" width={400} height={300} alt="" />. In SSR, images are processed on demand. Responsive images: use <Picture /> for multiple formats and sizes. getImage(): programmatic image optimization for dynamic use. Astro's image optimization automatically prevents CLS by requiring width/height and adds loading="lazy" by default — two key factors for good Core Web Vitals scores.