Por que redimensionar imagens corretamente é essencial para seu site e loja online?
O redimensionamento correto de imagens é uma das práticas mais subestimadas de otimização web. Enviar uma imagem de 4000×3000 pixels para exibir em um card de 400×300 pixels não é apenas desperdício — é um erro técnico que aumenta o consumo de banda, degrada a performance da página e prejudica diretamente seu posicionamento no Google.
Imagens mal dimensionadas matam o LCP
O LCP (Largest Contentful Paint) é a métrica mais importante dos Core Web Vitals para o Google. Ela mede o tempo que o maior elemento visível da página leva para ser renderizado. Para a maioria dos sites, esse elemento é uma imagem — a foto hero de um produto, o banner principal, ou a imagem destacada de um post.
Quando uma imagem tem dimensões muito maiores que o espaço que ela ocupa na tela, o navegador precisa: (1) baixar o arquivo enorme, (2) decodificar todos os pixels, (3) redimensionar via CSS ou HTML, e (4) renderizar. Cada uma dessas etapas consome tempo e memória. Com uma imagem já no tamanho correto, etapas 1 e 2 são muito mais rápidas, e etapa 3 é eliminada.
O Google PageSpeed Insights e o Lighthouse frequentemente reportam o aviso "Properly size images" como uma das principais oportunidades de melhoria de performance. Corrigir isso pode economizar segundos de carregamento e melhorar significativamente sua nota no Core Web Vitals.
Tamanhos de imagem recomendados para e-commerce
Para lojas virtuais, as dimensões das imagens de produto têm impacto direto na taxa de conversão. Imagens muito pequenas parecem amadorísticas; imagens muito grandes atraem carregamento lento e abandono de página. Veja as dimensões ideais para os principais contextos de e-commerce:
| Contexto | Largura ideal | Proporção | Formato sugerido |
|---|---|---|---|
| Produto principal (zoom) | 1200px | 1:1 | WebP/JPG 90% |
| Thumbnail lista produtos | 400px | 1:1 | WebP 80% |
| Banner hero (desktop) | 1920px | 16:9 | WebP 85% |
| Banner hero (mobile) | 828px | 9:16 | WebP 85% |
| Imagem de blog | 800px | 16:9 | WebP 80% |
| Open Graph / Social | 1200×630px | 1.91:1 | JPG 90% |
| Favicon | 32×32px | 1:1 | PNG |
| Logo cabeçalho | 200-400px | — | PNG (transparente) |
Densidade de pixels e telas Retina: o que você precisa saber
Telas Retina e de alta densidade (DPR 2× ou 3×) são hoje a maioria nos smartphones. Em uma tela 2×, para que uma imagem apareça nítida em um espaço de 400px de largura, a imagem precisa ter 800px de largura real. Imagens de 400px aparecem borradas ou pixeladas nessas telas.
A solução é fornecer imagens em 2× o tamanho de exibição usando o atributo srcset do HTML5. Com nosso redimensionador, você pode criar facilmente as versões 1× e 2× de cada imagem para usar no srcset do seu site.
Dica: para o banner principal do seu site (exibido em 1920px de largura), crie uma versão para desktop (1920px), uma para tablet (1024px) e uma para mobile (828px). Use o atributo picture ou srcset para servir cada versão ao dispositivo correto — isso é chamado de art direction e é uma prática essencial de performance web.
Redimensionamento em lote: como funciona a ferramenta
Nossa ferramenta de redimensionamento em lote (bulk resizer) processa todas as imagens localmente no seu navegador usando a API Canvas do HTML5. Você pode:
- Redimensionar por largura fixa com altura calculada automaticamente para manter a proporção
- Redimensionar por altura fixa com largura automática
- Definir largura e altura livres (pode distorcer a imagem)
- Redimensionar para uma porcentagem do tamanho original (ex: 50% = metade do tamanho)
- Definir um tamanho máximo — o lado maior fica com o valor definido e o outro é calculado proporcionalmente