AstroShowcase
Assets Beginner Astro 6.3

Image Optimization

Automatic WebP/AVIF conversion, responsive srcsets, lazy loading, and zero layout shift — built into Astro.

Astro’s built-in image tools

Astro ships two image components with zero configuration:

  • <Image /> — Optimises a single image, adds correct dimensions, converts format
  • <Picture /> — Generates a <picture> element with multiple format fallbacks

Both automatically add width, height, and loading="lazy" attributes to eliminate Cumulative Layout Shift (CLS) and improve your Lighthouse score.

▶ Format & Performance Demo

Astro's <Image /> component automatically converts images to WebP/AVIF, adds correct width/height attributes to prevent layout shift, and generates a responsive srcset.

Optimisation comparison
Method Format CLS Risk Lazy Load Srcset
<img> Original High Manual Manual
<Image /> WebP / AVIF None Auto Auto
<Picture /> AVIF + WebP None Auto Multiple

✗ Plain HTML img

<img
  src="/hero.png"
  alt="Hero"
/>

✓ Astro Image component

<Image
  src={heroImg}
  alt="Hero"
  width={800}
  format="webp"
/>

Using the Image component

1

Import a local image

Import the image as a module so Astro can read its dimensions at build time.

---
import { Image } from 'astro:assets'
import heroImg   from '../assets/hero.png'
---
<Image
  src={heroImg}
  alt="Site hero"
  width={1200}
  format="webp"
  quality={80}
/>
2

Use the Picture component for art direction

<Picture> lets you serve different image formats or crops at different screen sizes.

---
import { Picture } from 'astro:assets'
import heroImg     from '../assets/hero.png'
---
<Picture
  src={heroImg}
  alt="Site hero"
  formats={['avif', 'webp']}
  widths={[400, 800, 1200]}
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
/>
3

Use remote images

For images hosted elsewhere, pass the URL as a string and provide explicit dimensions.

---
import { Image } from 'astro:assets'
---
<Image
  src="https://cdn.example.com/photo.jpg"
  alt="Remote photo"
  width={800}
  height={600}
  format="webp"
/>

You must whitelist the domain in astro.config.mjs:

image: { domains: ['cdn.example.com'] }

Performance impact

MetricPlain <img>Astro <Image />
FormatOriginal (PNG/JPEG)WebP / AVIF
File size reduction—30–80%
CLSLikelyNone
Lazy loadManualAutomatic
SrcsetManualAutomatic
Tip

Always set priority on your above-the-fold hero image to prevent it from being lazy-loaded — this improves Largest Contentful Paint (LCP).

<Image src={hero} alt="Hero" loading="eager" fetchpriority="high" />
Info

During development, images are transformed on-demand. In production builds, all local images are processed at build time and output to dist/_astro/.

Further reading