skills.rest
netlify
netlifyOFFICIAL
Explore all skills by this author →
Website𝕏@netlifyGitHub

netlify-image-cdn

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
One-click install
npx skills add https://github.com/netlify/context-and-tools --skill netlify-image-cdn-netlify
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
brendadeeznuts1111brendadeeznuts1111

cloudflare-images

Manage image storage, transformation, and delivery via Cloudflare Images API and Workers.

Community
Advanced
jherrjherr

netlify-blobs

Manage unstructured data with Netlify Blobs key-value storage.

Community
Intermediate
ChristineThamChristineTham

netlify-image-cdn

Configure Netlify Image CDN endpoints for optimized image transformations.

Community
Intermediate
rampstackcorampstackco
523

media-asset-management

Plan and design scalable media pipelines for images, video, and downloadable assets.

Official
Advanced