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 */ />
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"
/>
