Ficha 02 · Workflow de preparação de imagens para web e impressão

A — 2 (sRGB para web) B — 1 (CMYK para impressão offset) C — 5 (sRGB para digital — YouTube usa sRGB) D — 3 (Adobe RGB para arquivo fotográfico profissional — maior gamut) E — 4 (Lab é independente do dispositivo, usado como espaço de conversão)

Nota: A e C têm o mesmo espaço de cor (sRGB) — ambos correctos.

1. Criar o design em RGB
2. Verificar resolução (mín 300 PPI)
3. Adicionar sangria de 3mm
4. Converter para CMYK
5. Converter texto em outlines
6. Exportar em PDF/X

(Alguma flexibilidade na ordem: a sangria pode ser configurada no início; a conversão para CMYK pode ser feita antes do texto em outlines — ambas ordens são aceitáveis)

Por que acontece (7 pts): O amarelo RGB 255,220,0 é uma cor muito saturada que está fora do gamut CMYK. O espaço de cor RGB tem um gamut muito maior — especialmente em amarelos, certos verdes e alguns azuis e cianos. Quando se converte para CMYK, o sistema de gestão de cor mapeia a cor para o valor CMYK mais próximo dentro do gamut imprimível, mas isso resulta numa cor menos viva.

O que fazer (8 pts):

1. Aceitar a limitação se a cor CMYK é aceitável para o produto — muitas marcas de mel usam amarelos dourados que funcionam bem em CMYK.

2. Ajustar manualmente o valor CMYK após a conversão. Em vez de aceitar o resultado automático, definir C(0) M(10) Y(100) K(0) ou ajustar para maximizar o amarelo dentro do gamut. A cor não será idêntica ao ecrã mas pode ser mais vibrante que a conversão automática.

3. Usar tinta especial (Pantone/spot color) para garantir o amarelo exacto. Tintas especiais Pantone têm cores muito mais saturadas que o processo CMYK padrão. Mais caro (impressão de 5 tintas em vez de 4) mas garante consistência exacta.

4. Contactar a gráfica para discutir qual o melhor método para o tipo de impressão específico e o tipo de papel.

<picture>
  <!-- WebP para browsers modernos -->
  <source 
    type="image/webp"
    srcset="mel-eucalipto-400.webp 400w,
            mel-eucalipto-800.webp 800w,
            mel-eucalipto-1600.webp 1600w"
    sizes="(max-width: 480px) 100vw,
           (max-width: 1024px) 50vw,
           800px"
  >
  <!-- JPEG fallback para browsers antigos -->
  <source 
    type="image/jpeg"
    srcset="mel-eucalipto-400.jpg 400w,
            mel-eucalipto-800.jpg 800w,
            mel-eucalipto-1600.jpg 1600w"
    sizes="(max-width: 480px) 100vw,
           (max-width: 1024px) 50vw,
           800px"
  >
  <!-- Imagem base com dimensões definidas para prevenir CLS -->
  <img 
    src="mel-eucalipto-800.jpg"
    alt="Mel de eucalipto Sabores Autênticos — frasco de 250g"
    width="800"
    height="533"
    loading="lazy"
  >
</picture>

Pontos a verificar: - type="image/webp" e type="image/jpeg" indicam o formato (4 pts). - srcset com três tamanhos e descritores w (largura em píxeis) (3 pts). - sizes com media queries para indicar ao browser qual o tamanho de exibição (2 pts). - loading="lazy", width e height definidos (1 pt).

Dimensões: 1080 × 1350 px | Ratio: 4:5 (vertical). Conselho: o formato 4:5 ocupa mais espaço no feed do Instagram do que o quadrado — maior visibilidade. Garantir que o produto é o elemento principal e reconhecível mesmo em miniatura. Testar a imagem em 150×187px (tamanho de feed na app) para garantir legibilidade.

Dimensões: 1080 × 1920 px | Ratio: 9:16 (vertical). Conselho: respeitar as safe zones — manter todos os elementos importantes a mais de 250px do topo e do fundo (zona dos botões e do perfil). O texto e o produto devem estar na zona central (entre 250px e 1670px de altura). Usar o espaço superior para elemento visual impactante e inferior para CTA.

Dimensões: 1200 × 627 px | Ratio: ~1.91:1 (horizontal). Conselho: no LinkedIn, as imagens são muitas vezes vistas por profissionais em contexto de trabalho. A imagem deve ser clean, profissional e legível sem cor de fundo chamativa. Incluir logo da marca visível e texto mínimo sobreposto — o texto principal deve estar na descrição do post, não na imagem.

Dimensões: 1280 × 720 px | Ratio: 16:9. Conselho: o thumbnail é frequentemente visto em tamanho pequeno (120×68px em sugestões laterais). Usar elementos grandes e legíveis: produto em destaque, rosto humano se possível (rostos atraem cliques), texto de alto contraste máximo 5-6 palavras. Testar sempre reduzindo a imagem para 160×90px para verificar se é reconhecível.

Causa: a imagem foi carregada com dimensões ou ratio diferente do que o Facebook espera para posts com imagem. O Facebook tenta preencher o espaço disponível e redimensiona a imagem, causando distorção se o ratio original for incompatível.

Diagnóstico: verificar as dimensões originais do ficheiro.

Solução: preparar a imagem nas dimensões correctas para post do Facebook: 1200 × 630 px (ratio ~1.91:1) ou 1200 × 1200 px (1:1 para compatibilidade máxima). Se a imagem de produto tem um ratio diferente, cortar ou adicionar padding (fundo neutro) para ajustar ao ratio 1.91:1 ou 1:1 sem distorção.

Ferramenta: Canva tem templates com as dimensões correctas para cada plataforma — útil para evitar estes erros.