# netlify-image-cdn

Помогает настроить трансформацию изображений на лету через эндпоинт Netlify Image CDN. Пригодится при сжатии картинок и генерации плейсхолдеров.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3000 установок · ★ 45
- Автор: netlify
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/netlify/context-and-tools/tree/HEAD/skills/netlify-image-cdn/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/netlify-image-cdn

## Что делает

Скилл обучает ИИ-агента трансформировать графику через служебный эндпоинт `/.netlify/images`. Он содержит спецификацию параметров запроса: изменение ширины `w`, высоты `h`, типа кадрирования `fit`, формата `fm` и качества `q`. В правилах чётко зафиксировано, что режим `fit=cover` требует обязательной передачи обоих размеров, а для генерации превью `fm=blurhash` возвращается текстовая строка хеша вместо байтов картинки.

Для внешних источников скилл подсказывает правильный формат секции `[images]` в `netlify.toml` с регулярными выражениями. Локально этот функционал работает исключительно под `netlify dev`. Если запустить только dev-сервер фреймворка, запросы упадут с ошибкой 404.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add netlify/context-and-tools --skill netlify-image-cdn -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/netlify-image-cdn/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/netlify-image-cdn/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add netlify/context-and-tools --skill netlify-image-cdn -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/netlify-image-cdn/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add netlify/context-and-tools --skill netlify-image-cdn -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/netlify-image-cdn/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install netlify/context-and-tools netlify-image-cdn
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/netlify-image-cdn/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add netlify/context-and-tools --skill netlify-image-cdn -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/netlify/context-and-tools --path skills/netlify-image-cdn
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/netlify-image-cdn/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add netlify/context-and-tools --skill netlify-image-cdn -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/netlify/context-and-tools/tree/HEAD/skills/netlify-image-cdn/SKILL.md

## Когда брать
- настроить ресайз и кадрирование изображений через параметры URL
- сконвертировать исходные файлы в форматы WebP или AVIF
- разрешить загрузку картинок с внешних доменов в netlify.toml
- создать текстовый хеш для блюр-плейсхолдера через fm=blurhash
- исправить ошибку 404 при локальной отладке изображений

## Примеры запросов агенту
- Сформируй URL для сжатия обложки owl.jpeg до ширины 400px в формате avif
- Как прописать белый список доменов в netlify.toml для картинок с my-images.com?
- Настрой редирект в netlify.toml, чтобы отдавать миниатюры 50x50

## Похожие
- [tigris-image-optimization](https://affpapa.org/nevibecode/skills/tigris-image-optimization.md) — скилл · 3100 установок
- [image-optimization](https://affpapa.org/nevibecode/skills/aj-geddes-image-optimization.md) — скилл · 656 установок
- [cdn-setup](https://affpapa.org/nevibecode/skills/cdn-setup.md) — скилл · 324 установки
- [setup-cdn-optimization](https://affpapa.org/nevibecode/commands/setup-cdn-optimization.md) — команда · 218 установок
- [cdn-caching](https://affpapa.org/nevibecode/skills/cdn-caching.md) — скилл · 2 установки
- [netlify-development](https://affpapa.org/nevibecode/skills/netlify-development.md) — скилл · 665 установок

Из того же набора: [netlify/context-and-tools](https://affpapa.org/nevibecode/by/netlify/context-and-tools.md) — 14 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md