Mini-Projecto · Kit de imagens multi-destino

Produzir e otimizar o mesmo visual para vários suportes

⏱ Duração estimada: 6 horas (≈ 4 aulas) ↗ Referencial SNQ

Índice

Contexto
Requisitos
Fases
Critérios de avaliação
Reflexão

Contexto

Cada aluno parte de uma imagem mestre (foto própria de boa qualidade ou composição da UC02140) e produz um kit de assets otimizados para 5 destinos: site (banner responsivo), Instagram (post + story), thumbnail, email e ícone/UI. Entrega o kit + um relatório de decisões com pesos medidos.

Requisitos

Funcionais

Mestre preservado (TIFF/PSD/PNG sem perdas).
5 destinos produzidos: banner web (com 2× / srcset), post 1:1, story 9:16, thumbnail 16:9, versão email leve.
Cada saída no formato e dimensão corretos, em sRGB, comprimida.
Tabela com peso antes/depois de cada otimização.
Snippet HTML <picture>/srcset para o banner.

Não-funcionais

Nomenclatura e organização consistentes (pasta por destino).
alt proposto para cada uso.
Direitos da imagem fonte respeitados.

Fases

Fase 1 · 1h

Mestre + plano

Escolher/preparar a imagem mestre; listar destinos e requisitos.

Mestre + tabela de requisitos por destino.

Fase 2 · 2h

Exportação por destino

Recortes/proporções corretas; formato/dimensão por destino.

5 destinos exportados (versões base).

Fase 3 · 1.5h

Otimização

Comprimir (Squoosh/TinyPNG); converter sRGB; remover metadados.
Medir peso antes/depois (DevTools).

Kit otimizado + tabela de pesos.

Fase 4 · 1h

Integração web

Snippet <picture>/srcset do banner; testar em mobile/desktop.

Página de teste + snippet.

Fase 5 · 0.5h

Relatório/defesa

Decisões (formato/qualidade) e ganhos de peso.

Relatório + apresentação curta.

Critérios de avaliação

Item	Peso
Formatos/dimensões corretos por destino	25%
Otimização (ganho real de peso)	25%
Responsivo (`srcset`/`picture` funcional)	20%
Organização/nomenclatura	10%
Mestre preservado + sRGB + alt	10%
Relatório/defesa	10%

Reflexão

Em meia página: qual destino exigiu mais compromissos (qualidade vs peso)? Quanto peso poupaste no total? Que diferença isso faz num site real com 50 imagens?