⚡ Cola rápida — o processo completo em 4 passos
1 · Converter para sRGB
→
2 · Redimensionar para 1920 px
→
3 · Crop 3:2 (1920 × 1280 px)
→
4 · Exportar WebP 82
→
5 · Validar a 100% e 50%
01 — Fundamento
A única coisa que importa para a web é a largura em pixels
Imagens de impressão costumam ser criadas em 300 dpi — resolução necessária para papel, mas completamente irrelevante para telas. O que define a qualidade de uma imagem na web é quantos pixels ela tem na largura, não o valor de dpi.
O segundo ponto crítico é o espaço de cor. Impressão usa CMYK ou Adobe RGB. Monitores usam sRGB. Se você não converter, as cores aparecem dessaturadas, apagadas ou com matizes errados no navegador — e esse é um problema que não se percebe dentro do Photoshop.
Regra de ouro: ao terminar um projeto de impressão, antes de qualquer outra coisa, converta o espaço de cor para sRGB. Só depois ajuste o tamanho.
02 — Tamanho padrão
Um único tamanho para todas as imagens
Todas as imagens exportadas para o site seguem um único padrão de largura. Não importa o tipo de peça — página impressa, mockup, detalhe, etapa de processo. A decisão sobre como cada imagem será usada (destaque, grid, galeria) acontece na hora de montar o case no WordPress, não durante a exportação.
Largura padrão para todas as imagens. A altura é sempre 1280 px, seguindo a proporção 3:2. O valor de dpi é irrelevante e pode ser ignorado.
Mínimo aceitável em caso de arquivo legado ou limitação da arte original: 1600 × 1067 px.
Templates Photoshop: para cada tipo de entregável (tela de landing page, página impressa, embalagem, sinalização etc.) haverá uma template disponível. O designer posiciona a arte na área de composição — já configurada no tamanho e proporção corretos — e exporta diretamente, sem precisar pensar em dimensões.
03 — Proporção
Todas as imagens em 3:2 — 1920 × 1280 px
A proporção 3:2 garante que todas as imagens se comportem de forma consistente em qualquer área do site — destaque, grid ou galeria. O site usa object-fit: cover para exibir as imagens, o que significa que ele sempre preenche o espaço disponível cortando as bordas quando necessário. Por isso, o ponto focal da imagem deve sempre estar ao centro.
Regra de composição: ao posicionar a arte dentro do canvas, certifique-se de que o elemento visual mais importante está no centro — nunca encostado nas bordas. Isso garante que o crop responsivo nunca corte o que importa.
Dimensões finais
Formato ligeiramente mais largo que alto — equilibra bem composições horizontais e verticais sem parecer nem letterbox nem quadrado.
Como fazer o crop no Photoshop
Após redimensionar para 1920 px de largura (Passo 3 do processo completo), a imagem provavelmente terá uma altura diferente de 1280 px. O crop a seguir corrige isso.
a
Selecionar a ferramenta Crop (C)
Pressione C no teclado ou clique no ícone de crop na barra de ferramentas. Na barra de opções superior, localize os campos de proporção.
b
Definir a proporção como 3:2
No menu dropdown da barra superior (onde pode estar escrito "Ratio" ou "W × H × Resolution"), selecione Ratio. Digite 3 no campo W e 2 no campo H. O Photoshop vai travar a proporção automaticamente.
💡 Alternativamente: selecione "W × H × Resolution" e digite diretamente 1920 px no campo W e 1280 px no campo H. Isso garante as dimensões exatas já no crop, sem precisar redimensionar depois.
c
Posicionar o crop com o ponto focal ao centro
Arraste a área de crop para enquadrar a imagem. O elemento visual mais importante deve ficar dentro da área iluminada e, idealmente, próximo ao centro. Evite deixar informação crítica perto das bordas — o site pode cortá-las dependendo do contexto de exibição.
✓ Para mover o canvas dentro do crop sem redimensionar a seleção, clique e arraste dentro da área iluminada.
d
Confirmar com Enter
Pressione Enter para aplicar o crop. Confira em Image → Image Size que as dimensões resultantes são 1920 × 1280 px. Se usou o método "W × H × Resolution", já estará correto.
⚠ Se a imagem original for menor que 1920 × 1280 px, o Photoshop vai ampliar — o que pode gerar perda de qualidade visível. Nesse caso, use 1600 × 1067 px como alternativa mínima.
05 — Photoshop
Passo a passo completo
Siga a ordem rigorosamente. Cada etapa depende da anterior.
1
Abrir e conferir as dimensões originais
No Photoshop: Image → Image Size. Observe as dimensões. Não altere nada ainda — só estamos entendendo o ponto de partida.
2
Converter o espaço de cor para sRGB
Edit → Convert to Profile. Selecione sRGB IEC61966-2.1. Mantenha Rendering Intent: Relative Colorimetric com Black Point Compensation ativado.
⚠ Nunca use "Assign Profile". Sempre "Convert to Profile". São operações completamente diferentes.
3
Redimensionar para 1920 px de largura
Image → Image Size. Ative Resample. Mude a unidade para Pixels. Digite 1920 no campo Largura. O cadeado de proporção deve estar ativado — a altura se ajusta sozinha. O campo Resolution (dpi) pode ser ignorado.
💡 Método de reamostragem recomendado: Preserve Details 2.0. Se não estiver disponível, use Bicubic Sharper.
4
Crop para proporção 3:2 — 1920 × 1280 px
Pressione C para ativar a ferramenta Crop. Na barra superior, selecione Ratio e digite 3 e 2 nos campos. Posicione o crop deixando o ponto focal da imagem ao centro. Confirme com Enter. Veja instruções detalhadas na seção Proporção 3:2 deste guia.
✓ O resultado deve ser exatamente 1920 × 1280 px. Confirme em Image → Image Size.
5
Verificar nitidez (só se necessário)
Visualize a imagem em 100%. Se estiver boa, vá direto ao próximo passo. Se estiver levemente macia: Filter → Sharpen → Unsharp Mask com Amount 40–60%, Radius 0.6–0.8 px, Threshold 2.
✓ Em caso de dúvida, não aplique nada. Nitidez excessiva é irreversível e visível.
6
Exportar em WebP via "Save a Copy"
File → Save a Copy. Selecione o formato WebP. Confirme que o modo é RGB / 8 bits. Autorize flattening se solicitado. Configurações: Lossy, Qualidade 82, Metadata: None, Convert to sRGB: ativado.
⚠ Não use "Export As" para WebP. O comportamento é diferente e pode gerar arquivos com problemas de compatibilidade.
7
Validação final
Abra o arquivo exportado fora do Photoshop — no browser ou no visualizador do sistema. Veja em 100% e depois em 50%. Confirme: cores corretas, amarelos limpos, pretos sem esmagamento, sem artefatos visíveis em bordas ou áreas lisas.
💡 Se algo incomodar aqui, vai incomodar mais no site. Vale corrigir antes de publicar.
06 — Antes de publicar
Checklist de validação
Use antes de fazer o upload de cada imagem. Clique nos itens para marcar.
-
✓
Espaço de cor convertido para sRGB (não apenas atribuído)
-
✓
Dimensões finais: 1920 × 1280 px (proporção 3:2)
-
✓
Formato WebP (ou JPG 82–85 se WebP não for viável)
-
✓
Qualidade de compressão entre 75 e 85 — padrão: 82
-
✓
Metadata removido (configuração "None" na exportação)
-
✓
Imagem aberta no browser e validada a 100% e 50%
-
✓
Ponto focal da imagem posicionado ao centro do crop
-
✓
Cores validadas: amarelos limpos, pretos sem esmagamento
-
✓
Nome do arquivo sem espaços, acentos ou caracteres especiais
07 — Armadilhas
Erros comuns e como evitá-los
Usar "Assign Profile" em vez de "Convert to Profile"
Exportar em CMYK por esquecimento
Usar "Export As" para gerar WebP
Qualidade abaixo de 75 para reduzir o peso do arquivo
Entregar imagem com menos de 1600 px de largura
Nome: "Final versão 3 APROVADO (2).jpg"
Exportar PNG de tudo porque "não perde qualidade"
Sempre "Convert to Profile" → sRGB
Verificar modo RGB / 8 bits antes de exportar
Usar "File → Save a Copy" para WebP
Qualidade 82 é o ponto ideal entre peso e visual
Padrão: 1920 px de largura, sempre
Nome: case-cliente-mockup-01.webp
WebP lossy é o melhor equilíbrio para imagens fotográficas
Atenção com nomes de arquivo: sem espaços, sem acentos, sem parênteses, sem letras maiúsculas. Use hífens para separar palavras. Exemplo correto: projeto-abc-mockup-embalagem-01.webp