netlify-image-cdn

Name: netlify-image-cdn
Availability: InStock
Author: Netlify

Transform images on demand via the Netlify Image CDN endpoint.

32|7|Updated Nov 26, 2025

Search Tags:#caching #transformation #netlify #redirects #image-optimization #remote-images #image-cdn

Ready to run

npx skills add https://github.com/netlify/context-and-tools --skill netlify-image-cdn-netlify

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: netlify-image-cdn
Source: https://github.com/netlify/context-and-tools/tree/main/codex/skills/netlify-image-cdn
Command: npx skills add https://github.com/netlify/context-and-tools --skill netlify-image-cdn-netlify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Netlify Image CDN simplifies delivering optimized, responsive images by transforming and serving them on demand, reducing bandwidth and improving performance across sites.

Core Features & Use Cases

On-the-fly image transformation via the /.netlify/images endpoint (w, h, fit, fm, q).
Remote image allowlisting in netlify.toml to securely fetch external images.
Clean URL rewrites to map friendly URLs to optimized image requests.
User-uploaded image pipelines using Netlify Functions + Blobs for upload, storage, and serving.
Caching behavior and best practices for CDN delivery.

Quick Start

Transform an image on demand by requesting /.netlify/images?url=/photo.jpg&w=800&h=600&fit=cover.

Frequently Asked Questions about netlify-image-cdn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I transform and optimize images on the fly with Netlify?▼

Netlify image optimization transforms images on demand via the /.netlify/images endpoint. You append query parameters like w, h, fit, fm, and q to dynamically resize, crop, and compress images for faster delivery.

How do I securely fetch and allowlist remote images in Netlify?▼

To securely fetch remote images, you configure a remote image allowlist in netlify.toml. This restricts the Image CDN to only transform and serve external images from domains you explicitly approve.

Can I build a pipeline for user-uploaded images using Netlify Functions and Blobs?▼

Yes, you can build user upload pipelines combining Netlify Functions and Blobs. Functions handle the upload logic, Blobs store the images, and the Image CDN serves them dynamically.

What's the best way to create clean URLs for optimized images in Netlify?▼

Clean URL rewrites map friendly URLs to optimized image requests. You configure redirects in netlify.toml to route simple paths to the /.netlify/images endpoint with required transformation parameters.

How does caching work for images served through the Netlify Image CDN?▼

The Image CDN uses caching behavior to deliver optimized images at scale. Caching reduces bandwidth by serving transformed images from the CDN edge, improving performance across your site.