netlify-image-cdn

Configures Netlify Image CDN transformations, remote allowlisting, and upload pipelines.

1|Updated May 13, 2026
One-click install
npx skills add https://github.com/SyedArmanAli2003/AgroNaV --skill netlify-image-cdn-syedarmanali2003
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: netlify-image-cdn
Source: https://github.com/SyedArmanAli2003/AgroNaV/tree/main/.agents/skills/netlify-image-cdn
Command: npx skills add https://github.com/SyedArmanAli2003/AgroNaV --skill netlify-image-cdn-syedarmanali2003

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @netlify/blobs, @netlify/functions, and includes references (resource) components.

What problem does it solve? Serving unoptimized images slows down sites and wastes bandwidth, and building responsive image markup or user-upload pipelines from scratch is error-prone. This Skill provides the exact endpoint syntax, query parameters, and configuration patterns for Netlify's built-in image transformation service. ## Core Features & Use Cases - On-the-fly transformation: Resize, crop, reformat, and compress images through the /.netlify/images endpoint using query parameters like w, h, fit, fm, and q. - Remote image allowlisting: Configure regex-based remote_images rules in netlify.toml and correctly percent-encode external source URLs. - Clean URL rewrites: Map friendly paths like /img/thumb/:key to transformation presets using redirect rules. - User-uploaded image pipelines: Combine Netlify Functions, Blobs storage, and the Image CDN to accept, store, serve, and optimize user uploads. - Use Case: A developer building a photo gallery on Netlify needs thumbnails and hero images from user uploads; this Skill provides the upload Function, Blobs storage code, and redirect presets to ship the full pipeline. ## Quick Start Set up Netlify Image CDN to serve my /uploads photos as 150x150 cropped thumbnails at clean /img/thumb/ URLs.

Frequently Asked Questions about netlify-image-cdn

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

FAQPage Schema
How do I optimize images on Netlify?

Use the built-in /.netlify/images endpoint with query parameters like url, w, h, fit, fm, and q. For example, /.netlify/images?url=/photo.jpg&w=800&fit=cover&fm=webp resizes and converts the image without any configuration for local files.

How to serve remote images through Netlify Image CDN?

Add regex patterns to the remote_images array under [images] in netlify.toml to allowlist external sources. Then percent-encode the full remote URL before passing it as the url parameter to /.netlify/images.

Does Netlify Image CDN support WebP and AVIF formats?

Yes, the fm parameter accepts avif, webp, jpg, png, gif, and blurhash. When fm is omitted, Netlify auto-negotiates the best format based on browser support, preferring webp then avif.

How do I build a user image upload pipeline on Netlify?

Combine a Netlify Function that validates and stores uploads in Netlify Blobs, a serve Function that returns blobs at /uploads/:key, and a redirect mapping /img/:key to /.netlify/images?url=/uploads/:key for CDN transformation.

Why is my Netlify image URL with query strings not transforming?

Source URLs containing ?, &, =, #, or whitespace are parsed as Image CDN parameters instead of part of the path. Percent-encode the source value with encodeURIComponent before placing it in the url parameter.