UC00504 · Produzir imagens bitmap para suportes digitais
Aulify · Componente Tecnológica

Produzir imagens bitmap para suportes digitais

Otimizar, exportar e adaptar imagem para ecrã e web
UC00504 · 25 horas · 2,25 pontos Nível 4 · T. Multimédia · Ano 1
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Resultados de aprendizagem

  1. Preparar imagens bitmap para suportes digitais.
  2. Escolher formato, compressão e dimensão.
  3. Otimizar para web (peso vs qualidade).
  4. Adaptar a ecrãs, densidades e responsivo.
Uma imagem linda mas de 8 MB afunda um site. Produzir para digital = qualidade no menor peso.
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Bloco 1 · Suportes digitais

Para onde vai a imagem

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Destinos e exigências

Suporte Exigência
Web leve, rápido, responsivo
Redes sociais dimensões/proporções por plataforma
App / UI múltiplas densidades (@1x @2x @3x)
Apresentação / ecrã resolução do ecrã, 16:9
Email muito leve, largura fixa

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

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Pixel, densidade, ecrã

  • O que conta no digital é a dimensão em pixéis, não DPI.
  • Ecrãs Retina/HiDPI → preparar 2× / 3× para nitidez.
  • Espaço de cor de ecrã: sRGB (padrão seguro).
  • Proporção (aspect ratio) e safe area por plataforma.
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Bloco 2 · Formatos

O formato certo

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Comparativo

Formato Tipo Quando
JPEG foto, com perdas fotografias
PNG sem perdas, alfa logos, UI, transparência
WebP moderno substitui JPG/PNG (≈ −30%)
AVIF mais moderno melhor compressão
GIF 256 cores, animação legado/memes
SVG vetorial ícones/logos (não bitmap)

Web 2026: WebP/AVIF com fallback JPG/PNG.

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Compressão

  • Com perdas (lossy) — JPEG/WebP: descarta info; controlar qualidade (~70-85% costuma ser invisível).
  • Sem perdas (lossless) — PNG/WebP: preserva tudo, ficheiro maior.
  • Artefactos — blocos, banding, halos em compressão excessiva.

Objetivo: o menor ficheiro sem degradação visível.

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Bloco 3 · Otimização

Qualidade no menor peso

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Boas práticas

  1. Dimensionar ao tamanho real de exibição (não servir 4000 px para 400 px).
  2. Escolher formato adequado ao conteúdo.
  3. Ajustar qualidade (testar 60→85%).
  4. Remover metadados desnecessários (EXIF).
  5. Comprimir (TinyPNG, Squoosh, ImageOptim).
  6. Lazy loading + dimensões definidas (evita layout shift).
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Responsivo

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width:600px) 400px, 800px"
     alt="..." loading="lazy">

Servir a resolução certa ao ecrã/viewport. <picture> para WebP + fallback.

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Bloco 4 · Redes e UI

Adaptar por plataforma

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Dimensões (orientativas)

Uso Proporção
Post Instagram 1:1 / 4:5
Story / Reel 9:16
Capa Facebook/LinkedIn ~16:9 (largo)
Thumbnail YouTube 16:9 (1280×720)
OG image (link preview) 1200×630

Confirmar sempre os guias atuais de cada plataforma.

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Assets para UI/app

  • Exportar @1x, @2x, @3x (ou SVG quando possível).
  • Sprites / ícones agrupados (menos pedidos).
  • Nomenclatura consistente (btn-play@2x.png).
  • Slices/export as a partir do design (Figma).
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Bloco 5 · Workflow

Da fonte ao asset

Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Fluxo de produção

  1. Mestre em alta qualidade (PSD/TIFF) preservado.
  2. Definir destinos (web, social, UI).
  3. Exportar versões por destino (formato/dimensão/qualidade).
  4. Otimizar/comprimir.
  5. Testar em ecrã real e medir peso (DevTools).
  6. Nomear e organizar (pasta por destino).
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais

Erros a evitar

  • Servir imagem enorme reduzida por CSS.
  • PNG para fotografias (peso desnecessário).
  • Esquecer alt e dimensões (acessibilidade/CLS).
  • Recomprimir um JPEG já comprimido (degrada).
  • Não preservar o mestre.
Aulify · Componente Tecnológica · Cursos Profissionais
UC00504 · Produzir imagens bitmap para suportes digitais
Aulify · UC00504 · Fim

Bonito e leve — é assim que se produz para digital.

📧 geral@aulify.pt
Aulify · Componente Tecnológica · Cursos Profissionais