image-optimization · aj-geddes — скилл для Claude Code: сжатие картинок для веба
Скилл подсказывает агенту, как сжать изображения и перевести их в современные форматы. Пригодится перед деплоем, когда страница тормозит на мобильных сетях.
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-codeЧто делает image-optimization
Скилл описывает выбор формата под задачу. Для фотографий — JPEG с потерей качества, для иконок и скриншотов — PNG, для простой графики — SVG. Отдельно разобран WebP: он даёт выигрыш в размере по сравнению с JPEG и PNG, но нужен фолбэк через элемент <picture>.
Внутри — краткий стартовый пример с командами convert, optipng и cwebp, а подробные реализации лежат в четырёх справочниках каталога references/: сжатие и форматы, адаптивные изображения, процесс оптимизации, мониторинг. Агенту остаётся открыть нужный файл и применить шаги к вашему проекту.
Скилл не запускает оптимизацию сам и не проверяет, установлены ли утилиты. Если в системе нет ImageMagick, PNGQuant или cwebp, команды из примеров просто не выполнятся — это повод проверить окружение до того, как просить агента сжимать ассеты.
Какие задачи решает
- сжать фотографии для веба без заметной потери качества
- выбрать формат под иконки, скриншоты и логотипы
- перевести картинки в WebP и оставить фолбэк для старых браузеров
- разобрать адаптивные изображения с разными размерами под экраны
- пройтись по ассетам перед выкладкой на прод
Примеры запросов агенту
- пройдись по папке
public/imagesи предложи, что сжать и во что перевести - подбери формат и команду для логотипа и иконок в
assets/ - покажи, как настроить адаптивные изображения для карточки товара
Как установить image-optimization
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-code2Вручную: положить файлы
~/.claude/skills/image-optimization/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/image-optimization/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a codex2Вручную: положить файлы
.agents/skills/image-optimization/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a cursor2Вручную: положить файлы
.cursor/skills/image-optimization/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install aj-geddes/useful-ai-prompts image-optimization2Вручную: положить файлы
.github/skills/image-optimization/SKILL.md1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a gemini-cli2Командой платформы
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/image-optimizationВручную: положить файлы
.devin/skills/image-optimization/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о image-optimization
Как установить image-optimization в Claude?
Выполните npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/image-optimization/SKILL.md.
Что делает image-optimization?
Помогает агенту выбрать формат и способ сжатия изображений для веба, а также настроить адаптивную отдачу картинок под разные экраны.
Нужны ли внешние утилиты для работы скилла?
В примерах используются ImageMagick, PNGQuant, OptiPNG и cwebp. Скилл сам их не ставит, поэтому проверьте, что нужная утилита есть в системе.
Исходный текст
SKILL.md · MIT
--- name: image-optimization description: > Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading. --- # Image Optimization ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-guides) - [Best Practices](#best-practices) ## Overview Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks. ## When to Use - Website optimization - Responsive image implementation - Performance improvement - Mobile experience enhancement - Before deployment ## Quick Start Minimal working example: ```yaml Format Selection: JPEG: Best for: Photographs, complex images Compression: Lossy (quality 70-85) Size: ~50-70% reduction Tools: ImageMagick, TinyJPEG Command: convert image.jpg -quality 75 optimized.jpg PNG: Best for: Icons, screenshots, transparent images Compression: Lossless Size: 10-30% reduction Tools: PNGQuant, OptiPNG Command: optipng -o3 image.png WebP: Best for: Modern browsers (90% support) Compression: 25-35% better than JPEG/PNG Fallback: Use <picture> element Tools: cwebp Command: cwebp -q 75 image.jpg -o image.webp SVG: Best for: Icons, logos, simple graphics // ... (see reference guides for full implementation) ``` ## Reference Guides Detailed implementations in the `references/` directory: | Guide | Contents | |---|---| | [Image Compression & Formats](references/image-compression-formats.md) | Image Compression & Formats | | [Responsive Images](references/responsive-images.md) | Responsive Images | | [Optimization Process](references/optimization-process.md) | Optimization Process | | [Monitoring & Best Practices](references/monitoring-best-practices.md) | Monitoring & Best Practices | ## Best Practices ### ✅ DO - Follow established patterns and conventions - Write clean, maintainable code - Add appropriate documentation - Test thoroughly before deploying ### ❌ DON'T - Skip testing or validation - Ignore error handling - Hard-code configuration values
© aj-geddes · MIT · aj-geddes/useful-ai-prompts
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — image-optimization от других авторов.
