# image-optimization

Скилл помогает настроить адаптивные изображения, WebP и разметку для поиска Google. Пригодится при отладке LCP и подготовке графики к индексации.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 установок · ★ 1062
- Автор: kostja94
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/kostja94/marketing-skills/tree/HEAD/skills/seo/on-page/image-optimization/SKILL.md
- Обновлён: 2026-10-21
- HTML: https://affpapa.org/nevibecode/skills/image-optimization

## Что делает

Скилл структурирует правила работы с графикой под требования Google Search и Core Web Vitals. Он сверяет контекст страницы: определяет первый экран, фоновые баннеры, товарные карточки и социальные превью. Если в корне репозитория лежит `contextus.md`, агент читает только нужные модули, а без него запрашивает параметры у пользователя.

Главный упор сделан на правильный HTML. Поисковые роботы не индексируют картинки из CSS-свойств `background-image`, поэтому скилл заменяет их на элементы `img` и `picture` с обязательным резервным `src`. Для сжатия он советует форматы WebP или AVIF с качеством от 75 до 85. Правила скилла запрещают атрибут `loading="lazy"` на первом экране, потому что отложенная загрузка баннера сразу разрушает показатель LCP.

Для индексации картинок формируются отдельные XML-карты, куда разрешено включать адреса со сторонних CDN. Скилл также формулирует описания для `alt` длиной до 125 символов без спама ключами и подбирает осмысленные имена файлов через дефис.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill image-optimization -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill image-optimization -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill image-optimization -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kostja94/marketing-skills image-optimization
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill image-optimization -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/kostja94/marketing-skills --path skills/seo/on-page/image-optimization
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill image-optimization -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/kostja94/marketing-skills/tree/HEAD/skills/seo/on-page/image-optimization/SKILL.md

## Когда брать
- настроить адаптивные теги picture и srcset с фоллбэком на src
- убрать lazy loading с главного экрана для защиты метрики LCP
- составить XML-карту для индексации картинок на CDN
- составить информативные alt-тексты длиной до 125 символов
- перевести графику в форматы WebP и AVIF

## Примеры запросов агенту
- Проверь теги img на главной странице и настрой srcset с WebP
- Оптимизируй hero-изображение под метрику LCP
- Собери image sitemap для картинок из CDN

## Похожие
- [tigris-image-optimization](https://affpapa.org/nevibecode/skills/tigris-image-optimization.md) — скилл · 3100 установок
- [core-web-vitals](https://affpapa.org/nevibecode/skills/web-quality-skills-core-web-vitals.md) — скилл · 32000 установок
- [image](https://affpapa.org/nevibecode/skills/image.md) — скилл · 87300 установок
- [shopify-theme-optimization](https://affpapa.org/nevibecode/skills/shopify-theme-optimization.md) — скилл · 1100 установок
- [baoyu-compress-image](https://affpapa.org/nevibecode/skills/baoyu-compress-image.md) — скилл · 28200 установок
- [netlify-image-cdn](https://affpapa.org/nevibecode/skills/netlify-image-cdn.md) — скилл · 3000 установок

## Другие версии с тем же именем
- [image-optimization · aj-geddes](https://affpapa.org/nevibecode/skills/aj-geddes-image-optimization.md) — 656 установок

Из того же набора: [kostja94/marketing-skills](https://affpapa.org/nevibecode/by/kostja94/marketing-skills.md) — 120 карточек

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

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