Labsco
openai logo

netlify-image-cdn

✓ Official★ 4,081

by openai · part of openai/plugins

Guide for using Netlify Image CDN for image optimization and transformation. Use when serving optimized images, creating responsive image markup, setting up user-uploaded image pipelines, or configuring image transformations. Covers the /.netlify/images endpoint, query parameters, remote image allowlisting, clean URL rewrites, and composing uploads with Functions + Blobs.

🧩 One of 7 skills in the openai/plugins package — works on its own, and pairs well with its siblings.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

Netlify Image CDN

Every Netlify site has a built-in /.netlify/images endpoint for on-the-fly image transformation. No configuration required for local images.

Query Parameters

ParamDescriptionValues
urlSource image path (required)Relative path or absolute URL
wWidth in pixelsAny positive integer
hHeight in pixelsAny positive integer
fitResize behaviorcontain (default), cover, fill
positionCrop alignment (with cover)center (default), top, bottom, left, right
fmOutput formatavif, webp, jpg, png, gif, blurhash
qQuality (lossy formats)1-100 (default: 75)

When fm is omitted, Netlify auto-negotiates the best format based on browser support (preferring webp, then avif).

Remote Image Allowlisting

External images must be explicitly allowed in netlify.toml:

[images]
remote_images = ["https://example\\.com/.*", "https://cdn\\.images\\.com/.*"]

Values are regex patterns.

Clean URL Rewrites

Create user-friendly image URLs with redirects:

# Basic optimization
[[redirects]]
from = "/img/*"
to = "/.netlify/images?url=/:splat"
status = 200

# Preset: thumbnail
[[redirects]]
from = "/img/thumb/:key"
to = "/.netlify/images?url=/uploads/:key&w=150&h=150&fit=cover"
status = 200

# Preset: hero
[[redirects]]
from = "/img/hero/:key"
to = "/.netlify/images?url=/uploads/:key&w=1200&h=675&fit=cover"
status = 200

Caching

  • Transformed images are cached at the CDN edge automatically
  • Cache invalidates on new deploys
  • Set cache headers on source images to control caching:
[[headers]]
for = "/uploads/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

User-Uploaded Images

Combine Netlify Functions (upload handler) + Netlify Blobs (storage) + Image CDN (serving/transforming) to build a complete user-uploaded image pipeline. See references/user-uploads.md for the full pattern.

Bundled References (Load As Needed)