Guia prático de tamanhos e formatos de arquivos de imagem para a web

Toda imagem disputa recursos de rede, decodificação, memória e renderização. Um orçamento útil é específico da página: considera a função da imagem, o público, o cache, o viewport e a qualidade exigida. As faixas abaixo são pontos de partida para testes, não limites universais de aprovação ou reprovação.

Orçamentos iniciais por caso de uso

Estas faixas ilustram um orçamento contido para entrega na web. Seus resultados em JPEG, WebP ou AVIF podem ficar acima ou abaixo delas; ajuste conforme o original, o codificador, o tamanho renderizado, o desempenho em campo e a avaliação visual.

Como transformar faixas iniciais no seu orçamento

O relatório de peso de página do HTTP Archive fornece dados atuais de distribuição, mas a mediana global não representa seu público. O limite “bom” de LCP publicado pelo Google é 2,5 segundos no 75º percentil das visitas. Use seus dados de campo e uma cascata para dividir o tempo disponível entre resposta do servidor, descoberta do recurso, transferência, decodificação e atraso de renderização.

Comece com um orçamento de transferência para a página e destine mais bytes às imagens que geram mais valor ao usuário. Reavalie as faixas da tabela quando o layout, a quantidade de imagens, o público ou a exigência de qualidade mudar.

O formato é uma das variáveis principais

O mesmo original pode gerar tamanhos muito diferentes conforme o codificador e a meta de qualidade. Esta tabela mostra comportamentos a comparar, não resultados de benchmark universais para uma foto de 1200 pixels:

WebP ou AVIF podem superar uma saída JPEG em algumas comparações, mas nenhuma porcentagem fixa vale para todos os originais e codificadores. Os dois formatos modernos aceitam transparência. Para analisar os trade-offs, consulte nosso guia de WebP e AVIF.

Você pode criar candidatos com JPG para WebP, com Converter para AVIF para os formatos de entrada indicados, ou com a Conversão em lote para os formatos exibidos nessa ferramenta.

Dimensões em Pixels: O Multiplicador Oculto

Contagem de pixels, conteúdo da imagem, profundidade de bits, metadados, formato, codificador e configurações afetam o tamanho. Remover dimensões desnecessárias costuma deixar muito menos dados para o codificador representar.

Uma imagem de 4000 × 3000 tem 12 milhões de pixels; uma de 1200 × 900 tem 1,08 milhão, ou 91% menos pixels. Com a mesma quantidade de canais e precisão, isso reduz bastante os dados rasterizados não comprimidos entregues ao codificador, embora a economia final em bytes ainda dependa do conteúdo e das configurações.

Regra prática para responsividade: ofereça candidatos próximos das possíveis larguras e densidades de renderização. Se um espaço de conteúdo tem 720 CSS pixels de largura, um candidato de 1440 pixels pode servir para uma tela 2×, mas zoom, corte, mudanças de layout e densidades maiores podem alterar a escolha. Deixe srcset e sizes descreverem as opções.

Use a ferramenta de redimensionamento do Vizua para criar um candidato com as dimensões exigidas pelo layout. Depois teste o compressor de JPEG ou PNG conforme o caso; um original já otimizado pode não ficar menor.

Qualidade de Compressão: Encontrando o Ponto Ideal

Depois de acertar as dimensões e o formato, a qualidade de compressão é o último ajuste. Este exemplo mostra como as três decisões trabalham juntas:

Fluxo ilustrativo: comece com um arquivo mestre de 4000 × 3000 e mantenha-o fora do conjunto de entrega.

1. Redimensione para um candidato como 1200 × 900 quando ele corresponder ao espaço e à densidade de destino
2. Exporte um candidato em WebP com uma qualidade inicial escolhida e examine o arquivo real
3. Exporte um candidato em AVIF quando sua stack aceitar o formato; compare tamanho, aparência e custo de codificação

Escolha o menor candidato que atenda ao caso de uso. A economia final e a diferença visível vêm dos seus arquivos de origem e saída reais, não apenas das dimensões do exemplo.

Pra recomendações detalhadas de qualidade em cada formato, veja nosso guia sobre como comprimir imagens sem perder qualidade.

Casos Especiais

E-commerce

Fotos de produtos precisam continuar úteis no zoom aceito pela loja. Gere candidatos responsivos a partir de um mestre protegido, teste detalhes finos e defina orçamentos separados para grade, visualização principal e zoom. Os requisitos de upload de marketplaces podem diferir do que a loja deve entregar.

Portfolio de fotografia

Portfólios podem servir prévias responsivas e oferecer uma visualização intencional em alta resolução quando apropriado. Defina dimensões e orçamentos de bytes pelo layout e pelas telas esperadas, depois avalie texturas, gradientes e perfis de cor.

Compartilhamento social (Open Graph)

As recomendações e os formatos aceitos para imagens Open Graph variam entre plataformas e podem mudar. Um JPEG ou PNG de 1200 × 630 é um ponto de partida comum entre plataformas, mas confirme as orientações atuais do destino e visualize o resultado. Rastreadores buscam esses arquivos independentemente do lazy loading da página.

Orçamento total de imagens por página

Crie um orçamento de página a partir da sua meta de desempenho. Uma possível distribuição inicial para testar é:

• 1 imagem de destaque: ~150 KB
• 3-4 imagens de conteúdo: ~100 KB cada, total ~300-400 KB
• Thumbnails, avatares, ícones: ~50 KB combinados

Este exemplo não garante velocidade. Galerias e grades de produtos podem adiar imagens adequadas fora da tela, mas recursos com lazy loading ainda consomem dados quando solicitados e podem afetar a rolagem. Meça o desempenho inicial e de interação em aparelhos e redes representativos.

Perguntas Frequentes