Zipnify Imagens rápidas. Zero uploads.Imagens para um site rápido: tamanho, formato e boas práticas
As imagens costumam representar mais da metade do peso de uma página web. Se você não as prepara, seu site carrega devagar, os visitantes vão embora e os buscadores percebem. A boa notícia é que otimizar imagens é uma das melhorias mais simples e de maior impacto. Este guia reúne uma receita prática.
Por que as imagens importam para a velocidade
Uma página com dez fotos de 4 MB obriga o visitante a baixar 40 MB, algo muito lento em um celular com dados móveis. Um tempo de carregamento alto aumenta o abandono e prejudica a experiência. Os buscadores consideram a velocidade um fator de qualidade, especialmente em celulares.
Reduzir o peso das imagens não exige conhecimento técnico: basta aplicar alguns critérios simples de forma constante.
Dimensões: não envie mais pixels do que são exibidos
A causa mais comum de imagens pesadas é enviar a foto exatamente como sai da câmera. Se na sua página a imagem é exibida com 800 pixels de largura, enviar uma de 4000 não melhora nada visível e multiplica o peso. Calcule a largura máxima que ocupará na tela e envie uma versão com essa largura, ou o dobro se quiser nitidez em telas de alta densidade.
Valores de referência: imagem principal de capa, 1600 a 1920 pixels; imagens de artigo, 1000 a 1200; miniaturas de produto, 400 a 600; ícones, o mínimo necessário.
Peso-alvo por tipo de imagem
Como meta razoável, uma imagem de capa deveria ficar abaixo de 200 a 300 KB, as imagens de conteúdo entre 60 e 150 KB e as miniaturas abaixo de 40 KB. Não são limites estritos, mas metas que mantêm a página com tamanho total administrável, idealmente abaixo de 1 a 2 MB.
Use a ferramenta de comprimir imagem ou a de peso exato para se aproximar desses valores, conferindo se a qualidade continua boa.
Formato adequado
Escolha WebP ou JPG para fotografias, PNG ou WebP para gráficos com transparência e SVG para logotipos e ícones vetoriais, que ficam nítidos em qualquer tamanho e pesam muito pouco. Evite GIFs animados pesados: um vídeo curto em formato moderno costuma ser muito mais leve.
Dê a cada imagem um nome descritivo em minúsculas e com hifens, por exemplo 'tenis-corrida-azul.webp', melhor que 'IMG_2043.jpg'.
Carregamento adiado e texto alternativo
As imagens que ficam fora da tela inicial não precisam carregar quando a página abre. O atributo de carregamento adiado do navegador permite que sejam baixadas só quando o visitante se aproxima delas. Para a imagem principal, que aparece de imediato, não aplique esse carregamento adiado.
Inclua sempre um texto alternativo que descreva a imagem. Ajuda pessoas com leitores de tela, aparece se a imagem não carregar e dá contexto aos buscadores.
Uma receita para começar hoje
Primeiro, redimensione suas imagens para a largura que realmente usará. Segundo, converta-as para WebP ou JPG com qualidade entre 75 e 85. Terceiro, verifique se cada uma cumpre o peso-alvo. Quarto, dê nomes claros e adicione texto alternativo. Quinto, teste sua página em um celular com conexão normal.
Faça esse processo sempre que publicar conteúdo novo e, se seu site já tem muitas imagens pesadas, comece pelas das páginas mais visitadas.
Experimentar a ferramenta: Comprimir imagem
Perguntas frequentes
Quanto deve pesar uma imagem web?
Como meta, capa abaixo de 200 a 300 KB, conteúdo entre 60 e 150 KB e miniaturas abaixo de 40 KB.
Envio a imagem no tamanho da câmera e deixo o site reduzir?
Não. O visitante ainda baixará o arquivo pesado. Redimensione antes de enviar.
O SVG serve para fotos?
Não. O SVG é para logotipos, ícones e desenhos vetoriais. Para fotos use WebP ou JPG.
O que é texto alternativo?
Uma descrição breve da imagem que ajuda leitores de tela e buscadores, e aparece se a imagem não carregar.