Netlify Image CDN

The Netlify Image CDN brings the ability to automatically optimize local and remote images.

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';
---

<Image src={corgi} alt="Corgi" /* ... additional props */ />

Corgi — Credit: photo by Alvan Nee on Unsplash

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

A regular <img /> tag is shown below to demonstrate a framework-agnostic example.

<!-- Left: the original image -->
<img src="/images/corgi.jpg" alt="full-size corgi image" />

<!-- Right: 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="optimized corgi image"
/>

optimized corgi image — Optimized image served from the CDN

Local development

In local development, optimization is performed locally without automatic format detection.

unpic-img

Aside from Astro’s Image or rolling your own <img /> tags, you can also use the excellent unpic-img package.