Conceber imagens para diferentes suportes e/ou aplicações

Apresentação

UC02248 (25h) capacita os formandos para preparar e exportar imagens correctamente para diferentes suportes e plataformas. Um mesmo ficheiro visual raramente serve para todos os destinos — cada suporte tem os seus requisitos técnicos de cor, resolução e formato.

1. Espaços cromáticos

1.1 RGB — o modelo aditivo

RGB (Red, Green, Blue) é o modelo de cor usado em dispositivos que emitem luz: ecrãs, monitores, câmaras, televisões.

Princípio aditivo: combinar luz vermelha, verde e azul ao máximo produz branco. Ausência de todas as cores produz preto. É o contrário da experiência intuitiva da pintura (modelo subtractivo).

Valores: cada canal vai de 0 a 255 (8 bits) ou 0 a 65535 (16 bits). R(255), G(0), B(0) = vermelho puro.

Aplicação: todo o conteúdo digital destinado a ecrãs (web, redes sociais, apps, apresentações, vídeo) deve ser preparado em RGB.

Gamut: o espaço RGB tem um gamut (gama de cores reproduzíveis) muito maior do que o CMYK. Há cores vibrantes em RGB que simplesmente não existem em CMYK — cores neon, azuis profundos, alguns cianos vivos.

1.2 CMYK — o modelo subtractivo

CMYK (Cyan, Magenta, Yellow, Key/Black) é o modelo de cor usado em impressão. As tintas absorvem comprimentos de onda de luz, e a mistura subtractiva resulta na cor percebida.

Princípio subtractivo: misturar as três cores (CMY) em 100% deveria produzir preto, mas na prática resulta num castanho escuro impuro — por isso existe o canal K (black/preto) separado.

Valores: percentagens de 0 a 100%. C(0) M(0) Y(0) K(0) = branco (papel em branco). C(0) M(0) Y(0) K(100) = preto.

Cobertura de tinta: a soma total dos quatro canais não deve exceder 280-320% (dependendo do papel e da gráfica). Excesso causa problemas de secagem e mistura de tintas.

Gamut CMYK: mais restrito que RGB. Não é possível reproduzir em impressão todas as cores de um ecrã.

1.3 Espaços de trabalho profissional

sRGB: o espaço de cor mais comum para conteúdo web e ecrãs de consumidor. Definido em 1996 pela HP e Microsoft. Representa cerca de 35% das cores visíveis pelo olho humano. Standard para web, redes sociais, apresentações.

Adobe RGB (1998): gamut maior que sRGB — abrange cerca de 50% das cores visíveis. Melhor para fotografia profissional e trabalho gráfico que vai para impressão de alta qualidade. Não deve ser usado para web — monitores de consumidor sem calibração exibem-no incorrectamente (saturação excessiva).

Display P3: espaço de cor para ecrãs modernos de alta gama (iPhone, Mac Pro Display XDR). Gamut ~25% maior que sRGB. Cada vez mais relevante para design digital premium.

ProPhoto RGB: gamut muito amplo, para arquivo fotográfico profissional. Nunca usar para output final sem conversão.

1.4 CIE Lab

CIE Lab (Lab*) é um espaço de cor independente do dispositivo que representa todas as cores visíveis pelo olho humano.

• L (Luminância): 0 = preto, 100 = branco.
• a: verde (-128) a vermelho (+127).
• b: azul (-128) a amarelo (+127).

Porque é independente do dispositivo, o Lab é usado como "língua franca" em conversões de cor — converter de RGB para CMYK frequentemente passa pelo Lab internamente.

1.5 Perfis ICC e gestão de cor

ICC (International Color Consortium): organização que define o standard de perfis de cor.

Perfil ICC: ficheiro que descreve precisamente como um dispositivo específico reproduz cores. Cada monitor, impressora e scanner tem o seu perfil.

Gestão de cor (Color Management): o sistema de conversão de cores entre dispositivos usando perfis ICC, para que o que se vê no ecrã corresponda ao que sai na impressora.

Workflow de gestão de cor: 1. Calibrar o monitor (usar colorímetro — X-Rite i1Display, Datacolor SpyderX). 2. Trabalhar num espaço de cor adequado ao destino (sRGB para web, Adobe RGB para impressão profissional). 3. Embutir o perfil ICC no ficheiro exportado. 4. Na gráfica: fornecer o ficheiro com perfil incorporado para que os RIPs possam converter correctamente.

Soft proofing: simular no ecrã como uma imagem vai aparecer quando impressa. Em Photoshop: View → Proof Colors (com o perfil da impressora seleccionado). Essencial antes de enviar para gráfica.

2. Resolução e dimensão

2.1 PPI vs DPI

PPI (Pixels Per Inch): resolução de um ficheiro digital. Número de píxeis por polegada linear num ficheiro de imagem. Relevante para impressão — determina a qualidade quando o ficheiro é impresso num tamanho físico específico.

DPI (Dots Per Inch): tecnicamente, resolução de um dispositivo de saída (impressora). Uma impressora a laser a 1200 DPI imprime 1200 pontos de tinta por polegada. Na prática, DPI é frequentemente usado como sinónimo de PPI em contexto de preparação de ficheiros.

PPI de ecrã: a resolução de um ecrã é definida pela densidade de píxeis físicos. Um MacBook Pro Retina tem 227 PPI; um iPhone 14 tem 460 PPI. Ecrãs de alta densidade exibem imagens a 2× (retina) ou 3× dos CSS pixels.

2.2 Resolução para impressão

A qualidade de impressão depende do PPI do ficheiro no tamanho de impressão final.

Standard de impressão offset (revistas, livros, cartões): 300 PPI.

Impressão de grande formato (banners, outdoors): 72-150 PPI. A distância de visualização é muito maior, por isso a resolução aparente pode ser menor.

Jato de tinta doméstico: 150-300 PPI para qualidade excelente.

Cálculo de tamanho de ficheiro necessário:

Pixels = (Tamanho_cm / 2.54) × PPI

Exemplos: - Cartão de visita 9×5cm a 300 PPI = (9/2.54 × 300) × (5/2.54 × 300) = 1063 × 591 px - A4 (21×29.7cm) a 300 PPI = 2480 × 3508 px - Outdoor 6m×3m a 100 PPI = 23622 × 11811 px (atenção ao tamanho do ficheiro!)

2.3 Upsampling e downsampling

Downsampling (reduzir): remover píxeis — seguro, sempre melhora a compressão e o tempo de carregamento.

Upsampling (ampliar): criar píxeis novos por interpolação — resulta em perda de nitidez. O software "inventa" informação. Para web: usar imagens nativas se possível. Para impressão: nunca imprimir a resolução inferior a 200 PPI após upsampling.

AI upscaling: ferramentas modernas (Photoshop Generative Expand, Topaz Gigapixel AI, Adobe Firefly) usam IA para upsampling de muito melhor qualidade. Podem ampliar imagens 2-4× com resultados aceitáveis.

3. Formatos e compressão

3.1 JPEG

JPEG (Joint Photographic Experts Group) usa compressão com perdas baseada em DCT (Discrete Cosine Transform).

Como funciona: a imagem é dividida em blocos 8×8 px. Cada bloco é transformado em frequências (informação de luminância e cor). As frequências de alta resolução (detalhes finos) são reduzidas ou eliminadas conforme o nível de qualidade.

Qualidade de exportação: escala de 0-100 (ou 0-12 no Photoshop). Qualidade 70-85 é suficiente para web sem perda perceptível. Qualidade 90+ para impressão de qualidade.

Artefactos de compressão: a baixa qualidade, aparecem "quadrículas" (blockiness) e halos em bordas de alto contraste. Características inconfundíveis da compressão JPEG agressiva.

Generation loss: cada vez que um JPEG é aberto e guardado de novo, perde qualidade adicional. Após 10+ saves sucessivos, a degradação é visível. Guardar sempre o original em formato não destrutivo (TIFF, PSD, etc.).

JPEG XL: novo standard (2021). Melhor compressão, suporte a transparência, lossless. Ainda não universal nos browsers.

3.2 PNG

PNG (Portable Network Graphics) usa compressão sem perdas (lossless). Não há degradação ao guardar. Suporta canal alfa (transparência de 0-255).

PNG-8: até 256 cores (indexed color). Para ícones e gráficos simples com cores planas. Tamanho muito pequeno.

PNG-24: cor completa (16 milhões de cores) com canal alfa. Para logos, ícones, screenshots com transparência.

Limitações: para fotografias, o PNG produz ficheiros muito maiores que o JPEG sem benefício visual perceptível. Usar JPEG ou WebP para fotografias.

3.3 WebP

WebP foi desenvolvido pela Google para substituir JPEG e PNG na web. Suporta: - Compressão lossy (para fotografias): 25-34% mais pequeno que JPEG equivalente. - Compressão lossless (para gráficos): 26% mais pequeno que PNG equivalente. - Transparência (alfa) em ambos os modos. - Animação (substitui GIF).

Suporte: todos os browsers modernos (Chrome, Firefox, Safari 14+, Edge). Para compatibilidade antiga, usar <picture> com fallback JPEG/PNG.

3.4 TIFF

TIFF (Tagged Image File Format) é o formato padrão para arquivo e pré-impressão profissional.

Vantagens: suporte a compressão lossless, múltiplos canais (CMYK, LAB), múltiplas camadas (TIFF multi-página), perfis ICC incorporados.

Uso: ficheiros de trabalho de alta qualidade, arquivo fotográfico, entrega a gráficas (alternativa ao PDF).

Desvantagem: ficheiros muito grandes. Um A4 a 300 PPI em CMYK TIFF pode ter 25-50MB.

3.5 SVG

SVG (Scalable Vector Graphics) é um formato vectorial baseado em XML. Descreve formas matemáticas, não píxeis.

Vantagens: - Escalável infinitamente sem perda de qualidade. - Tamanho pequeno para gráficos simples. - Editável em código (cores, dimensões). - Animável com CSS/JavaScript. - Indexável por motores de busca.

Limitações: não adequado para fotografias (usa rasterização interna, perde as vantagens). Para fotografias, usar JPEG/WebP.

4. Imagem para web

4.1 Optimização

A optimização de imagens é uma das intervenções com maior impacto na performance de um website.

Passos de optimização: 1. Redimensionar para o tamanho real de exibição. Não enviar uma imagem 4000px para ser exibida a 800px. 2. Converter para WebP (para browsers modernos) ou comprimir JPEG com qualidade 70-85%. 3. Comprimir com ferramenta dedicada: Squoosh (web, gratuito), TinyPNG/TinyJPEG (web), imagemin (CLI, build process). 4. Servir diferentes tamanhos para diferentes viewports (responsive images). 5. Usar CDN com optimização automática de imagens (Cloudinary, Imgix, Vercel Image Optimization).

4.2 Responsive images

O atributo srcset permite especificar múltiplas versões de uma imagem para que o browser escolha a mais adequada:

<img 
  src="hero.jpg"
  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 acessível"
  width="800"
  height="450"
  loading="lazy"
>

O elemento <picture> permite ainda mais controlo, incluindo suporte a formatos alternativos:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Descrição" width="800" height="450">
</picture>

4.3 Lazy loading

loading="lazy" instrui o browser a carregar a imagem apenas quando está prestes a entrar no viewport. Reduz significativamente o tamanho dos dados carregados no carregamento inicial.

Não usar lazy loading: na imagem mais acima da dobra (above the fold) — a que é visível imediatamente. Usar loading="eager" ou omitir o atributo.

4.4 Core Web Vitals e imagens

LCP (Largest Contentful Paint): tempo até que o maior elemento visível seja renderizado. Frequentemente uma imagem de destaque. Optimizações: - Pré-carregar a imagem LCP: <link rel="preload" as="image" href="hero.webp">. - Usar fetchpriority="high" na imagem LCP. - Servir a imagem em WebP comprimido.

CLS (Cumulative Layout Shift): quando uma imagem carrega e empurra o conteúdo. Prevenção: - Sempre definir width e height na tag <img> (ou usar aspect-ratio em CSS). - Reservar espaço com CSS antes de a imagem carregar.

5. Imagem para impressão

5.1 Requisitos técnicos

Espaço de cor: CMYK. Converter de RGB para CMYK no Photoshop usando Edit → Convert to Profile. Escolher o perfil CMYK adequado (geralmente ISO Coated v2 para Europa).

Resolução: mínimo 300 PPI no tamanho final de impressão. Verificar em Photoshop: Image → Image Size.

Formato de entrega: PDF/X (standard de impressão). PDF/X-1a: mais restritivo, sem transparências, perfis incorporados. PDF/X-4: mais moderno, suporta transparências e camadas.

Fontes: incorporar todas as fontes ou converter em outlines (Create Outlines no Illustrator). Evita problemas com fontes em falta na gráfica.

5.2 Sangria (bleed) e margens de segurança

Sangria (bleed): extensão da imagem ou cor de fundo para além dos limites de corte. Standard: 3mm em todos os lados (alguns destinos requerem 5mm).

Porque é necessária: os equipamentos de corte têm uma tolerância de ±1-2mm. Sem sangria, se o corte for ligeiramente deslocado, aparecem bordas brancas indesejadas.

Zona de segurança (safe zone): margem interior onde os elementos importantes (texto, logos) devem ficar. Geralmente 3-5mm dentro da linha de corte.

5.3 Provas de cor

Prova digital (soft proof): simulação no ecrã de como a impressão vai aparecer. Requer monitor calibrado e perfil da impressora.

Prova física (hard proof): impressão de teste realizada pela gráfica antes do trabalho completo. Mais fiável — mostra a cor real no papel real com as tintas reais.

6. Imagem para vídeo e redes sociais

6.1 Especificações de redes sociais (2026)

Instagram: - Feed quadrado: 1080×1080px (1:1). - Feed retrato: 1080×1350px (4:5) — melhor aproveitamento do ecrã. - Stories/Reels: 1080×1920px (9:16). - Safe zone Stories: manter elementos críticos a 250px do topo e do fundo (zona dos botões).

YouTube: - Thumbnail: 1280×720px (16:9), máx 2MB, JPG/PNG/GIF. - Channel art: 2560×1440px (área segura: 1546×423px no centro).

TikTok: 1080×1920px (9:16).

LinkedIn: - Post com imagem: 1200×627px (1.91:1). - Banner perfil pessoal: 1584×396px.

Facebook: - Post com imagem: 1200×630px. - Event cover: 1920×1080px.

6.2 Imagem para vídeo

Formatos de pixel (PAR): sempre usar píxeis quadrados (PAR 1:1) para grafismos de vídeo.

Espaço de cor: RGB. O vídeo usa sempre RGB (YUV internamente, mas outputs em RGB).

Resolução de exportação: - Full HD: 1920×1080px. - 4K UHD: 3840×2160px. - Vertical (social): 1080×1920px.

PNG com alfa: para grafismos a colocar sobre vídeo (lower thirds, overlays, logos). Transparência preservada na composição.

Safe zones para TV: action safe = 90% do frame (5% de cada lado); title safe = 80% do frame (10% de cada lado). Elementos críticos devem estar dentro do title safe.

Glossário

Adobe RGB: espaço de cor com gamut maior que sRGB. Para fotografia profissional.

Bleed (sangria): extensão do conteúdo para além dos limites de corte. Standard: 3mm.

CIE Lab: espaço de cor independente do dispositivo. Representa todas as cores visíveis.

CLS: Cumulative Layout Shift — métrica de estabilidade visual. Core Web Vital.

CMYK: modelo de cor subtractivo para impressão.

ContentDelivery Network (CDN): rede distribuída de servidores para entrega rápida de assets.

DPI: Dots Per Inch — resolução de impressão.

Gamut: gama total de cores reproduzíveis por um dispositivo ou espaço de cor.

ICC: International Color Consortium — standard de perfis de cor.

LCP: Largest Contentful Paint — tempo de carregamento do maior elemento visível. Core Web Vital.

Lazy loading: carregamento diferido de imagens.

PDF/X: standard ISO de PDF para impressão profissional.

PPI: Pixels Per Inch — resolução digital de um ficheiro de imagem.

RGB: modelo de cor aditivo para ecrãs.

Safe zone: área interior ao frame onde se mantêm elementos críticos.

Soft proof: simulação no ecrã da aparência de uma impressão.

sRGB: espaço de cor standard para web e ecrãs de consumidor.

SVG: Scalable Vector Graphics — formato vectorial para web.

WebP: formato de imagem moderno da Google para web.

srcset: atributo HTML para definir imagens responsivas.