Image CDN

Using next/image component

When running on Netlify, next/image is automatically set-up to use Netlify Image CDN for optimized images.

import Image from 'next/image';

// In your component
<Image src="/images/corgi.jpg" alt="Corgi" /* ... additional props */ />

Corgi
Credit: photo by Alvan Nee on Unsplash

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. Other than using next/image or rolling your own <img> tags, you can also use the excellent unpic-img.

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

Corgi
Corgi