Technical & DevelopmentIntermediate
netlify-image-cdn
Optimize and transform images via CDN
Developer Setup
Setup & Installation
bash
npx skills add https://github.com/netlify/context-and-tools --skill netlify-image-cdnnpx skills add https://github.com/netlify/context-and-tools --skill netlify-image-cdnOr paste this URL into your assistant to install:
Overview
What This Skill Does
Netlify Image CDN is a built-in image transformation endpoint available on every Netlify site. It resizes, crops, converts formats, and adjusts quality on the fly via the `/.netlify/images` URL. No third-party service or configuration is needed for images already in your project.
Application
When to use this Skill
- Configuring integration settings for custom agent workflows.
- Optimizing query execution and response latency in production.
- Developing clean, standard-compliant implementations for enterprise services.
- Troubleshooting connection timeouts and authentication handshakes.
- Monitoring API rate limits and execution pipelines programmatically.
Documentation
Show Skills.md file
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.
Basic Usage
<img src="/.netlify/images?url=/photo.jpg&w=800&h=600&fit=cover&q=80" />
Query Parameters
| Param | Description | Values |
|---|---|---|
url |
Source image path (required) | Relative path or absolute URL |
w |
Width in pixels | Any positive integer |
h |
Height in pixels | Any positive integer |
fit |
Resize behavior | contain (default), cover, fill |
position |
Crop alignment (with cover) |
center (default), top, bottom, left, right |
fm |
Output format | avif, webp, jpg, png, gif, blurhash |
q |
Quality (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
Lines 1 - 25 of 75
Recommendations