Responsabilidade editorial: Equipe Styzen · Revisado em 23 de setembro de 2026.

Antes de começar

  • Guarde o arquivo original em local seguro.
  • Descubra aproximadamente o maior tamanho em que a imagem será exibida.
  • Separe fotos, logos, ícones e capturas de tela, pois podem exigir formatos diferentes.

1. Redimensione para a necessidade real

Uma foto de milhares de pixels pode ser desnecessária se aparece em um card pequeno. Gere uma versão compatível com a área de exibição e, quando o projeto permitir, ofereça variações para telas diferentes.

Não confunda dimensão visual com resolução do arquivo. CSS pode mostrar uma imagem pequena mesmo enquanto o navegador baixa um arquivo enorme.

2. Escolha o formato pelo tipo de imagem

Fotos costumam se beneficiar de formatos modernos e compressão com perda controlada. Ilustrações simples, logos e elementos com transparência podem ter necessidades diferentes. SVG é útil para muitos gráficos vetoriais, mas deve vir de fonte confiável e ser tratado com cuidado quando contém conteúdo externo.

Não converta tudo para um único formato sem comparar resultado visual e compatibilidade do projeto.

3. Comprima observando o contexto

Aumente a compressão até perceber perda que prejudique o uso e volte um pouco. Para uma miniatura, pequenos detalhes importam menos; para um portfólio de fotografia, o limite pode ser diferente.

Compare arquivos lado a lado e registre o tamanho final. A melhor configuração é um equilíbrio entre legibilidade, aparência e transferência.

4. Evite carregar o que não está visível

Imagens muito abaixo da primeira tela geralmente podem ser carregadas mais tarde. Recursos críticos, como o principal elemento visual da primeira dobra, precisam de estratégia diferente para não atrasar a percepção da página.

Não aplique carregamento tardio cegamente a tudo. O objetivo é priorizar aquilo que o usuário precisa primeiro.

5. Escreva texto alternativo quando a imagem comunica informação

O texto alternativo deve explicar a informação relevante, não repetir palavras-chave. Imagens puramente decorativas podem ser marcadas de forma que tecnologias assistivas não precisem anunciá-las.

Em prints usados em tutorial, descreva o que a pessoa precisa localizar, mas mantenha as instruções principais também em texto.

Erros comuns

  • Enviar fotos originais enormes para cards pequenos.
  • Usar a mesma imagem para todos os tamanhos sem necessidade.
  • Comprimir tanto que textos e detalhes ficam ilegíveis.
  • Usar imagem para substituir texto importante.

Checklist final

  • A dimensão do arquivo combina com a exibição.
  • O formato é adequado ao conteúdo.
  • A qualidade visual continua suficiente.
  • Imagens fora da primeira tela não bloqueiam o carregamento inicial.
  • Imagens informativas possuem alternativa textual.

Continue aprendendo

Se você ainda está decidindo estratégia, escopo ou infraestrutura, veja também os Guias Styzen. Para conteúdo sobre tecnologia e novidades, acesse o Blog Styzen.