Ficha 01 · Espaços cromáticos, resolução e formatos

1. F — RGB é para ecrãs e digital. Para impressão offset, usar CMYK.

2. V — WebP suporta alfa e é 25-34% mais pequeno que JPEG equivalente.

3. F — JPEG não suporta transparência. Para logos com fundo transparente: usar PNG ou WebP.

4. V — sRGB é o standard universal para web.

5. V — cada save de JPEG aplica nova compressão lossy (generation loss).

6. F — impressão profissional requer 300 PPI. 72 PPI é resolução de ecrã (histórico).

7. V — SVG usa matemática vectorial, não píxeis.

8. V — lazy loading adia o carregamento até ao momento em que a imagem vai ser visível.

9. F — "sangria" (bleed) é a extensão do conteúdo além dos limites de corte (3-5mm). Não tem relação com quantidade de tinta.

10. V — sem dimensões definidas, o browser não reserva espaço e o layout desloca quando a imagem carrega.

Sangria: 3mm = 0.3cm em cada lado → adicionar 0.6cm a cada dimensão. Dimensão total com sangria: (8.5 + 0.6) × (5.5 + 0.6) = 9.1cm × 6.1cm

Largura em px: (9.1 / 2.54) × 300 = 3.583 × 300 = ~1075 px Altura em px: (6.1 / 2.54) × 300 = 2.402 × 300 = ~720 px

Tamanho com sangria: 1075 × 720 px (aprox.)

Largura: (21 / 2.54) × 300 = 8.267 × 300 = 2480 px Altura: (29.7 / 2.54) × 300 = 11.69 × 300 = 3508 px

Tamanho: 2480 × 3508 px (equivalente a ~25MB em TIFF CMYK sem compressão)

YouTube thumbnail standard: 1280 × 720 px (16:9, formato HD). Nota: PPI não é relevante para imagens digitais — só importa para impressão. O YouTube exige mínimo 1 megapixel (1280×720 = 921 600 px ≈ 0.9 MP, mas é o standard recomendado).

Instagram Stories: 1080 × 1920 px, ratio 9:16 (vertical). Safe zone (zona segura para elementos críticos): manter conteúdo a pelo menos 250px do topo e do fundo para evitar que seja coberto pelos botões do Instagram.

Largura: (600 / 2.54) × 72 = 236.2 × 72 = ~17 008 px Altura: (300 / 2.54) × 72 = 118.1 × 72 = ~8 504 px

Tamanho: 17 008 × 8 504 px — ficheiro muito grande! Em prática, outdoors de grande formato trabalham-se frequentemente a 1:10 (escala) ou o PPI é reduzido para 25-50 DPI (visto de longe).

SVG (se o logo for vectorial) — infinitamente escalável, tamanho pequeno, suporte universal em browsers modernos. Se o logo não estiver disponível em vectorial: PNG-24 com canal alfa.

Não usar JPEG (sem transparência) nem GIF (apenas 1 bit de transparência, qualidade baixa).

WebP para browsers modernos (com fallback JPEG para compatibilidade) ou JPEG a 80-85% de qualidade. A fotografia tem muita informação de cor e tom — formatos lossless (PNG, TIFF) seriam desnecessariamente grandes sem benefício visual perceptível.

SVG se for vectorial (texto e formas exactas, qualidade infinita, tamanho pequeno). Se for raster (pixelizada): PNG lossless preserva as bordas nítidas das áreas de cor plana. JPEG criaria artefactos visíveis nas bordas de alto contraste.

TIFF lossless (ou PSD/RAW). Preserva toda a informação sem perda. Para arquivo de longo prazo, o TIFF é o standard universal mais seguro (independente de software proprietário).

SVG animado com CSS/SMIL — a melhor opção (pequeno, nítido, acessível, indexável). Alternativa: WebP animado ou CSS animation com sprite. Evitar GIF — qualidade inferior, sem transparência real, tamanho maior que WebP equivalente.

Workflow de optimização:

1. Audit (5 pts): - Verificar as dimensões reais de exibição de cada imagem (DevTools → Elements → inspeccionar cada <img> e ver naturalWidth vs clientWidth). - Identificar imagens sobredimensionadas (ex: imagem 4000px exibida a 800px CSS pixels).

2. Redimensionar (5 pts): - Redimensionar cada imagem para o tamanho real de exibição (×2 para retina displays). - Ferramenta: Squoosh (web), Photoshop Export for Web, Sharp (npm).

3. Converter para WebP (5 pts): - Converter todas as fotografias para WebP a qualidade 75-80%. - WebP produz ficheiros 25-34% mais pequenos que JPEG equivalente. - Usar <picture> com fallback JPEG para browsers antigos.

4. Implementar responsive images (3 pts): - Usar srcset para servir tamanhos diferentes para diferentes viewports. - Móvel: imagem 400px; tablet: 800px; desktop: 1200px.

5. Lazy loading (2 pts): - Adicionar loading="lazy" a todas as imagens abaixo da dobra. - Usar loading="eager" ou preload para a imagem mais importante (LCP).

Resultado esperado: 4.5MB → 400-600KB (redução de 85-90%).

Problema 1 — Sem sangria (7 pts): O documento deve ter 3mm de sangria em todos os lados além do formato de corte. No Photoshop/Illustrator, alterar o tamanho do artboard/canvas para incluir os 3mm, e extender o fundo e elementos gráficos periféricos até à linha de sangria. Na exportação PDF, activar a opção "Bleed" com 3mm.

Problema 2 — Fontes não incorporadas (6 pts): Duas soluções: (a) No InDesign/Illustrator: ao exportar para PDF, activar "Embed Fonts" nas opções de exportação. (b) Converter todo o texto em outlines/curvas (Type → Create Outlines no Illustrator; Text → Create Outlines no InDesign). A segunda opção é mais segura pois elimina completamente a dependência de fontes, mas o texto deixa de ser editável.

Problema 3 — Espaço de cor RGB (7 pts): Converter de RGB para CMYK em Photoshop: Edit → Convert to Profile. Escolher o perfil CMYK adequado ao tipo de impressão (geralmente "ISO Coated v2 300%" para impressão offset europeia). Verificar a pré-visualização (soft proof) para confirmar que as cores não mudaram drasticamente — algumas cores RGB não têm equivalente CMYK e vão inevitavelmente perder saturação. Ajustar manualmente se necessário. Exportar em PDF/X-1a ou PDF/X-4.