A resposta curta
Descubra com que largura a imagem aparece na página, em pixels CSS, e exporte com o dobro dessa largura. Uma coluna de blog com 760 pixels de largura precisa de uma imagem com uns 1520 pixels. Um card de produto mostrado com 280 pixels precisa de uns 560. Um fundo que ocupa a tela toda precisa de 1920 pixels para notebooks comuns e de até 2560 para monitores grandes de computador.
O redimensionador abaixo faz isso em um passo: escolha Pixels, digite a largura, deixe a Altura vazia e mantenha Manter proporções ligado. Redimensionar um lote de fotos de celular de cerca de 4000 pixels para 1600 costuma reduzir cada arquivo em 80 a 90 por cento antes de qualquer compressão extra.
Experimente aqui: Redimensionar imagem
Abrir a página completa da ferramentaTamanhos recomendados por tipo de imagem
Estes tamanhos cobrem os casos comuns em blogs, lojas virtuais e sites de empresas. A largura é o que mais importa; a altura vem da proporção que você escolher. As metas de peso consideram JPG ou WebP com qualidade entre 75 e 85.
| Tipo de imagem | Largura em pixels | Proporção comum | Meta de peso do arquivo |
|---|---|---|---|
| Banner ou destaque em largura total | 1920 a 2560 | 16:9 ou 21:9 | 200 a 400 KB |
| Imagem dentro de um artigo | 1200 a 1600 | 3:2 ou 16:9 | 100 a 200 KB |
| Foto de produto com zoom | 1000 a 2000 | 1:1 | 100 a 300 KB |
| Miniatura, card de produto | 300 a 600 | 1:1 ou 4:3 | 20 a 60 KB |
| Imagem de compartilhamento (Open Graph) | 1200 x 630 | cerca de 1,91:1 | menos de 300 KB |
| Logo | cerca de 2x o tamanho exibido | qualquer | menos de 30 KB, ou use SVG |
| Foto da equipe ou do autor | 400 a 800 | 1:1 | 30 a 80 KB |
O que são imagens retina e 2x
Celulares modernos, muitos notebooks e a maioria dos Macs têm telas de alta densidade, em que um pixel CSS é desenhado com dois ou três pixels físicos. Uma imagem exatamente da largura da área em que aparece fica meio borrada nessas telas. Dobrar a largura (2x) deixa a imagem nítida; ir para 3x acrescenta muito peso para uma diferença que pouca gente percebe, então 2x costuma ser o limite.
Se o seu site ou plataforma aceita imagens responsivas (o atributo srcset, que o WordPress e a maioria das plataformas de loja virtual, como WooCommerce, Shopify e Nuvemshop, acrescentam sozinhos), exporte uma versão grande em 2x e deixe o sistema criar as cópias menores. Se não aceita, uma única imagem com 2x a maior largura exibida é o melhor meio-termo.
Em um banner de largura total, isso significa uns 2560 pixels para computador. No celular, a mesma área tem por volta de 400 pixels CSS de largura, então uma configuração responsiva mandaria ali uma versão perto de 800 a 1200 pixels.
Proporções e redimensionar sem distorcer
Proporção é a relação entre largura e altura. 16:9 é o formato widescreen dos vídeos e da maioria dos banners, 3:2 é o formato nativo de muitas câmeras, 4:3 é o formato nativo da maioria das câmeras de celular e 1:1 é o quadrado, comum em grades de produtos. Manter uma só proporção para todas as imagens do mesmo tipo deixa as páginas organizadas.
Redimensionar muda só o tamanho, nunca o formato, desde que as proporções sejam mantidas. Com Manter proporções ligado, o redimensionador encaixa a imagem dentro da largura e da altura que você digitar, então ela nunca fica esticada. Se você precisa de um formato exato, por exemplo 1200 x 630 para uma imagem de compartilhamento ou um quadrado para um produto, corte primeiro com a ferramenta Cortar imagem e depois redimensione.
Não amplie imagens pequenas. Ampliar acrescenta pixels sem acrescentar detalhes, então o resultado fica maior e mais borrado. É por isso que Não ampliar imagens pequenas vem ligado por padrão.
Passo a passo para um site comum
- Meça: abra a página, clique com o botão direito na área da imagem e escolha Inspecionar, ou veja na documentação do seu tema qual é a largura do conteúdo.
- Corte na proporção que você usa para aquele tipo de imagem, se o original tiver outro formato.
- Redimensione para o dobro da largura exibida no modo Pixels.
- Escolha o formato de saída: WebP para os menores arquivos, se a sua plataforma aceitar, senão JPG. Deixe o PNG para logos e gráficos com transparência.
- Comprima se o arquivo ainda estiver acima da meta, depois envie e confira a página no celular.
Erros comuns
- Enviar o original da câmera e deixar o navegador reduzir. O arquivo inteiro de 4000 pixels ainda precisa ser baixado, o que deixa a página lenta e piora a nota de Largest Contentful Paint.
- Reduzir só com os atributos width e height do HTML. Eles controlam o tamanho exibido, não o tamanho do arquivo. Mesmo assim, devem ser preenchidos, porque reservam o espaço e evitam que o layout pule.
- Usar PNG para fotos. Uma foto salva em PNG costuma ficar de 5 a 10 vezes maior que a mesma foto em JPG ou WebP.
- Misturar proporções na mesma grade, o que deixa as listas de produtos desalinhadas.
- Colocar texto dentro das imagens. Ele não é lido pelos buscadores e fica minúsculo no celular; use texto de verdade por cima da imagem.
Dicas para páginas mais rápidas
As imagens abaixo da primeira tela devem usar carregamento lento (lazy loading), para só serem baixadas quando o visitante rolar até perto delas; a maioria dos sistemas de conteúdo já faz isso sozinha. A imagem principal no topo deve carregar normalmente, já que muitas vezes é o maior elemento que a nota de velocidade mede.
Redimensione pastas inteiras de uma vez: adicione todas as imagens, defina a largura uma vez e use Baixar tudo em ZIP. A lista mostra as dimensões antigas e novas de cada arquivo. Tudo acontece no seu navegador, então até algumas centenas de fotos de produto são processadas sem enviar nada.