Produzir imagens bitmap para suportes digitais

Apresentação

UC00504 (25h · 2,25 pts) do curso Técnico de Multimédia. Foca a produção e otimização de imagens bitmap para suportes digitais — web, redes sociais, UI/app, ecrã. Continua a UC02236 (captação) e a UC02140 (edição): aqui o objetivo é entregar a imagem no formato, dimensão e peso certos para cada destino.

Suportes digitais e as suas exigências

Produzir para digital = adaptar a cada destino, não exportar tudo igual.

Pixel, densidade e ecrã

• No digital o que conta é a dimensão em pixéis; DPI/PPI é irrelevante para ecrã (importa só na impressão).
• Ecrãs HiDPI / Retina têm mais pixéis físicos por ponto CSS → uma imagem "1×" fica desfocada. Preparar versões 2× (e 3× para alguns telemóveis).
• Espaço de cor: usar sRGB (universal nos ecrãs). Imagens em Adobe RGB/ProPhoto aparecem dessaturadas em browsers que não gerem cor — converter para sRGB ao exportar.
• Proporção (aspect ratio) e safe areas variam por plataforma; respeitar para não cortar conteúdo importante.

Formatos de imagem

Recomendação 2026 para web: AVIF/WebP com fallback JPEG/PNG via <picture>.

Compressão

• Com perdas (lossy) — JPEG, WebP/AVIF lossy: descartam informação visualmente menos relevante. Controla-se pela qualidade (0-100). Qualidade ~75-85 costuma ser indistinguível do original com grande poupança.
• Sem perdas (lossless) — PNG, WebP lossless: preservam todos os pixéis; ficheiro maior. Ideal para gráficos com áreas planas, texto, transparência.
• Artefactos de compressão: blocos 8×8 (JPEG), banding (gradientes), ringing/halos junto a contornos, perda de detalhe. Surgem com qualidade demasiado baixa ou recompressões sucessivas.

Recomprimir um JPEG já comprimido degrada sempre mais (perdas acumulam). Trabalhar a partir de um mestre sem perdas.

Otimização para web

A imagem é, em média, o recurso mais pesado de uma página. Otimizar melhora velocidade, SEO e experiência (Core Web Vitals).

Passos:

1. Dimensionar à exibição real — se a imagem aparece a 400 px de largura, não servir 4000 px. (Servir grande e encolher com CSS é o erro nº 1.)
2. Escolher o formato adequado ao conteúdo (foto → JPEG/WebP; gráfico/transparência → PNG/WebP; ícone → SVG).
3. Ajustar a qualidade — testar 60→85% e escolher o ponto onde a perda deixa de ser visível.
4. Remover metadados (EXIF, perfis desnecessários) — reduz peso e protege privacidade.
5. Comprimir com ferramentas: Squoosh, TinyPNG, ImageOptim, cwebp, sharp.
6. Lazy loading (loading="lazy") para imagens abaixo da dobra.
7. Definir width/height (ou aspect-ratio) para evitar layout shift (CLS).

Imagens responsivas

Servir a resolução adequada a cada ecrã/viewport:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     alt="Descrição significativa"
     loading="lazy">

<picture> para formato moderno com fallback:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="..." width="800" height="533">
</picture>

O browser escolhe a melhor fonte que suporta.

Adaptar por plataforma

Redes sociais (dimensões orientativas — confirmar guias atuais)

Manter elementos críticos (texto, rostos) dentro da safe area (margens onde a plataforma não corta nem sobrepõe UI).

Assets de UI / app

• Exportar @1x, @2x, @3x para cobrir densidades; ou usar SVG (escala perfeita, leve) sempre que o gráfico for vetorial.
• Sprites/atlas para agrupar ícones e reduzir pedidos HTTP (menos relevante com HTTP/2, mas ainda usado).
• Nomenclatura consistente: icon-cart@2x.png, hero-mobile.webp.
• Exportar a partir do design (Figma/XD): slices, export settings por escala/formato.

Workflow de produção

1. Mestre em alta qualidade preservado (PSD/TIFF/PNG sem perdas).
2. Definir destinos e os requisitos de cada (formato, dimensões, peso-alvo).
3. Exportar uma versão por destino a partir do mestre (não recomprimir versões já comprimidas).
4. Otimizar/comprimir cada saída.
5. Testar em ecrã real (mobile + desktop, HiDPI), medir peso e tempo no DevTools → Network.
6. Organizar e nomear (pasta por destino, nomes descritivos).
7. Documentar as definições usadas (para consistência futura).

Acessibilidade e ética

• Texto alternativo (alt) descritivo em imagens informativas; alt="" em decorativas.
• Contraste suficiente se a imagem contém texto.
• Não usar imagem para conteúdo que devia ser texto (não pesquisável, não acessível, não responsivo).
• Direitos das imagens fonte (próprias ou licença que permita o uso); RGPD se houver pessoas identificáveis.

Apêndices

A · Checklist de exportação web

• [ ] Imagem dimensionada ao tamanho real de exibição (×2 para HiDPI).
• [ ] Formato adequado (foto→JPEG/WebP; gráfico→PNG/SVG/WebP).
• [ ] Qualidade testada (perda invisível).
• [ ] Convertida para sRGB.
• [ ] Metadados removidos.
• [ ] Comprimida (Squoosh/TinyPNG).
• [ ] width/height definidos + loading="lazy".
• [ ] srcset/<picture> se responsivo.
• [ ] alt significativo.
• [ ] Mestre original preservado.

B · Glossário

Artefacto. Defeito visível causado por compressão. CLS. Cumulative Layout Shift (salto de layout). HiDPI/Retina. Ecrã de alta densidade de pixéis. Lazy loading. Carregar a imagem só quando necessária. Lossy/Lossless. Compressão com / sem perdas. srcset/sizes. Atributos para imagens responsivas. sRGB. Espaço de cor padrão para ecrã/web.

C · Recursos

• Squoosh · squoosh.app — comprimir e comparar (Google).
• TinyPNG / TinyJPG · tinypng.com.
• web.dev/fast · otimização de imagens e performance.
• RespImageLint · validar imagens responsivas.