skills.rest
costrict-plugins-repo
costrict-plugins-repoOFFICIAL
Explore all skills by this author →
GitHub

netlify-image-cdn

Transform, resize, crop, and optimize images via Netlify's /.netlify/images endpoint.

Updated May 19, 2026
Search Tags:#webp#resize#netlify#responsive images#image optimization#netlify.toml#image cdn
One-click install
npx skills add https://github.com/costrict-plugins-repo/anthropic-netlify-skills --skill netlify-image-cdn-costrict-plugins-repo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: netlify-image-cdn
Source: https://github.com/costrict-plugins-repo/anthropic-netlify-skills/tree/main/codex/skills/netlify-image-cdn
Command: npx skills add https://github.com/costrict-plugins-repo/anthropic-netlify-skills --skill netlify-image-cdn-costrict-plugins-repo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Serving correctly sized, modern-format images across devices requires manual resizing pipelines or third-party services. This Skill shows how to use Netlify Image CDN's built-in edge endpoint to transform images on demand with query parameters, eliminating custom image-processing infrastructure. ## Core Features & Use Cases - On-demand transformations: Resize, crop, reformat (avif/webp/png/gif), and tune quality via the /.netlify/images endpoint with w, h, fit, position, fm, and q parameters. - Remote image allowlisting: Serve and transform images from external domains by configuring remote_images patterns in netlify.toml. - Framework integration: Wire Next.js, Astro, Nuxt, Angular, and Gatsby image components to Netlify Image CDN automatically. - Use Case: Build a user-uploaded image pipeline by composing Netlify Functions for uploads, Blobs for storage, and Image CDN redirects for optimized thumbnails and hero images. ## Quick Start Ask the agent to add responsive image optimization to your Netlify site using the /.netlify/images endpoint with proper width, format, and quality parameters.

Frequently Asked Questions about netlify-image-cdn

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

FAQPage Schema
How do I resize and optimize images on Netlify?▼

Request 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=400&fm=webp&q=80 returns a 400px-wide WebP at quality 80, with no function code required.

How do I serve images from an external domain through Netlify Image CDN?▼

Allowlist the domain in netlify.toml under [images] remote_images using a regex pattern, then percent-encode the remote URL with encodeURIComponent before passing it as the url parameter. Remote sources must be publicly accessible since Netlify does not forward Authorization headers.

Does Netlify Image CDN work with Next.js, Astro, or Nuxt image components?▼

Yes, framework image components wire to Image CDN automatically. Next.js needs version 13.5+ with adapter v5 and remotePatterns config; Astro and Nuxt work out of the box with their domain allowlists; Angular's NgOptimizedImage and Gatsby (with NETLIFY_IMAGE_CDN=true) are also supported.

Why does /.netlify/images return 404 in local development?▼

A local 404 almost always means a framework dev server like vite, next dev, or astro dev is running instead of netlify dev. The Image CDN endpoint, remote_images allowlisting, and image redirects only exist under the Netlify CLI's dev server.

What is the difference between fit=cover, contain, and fill?▼

fit=contain preserves aspect ratio without cropping and may return smaller dimensions; fit=cover scales then crops to exact dimensions and requires both w and h; fit=fill stretches the image to exact dimensions, potentially distorting it.

What are the limitations of Netlify Image CDN?▼

Split Testing is not supported, so image results may be inconsistent between split test branches. It is also unavailable in Netlify's HIPAA-compliant hosting offering, and fm=blurhash returns a text string rather than image bytes.

Related Skills

Explore More Software Engineering Skills→
netlifynetlify
32

netlify-image-cdn

Transform images on demand via the Netlify Image CDN endpoint.

Official
Intermediate
netlifynetlify
32

netlify-caching

Configure and validate Netlify CDN and browser caching headers.

Official
Intermediate
ChristineThamChristineTham

netlify-image-cdn

Configure Netlify Image CDN endpoints for optimized image transformations.

Community
Intermediate
InverterNetworkInverterNetwork

slime-rl-training

Orchestrate Megatron-LM training and SGLang rollout generation for large-scale RL post-training.

Official
Advanced