Image CDN

Using the built-in Astro <Image /> component

Astro's Image component will automatically use Netlify Image CDN to serve optimized images.

---
import { Image } from 'astro:assets';
import corgi from '../assets/corgi.jpg';
---
// Later in your markup...
<Image src={corgi} alt="Corgi" /* ... additional props */ />
Corgi
Credit: photo by Alvan Nee on Unsplash

Original vs. optimized image: can you tell the difference?

In the code below, a regular <img> tag is used in both cases for a framework-agnostic example. Note that aside from Astro's Image or rolling your own <img> tags, you can also use the excellent unpic-img package.

// <== On the left, the original image
<img src="/images/corgi.jpg" alt="Corgi" />

// ==> On the right, explicitly using Netlify Image CDN endpoint for a responsive image
<img 
  srcSet="/.netlify/images?url=/images/corgi.jpg&w=640 640w, /.netlify/images?url=/images/corgi.jpg&w=1280 1280w, /.netlify/images?url=/images/corgi.jpg&w=2048 2048w"
  sizes="(max-width: 1024px) 100vw, 1024px" 
  alt="Corgi" 
/>
Corgi
Corgi