Image CDN

## Using the built-in Astro <Image /> component Astro's `Image` component will automatically use Netlify Image CDN to serve optimized images. ~~~jsx --- import { Image } from 'astro:assets'; import corgi from '../assets/corgi.jpg'; --- // Later in your markup... Corgi ~~~
Corgi
Credit: photo by Alvan Nee on Unsplash
## Original vs. optimized image: can you tell the difference? In the code below, a regular `` tag is used in both cases for a framework-agnostic example. Note that aside from Astro's `Image` or rolling your own `` tags, you can also use the excellent [unpic-img](https://unpic.pics/) package. ~~~jsx // <== On the left, the original image Corgi // ==> On the right, explicitly using Netlify Image CDN endpoint for a responsive image Corgi ~~~
Corgi
Corgi