Astro · Media

Image Optimization in Astro

Serve responsive, correctly sized images that protect LCP and bandwidth. Framework notes for Astro.

intermediateimageslcpwebp

Problem Overview

Unoptimized images are a top cause of slow LCP and wasted data. Missing dimensions also cause layout shift.

Why It Matters

Images dominate bytes on most marketing sites. Better formats, sizes, and priority hints move Core Web Vitals and conversion.

Framework-Specific Explanation

Use <Image /> from astro:assets in Astro so you get modern formats, sizing, and lazy-loading defaults — then override for LCP heroes.

Step-by-Step Solution

  1. Replace raw <img> heroes with the framework image component where possible.
  2. Set explicit dimensions; disable lazy load on LCP.
  3. Compress source assets before upload.
  4. Verify LCP in lab + field after deploy.

Code Examples

<img
  src="/hero.avif"
  srcset="/hero-800.avif 800w, /hero-1200.avif 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200"
  height="630"
  alt="Dashboard overview"
  fetchpriority="high"
/>

Common Mistakes

  • Shipping multi-megabyte hero PNGs
  • Omitting width/height (CLS)
  • Lazy-loading the LCP image
  • Ignoring modern formats (AVIF/WebP) with fallbacks

Validation Checklist

  • [ ] LCP image not lazy-loaded; consider fetchpriority="high"
  • [ ] Width/height or CSS aspect-ratio reserved
  • [ ] Responsive srcset / framework image component
  • [ ] Compression and modern formats where supported

AI Readiness Notes

Descriptive filenames and alt text improve both a11y and AI understanding of visual content.

Deployment Checklist

  • [ ] Heroes under a sensible byte budget
  • [ ] No layout shift from late image loads
  • [ ] CDN image transforms configured if used

Browser Extension Tips

After shipping image work, re-share an extension report to show score movement.

Related Guides