Passo-a-passo detalhado do skill, referenciando as fases cognitivas:
1SENSE — Inventário completo de imagens
Listar recursivamente todas as imagens do projeto com `find . -type f -name "*.jpg" -o -name "*.png"`
Medir tamanho: `identify -format "%f: %wx%h %b\n" *` (ImageMagick) ou exiftool
Identificar imagens críticas para LCP (geralmente o maior elemento above-the-fold)
2CONTEXTUALIZE — Mapear uso e contexto
Verificar onde cada imagem é renderizada no HTML/JSX (hero, card, avatar, ícone)
Definir breakpoints do projeto (Tailwind defaults: 640/768/1024/1280/1536)
Verificar headers de Accept do servidor para confirmar suporte AVIF/WebP
3HYPOTHESIZE — Selecionar formato e dimensões ideais
AVIF para fotos (50% menor que JPEG) → WebP fallback → JPEG original
SVG para logotipos e ícones (otimizar com SVGO para remover metadata)
GIF → WebM/MP4 (90% menor, melhor qualidade e 60fps suportados)
4RECOMMEND — Gerar configuração e código
```html
<picture>
<source srcset="hero.avif 1x, hero@2x.avif 2x" type="image/avif">
<source srcset="hero.webp 1x, hero@2x.webp 2x" type="image/webp">
<img src="hero.jpg" width="1920" height="1080" alt="Hero banner"
fetchpriority="high" loading="eager" decoding="sync">
</picture>
```
Gerar script sharp para automatizar no build: AVIF (quality 60-75) + WebP (quality 75-85)
5ACT — Executar otimização
```bash
npx sharp-cli -i "src/images/*.{jpg,png}" -o "public/images/"
--avif --quality 70
--webp --quality 80
--resize 1920
```
Adicionar `sizes` e srcset responsivo para cada breakpoint
6EVALUATE — Medir resultado
Calcular economia: tamanho antes vs. depois por formato
Verificar que LCP image tem `fetchpriority="high"` e preload tag no `<head>`
Rodar Lighthouse para confirmar impacto no LCP score
7REFLECT — Validação final e telemetria
Confirmar qualidade visual aceitável (SSIM > 0.95 ou validação manual)
Verificar que nenhuma imagem above-the-fold usa `loading="lazy"`
Reportar telemetria via mcp-skillschain com economia percentual nas notas
SynapticSkills