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...
~~~
## 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
// ==> On the right, explicitly using Netlify Image CDN endpoint for a responsive image
~~~
// ==> On the right, explicitly using Netlify Image CDN endpoint for a responsive image
~~~