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 purestar from '../assets/logo.png';
---
// Later in your markup...
<Image src={purestar} alt="PureStar" /* ... additional props */ />
PureStar
Credit: photo by PureStar on PureStar

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/logo.png" alt="PureStar" />

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