Otimização de imagens para Web: guia completo

O carregamento lento da página mata as conversões. Estudos mostram que 40% dos usuários abandonam um site que demora mais de 3 segundos. A maior causa? Imagens não otimizadas. Uma única foto de 5 MB na sua página inicial pode aumentar o tempo de carregamento, mesmo em conexões rápidas.

A lista de verificação de otimização de imagens

1. Dimensões corretas — não envie uma imagem de 4.000 px onde você exibe 800 px
2. Formato correto — WebP/AVIF moderno, JPG/PNG substituto
3. Compressão correta — qualidade de 75 a 85% para fotos, sem perdas para gráficos
4. Entrega correta — carregamento lento, srcset responsivo

Dimensões recomendadas em 2026

• Imagens principais: 1920×1080 (Full HD) ou 2560×1440 (2K) no máximo
• Hero da postagem do blog: 1200×675 (16:9)
• Fotos do produto: 1500×1500 com suporte para zoom, tela padrão de 800×800
• Avatares: 256×256 (as miniaturas serão reduzidas)
• Open Graph (compartilhamento social): 1200×630
• Favicon: 32×32, 192×192, 512×512 PNG

Redimensione as fotos para essas dimensões com nossa ferramenta de redimensionamento de imagens antes de enviá-las.

Formatos: quando usar o quê

• WebP: padrão para 95% das imagens da web. 25–35% menor que JPG com a mesma qualidade. Suporte universal ao navegador.
• AVIF: Ainda menor (50% menor que JPG). Use para imagens de herói. Os navegadores mais recentes suportam isso.
• JPG: Fotografias sem transparência. Excelente compatibilidade.
• PNG: logotipos, capturas de tela, qualquer coisa com transparência. Sem perdas.
• SVG: gráficos vetoriais, ícones, ilustrações simples. Tamanho de arquivo minúsculo, escala infinita.

Converta entre esses formatos com o PDF7 Image Convert.

Compressão: quão agressivo é muito agressivo?

Para fotos: comece com qualidade de 85%. Cair para 75% para páginas críticas de largura de banda. Abaixo de 70%, os artefatos tornam-se visíveis. Use nossa ferramenta de compactação de imagens para encontrar o equilíbrio certo.

Imagens responsivas com srcset

Não exiba uma imagem de 2K em um telefone. Use o atributo srcset do HTML:

O navegador escolhe a menor imagem que cabe. Você precisará de três tamanhos por imagem.

Carregamento lento

Adicione loading="lazy" a todas as imagens abaixo da dobra. Os navegadores modernos não os carregam até que o usuário role para perto, economizando largura de banda a cada carregamento de página.

A regra dos 100 KB

Use imagens individuais com menos de 100 KB. As imagens Hero podem chegar a 200 KB. Se uma única foto tiver mais de 500 KB, você estragou tudo. Redimensione e compacte novamente.