Image Optimization in Astro

❌ The Old Way (Regular img tag)

This loads the full-size image, no optimization:

Problems: Large file size, blocks rendering, no format optimization

✅ The Astro Way (Image component)

This is automatically optimized:

Benefits: Resized, converted to WebP, lazy loaded, responsive!

Key Image Component Props

src

Image source (local import or URL string)

alt

Alt text (required for accessibility!)

width & height

Dimensions in pixels. Required to prevent layout shift!

quality

0-100. Default is 80. Lower = smaller file, less quality.

loading

"lazy" (default) loads when visible. "eager" loads immediately.

format

Output format: "webp" (default), "avif", "png", "jpg"

Local Images (Best Practice)

For images you own, put them in your project and import:

---
import { Image } from 'astro:assets';
import myImage from '../assets/photo.jpg';
---

<Image src={myImage} alt="My photo" width={800} height={600} />

Astro optimizes these at build time = super fast!

Remote Images

For external URLs (Unsplash, CDNs, etc.), just use the URL:

<Image
  src="https://example.com/image.jpg"
  alt="Remote image"
  width={800}
  height={600}
/>

Astro optimizes these on-demand when requested.

💡 For Creative Devs

Use <Image> for hero images, portfolio pieces, thumbnails
Use lazy loading for images below the fold (better performance)
Lower quality (60-70) for background images to save bandwidth
Keep original <img> only for:
- Canvas/WebGL texture sources
- Images manipulated with JavaScript
- SVGs (they're already optimized)

What Happens Behind the Scenes?

When you use <Image>:

Astro resizes to your specified dimensions
Converts to WebP (smaller, modern format)
Generates multiple sizes for responsive images
Adds proper width/height attributes (prevents layout shift)
Lazy loads by default (loads when scrolled into view)
Stores optimized versions in dist/_astro/