Agent skill · practicalswan
netlify-image-cdn
Transform, resize, crop, reformat, and optimize images on demand via Netlify Image CDN's /.netlify/images endpoint. Use when adding responsive images, generating thumbnails, converting formats (avif/webp/png), cropping to aspect ratios, tuning image quality, creating blurred placeholders, allowlisting remote image domains, serving user-uploaded images, or wiring framework image components (Next.js, Astro, Nuxt, Angular, Gatsby) to Netlify. Triggers on tasks like \"optimize images\", \"add image thumbnails\", \"resize images on the fly\", \"serve images from an external domain\", or \"add blur placeholders\".
What it needs
About 6k tokens when loaded.
What this skill does
Netlify Image CDN Transform images by requesting /.netlify/images with query parameters. No function or file authoring required — it's a built-in edge endpoint. There is no legacy/deprecated form — the endpoint above is the only programmatic surface. Use framework image components where available (below) rather than hand-building URLs. Endpoint & query parameters GET /.netlify/images?url=<source>&... Param Values Notes --- --- --- url relative path or full remote URL REQUIRED. Only required param. w integer px width h integer px height fit contain (default), cover, fill resize behavior position center (default), top, bottom, left, right only applies when fit=cover fm avif, jpg, png, webp, gif, blurhash output format; webp/gif can be animated q integer 1–100 (default 75) only for avif, jpg, gif, webp fit behavior fit= aspect ratio kept crops excess returns exact dimensions --- --- --- --- contain yes no no — one dimension may be smaller cover no yes yes — scaled proportionally, then cropped fill no no yes — stretched/squished if needed fit=cover requires BOTH w and h. Supplying only one silently misbehaves. contain with one dimension calculates the other to preserve aspect ratio. Format & content negotiation Source-only request (just url, no size/format): image is unchanged in size/shape but still reformatted to avif/webp based on the browser's Accept header. No fm specified → webp if accepted, else avif if accepted, else original. fm=blurhash returns a BlurHash text string, not image bytes. Pointing <img src> or a CSS background at it renders nothing. Fetch the string server-side/ahead of time, decode it client-side with a BlurHash library (https://blurha.sh), then load the real image as a separate request without fm=blurhash. Response codes Invalid transformation param values → 404. Valid, new transformation → 200 with content + content-type. Previously transformed → 304. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills practicalswan/netlify-image-cdn