Image Optimization in Astro — Local vs Cloudinary

Astro handles local images automatically. Import an image, use the <Image /> component, and Astro converts it to WebP, resizes it, and generates srcset for responsive loading.

import { Image } from 'astro:assets'
import heroImg from '../../assets/hero.jpg'

<Image src={heroImg} alt="Hero" width={1200} height={630} />

Zero config. Works at build time.

When local images aren’t enough

Local images live in your repo. A site with 500 blog posts and 2 images each = 1000 image files in version control. Slow clones. Large repo. Build times increase.

Cloudinary solves this by storing images externally and serving them via URL with transformation parameters.