netlify-image-cdn

This skill explains how to transform, resize, crop, reformat, and optimize images on demand using Netlify Image CDN's built-in /.netlify/images edge endpoint, which requires no function or file authoring. It solves the everyday need for responsive images, thumbnails, format conversion, and optimization without a custom image pipeline. The endpoint is driven purely by query parameters, and the skill documents each one (url, w, h, fit, position, fm, q), the exact behavior of contain/cover/fill fitting, content negotiation to AVIF/WebP based on the browser Accept header, and response codes.

Beyond the core endpoint, it covers allowlisting remote source domains in netlify.toml (with precise guidance on regex escaping and percent-encoding remote URLs), reusable transformation presets via redirects, cache-control headers, framework image components, and the special case that fm=blurhash returns a text string to decode client-side rather than image bytes. A companion reference walks through a complete user-uploaded image pipeline that composes Netlify Functions, Netlify Blobs, and the Image CDN — an upload handler that validates MIME type and size server-side, a serve handler, and CDN redirect presets — with React and Astro examples.

Target users are web and full-stack developers building responsive image delivery, thumbnail systems, or user-upload galleries on Netlify. The guidance is benign and even security-aware: it stresses that file type and size must be validated on the server because client validation can be bypassed, and that Netlify does not forward Authorization or Cookie headers to remote sources.