Image Component in Astro

From the Astro cheat sheet · Images & Assets · verified Jul 2026

Image Component

astro

---
import { Image } from 'astro:assets';
import myImage from '../assets/my-image.png';
---

<!-- Local image (src/) -->
<Image src={myImage} alt="Description" />

<!-- Public folder image -->
<Image
  src="/images/photo.jpg"
  alt="Description"
  width={600}
  height={400}
/>

<!-- Remote image (requires config) -->
<Image
  src="https://example.com/image.jpg"
  alt="Description"
  width={600}
  height={400}
/>

✅ Image component automatically optimizes at build time

💡 Local images (src/) auto-detect dimensions to prevent CLS

🔍 Remote images need authorization in astro.config.mjs

⚡ Picture component generates multiple formats and sizes

imagesImageassetsoptimization

Back to the full Astro cheat sheet