Índice

1. Espaços cromáticos
2. Resolução e dimensão
3. Formatos e compressão
4. Imagem para web
5. Imagem para impressão
6. Imagem para vídeo e redes sociais

RGB vs CMYK

RGB (Red, Green, Blue): modelo aditivo. A luz combina-se para criar branco. Para ecrãs, câmaras, web.

• 0,0,0 = preto (ausência de luz).
• 255,255,255 = branco (luz máxima).
• Gama de cores (gamut) maior que CMYK.

CMYK (Cyan, Magenta, Yellow, Key/Black): modelo subtractivo. Tintas absorvem luz. Para impressão.

• 0,0,0,0 = branco (papel em branco).
• 100,100,100,100 = preto "rico" (muito tinta).
• Gamut menor que RGB — nem todas as cores ecrã são reproduzíveis em impressão.

Lab e perfis ICC

CIE Lab (Lab):* espaço de cor independente do dispositivo. Representa todas as cores visíveis pelo olho humano. Usado como "espaço intermediário" em conversões de cor.

• L = luminosidade (0-100).
• a = verde vermelho.
• b = azul amarelo.

Perfis ICC: ficheiros que descrevem como um dispositivo (monitor, impressora) reproduz cores. A gestão de cor usa estes perfis para converter com precisão entre dispositivos.

sRGB: o perfil padrão para web e ecrãs de consumidor. Exportar imagens para web sempre em sRGB.

Adobe RGB: gamut maior, melhor para fotografia profissional e impressão. Não usar para web — monitores de consumidor não o exibem correctamente.

PPI vs DPI

PPI (Pixels Per Inch): resolução de um ficheiro digital ou ecrã. Número de píxeis por polegada linear.

DPI (Dots Per Inch): resolução de impressão. Número de pontos de tinta por polegada. Termo frequentemente usado (incorrectamente) como sinónimo de PPI.

Para ecrãs: a resolução é definida em píxeis totais (1920×1080, 3840×2160). O PPI depende do tamanho físico do ecrã.

Para impressão: o PPI do ficheiro determina a qualidade de impressão num dado tamanho físico.

Resolução para impressão

Fórmula: Tamanho em cm / 2.54 × PPI = Pixels necessários.

Exemplo: Imagem de 10cm × 10cm a 300 PPI = (10/2.54) × 300 = ~1181 × 1181 px.

Mapa de decisão de formatos

JPEG — compressão com perdas

O JPEG comprime imagens eliminando informação que o olho humano supostamente não detecta.

Qualidade vs tamanho: qualidade 80-90% produz imagem visualmente idêntica ao original a 50-70% do tamanho.

Problema do JPEG: cada vez que guardas uma imagem JPEG, há perda de qualidade adicional (generation loss). Nunca usar JPEG como formato de trabalho — usar TIFF ou PSD. Exportar para JPEG apenas na entrega final.

Artefactos de compressão JPEG: quadrículas visíveis (blockiness) e halos em bordas de alto contraste, especialmente com qualidade baixa (<60%).

Optimização de imagens para web

Imagens são tipicamente o maior contribuidor para o tamanho de uma página web. Optimização é crítica para performance e Core Web Vitals.

Processo de optimização:

1. Redimensionar para o tamanho real de exibição (não usar CSS para reduzir uma imagem de 4000px exibida a 800px).
2. Escolher o formato correcto (WebP > JPEG para fotografias; SVG para logos e ícones).
3. Comprimir com ferramentas como Squoosh, TinyPNG, ou CLI (imagemin).
4. Servir em múltiplos tamanhos com srcset para different viewports.

Responsive images e srcset

O atributo srcset permite ao browser escolher a imagem mais adequada para cada dispositivo:

<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Descrição da imagem"
  loading="lazy"
>

loading="lazy": carregamento diferido — a imagem só carrega quando está prestes a entrar no viewport. Melhora o tempo de carregamento inicial.

Core Web Vitals relacionados com imagens

LCP (Largest Contentful Paint): tempo até que o maior elemento visível carregue. Frequentemente uma imagem. Target: < 2.5s.

CLS (Cumulative Layout Shift): deslocamento de layout quando imagens carregam sem dimensões definidas. Target: < 0.1. Solução: sempre definir width e height nas imagens.

Ferramentas: Google PageSpeed Insights, GTmetrix, Chrome DevTools (Lighthouse).

Preparação para impressão

Verificação antes de enviar para gráfica:

1. Espaço de cor: CMYK (converter de RGB se necessário).
2. Resolução: mínimo 300 PPI no tamanho final de impressão.
3. Sangria (bleed): 3-5mm adicionais em todos os lados para corte. Evita bordas brancas se o corte não for perfeito.
4. Zona de segurança: manter elementos importantes a 3-5mm das margens de corte.
5. Fontes: incorporar ou converter em curvas (outlines).
6. Formato de entrega: PDF/X-1a ou PDF/X-4 (standard de impressão).

Sangria e zona de segurança

┌─────────────────────────────────┐  ← Sangria (formato final + 3mm)
│  ┌────────────────────��──────┐  │  ← Linha de corte (formato final)
│  │  ┌─────────────────────┐  │  │  ← Zona de segurança (+3mm interior)
│  │  │                     │  │  │
│  │  │   ÁREA DE CONTEÚDO  │  │  │
│  │  │                     │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Fundo que vai até à borda: deve estender-se até à sangria.
Textos e elementos importantes: devem ficar dentro da zona de segurança.

Aspect ratios e resoluções por plataforma

Imagem para vídeo

Formatos de pixel (PAR): em vídeo, os píxeis podem ser quadrados (1:1) ou rectangulares. Sempre usar píxeis quadrados para evitar distorção.

Safe zones: para imagens que aparecem na televisão, manter conteúdo dentro da action safe zone (90% do frame) e texto dentro da title safe zone (80%).

Formatos de exportação para grafismos de vídeo:

• PNG com transparência (alfa) para logos e lower thirds.
• JPEG para imagens de fundo sem transparência.
• Sequências PNG para animações (exportadas do After Effects).