Um site profissional cuida de fontes, espaçamentos, botões e, principalmente, imagens. Elas costumam representar a maior parte do peso da página e são percebidas rapidamente quando o carregamento fica lento.
Considere três fatores: dimensões em pixels, cor e formato, além da velocidade de carregamento em um celular comum. Uma foto bonita que demora para aparecer pode fazer o visitante abandonar a página, e preparar o arquivo corretamente leva poucos minutos quando você segue uma ordem definida.
Os índices de abandono são documentados: a pesquisa móvel do Google, resumida no estudo de velocidade de página do Think with Google, apontou que 53 por cento das visitas eram abandonadas quando a página levava mais de três segundos para carregar. A nota do web.dev sobre a importância da velocidade apresenta resultados semelhantes em estudos da BBC e de varejistas.
Imagens em geral são a coisa mais pesada da página, e o HTTP Archive rastreia isso há anos. O caminho learn images do Google é o acompanhamento prático: pixels certos, formato certo, depois comprimir.
Os números de abandono
Uma pesquisa do Google sobre navegação móvel mostrou que 53% das visitas são abandonadas quando a página leva mais de 3 segundos para carregar. O tempo de carregamento não é apenas um detalhe técnico, porque afeta diretamente a permanência do público.
Em trabalho relacionado do Google e da SOASTA, a probabilidade de rejeição sobe cerca de 32% quando o tempo de carga vai de 1 segundo para 3 segundos, e se você esticar isso para perto de 10 segundos a probabilidade de rejeição mais do que dobra. A engenharia da BBC também relatou perder cerca de 10% da audiência a cada segundo extra de carga, e a Amazon, famosa, ligou cada 100 ms de atraso a cerca de 1% a menos de vendas.
Se a sua página inicial carrega três fotos grandes sem otimização, o tempo de espera pode afastar visitantes em conexões móveis. Resolução excedente aumenta a transferência sem melhorar a qualidade percebida.
Acerte os pixels
A maior parte das imagens online aparece bem menor do que foi fotografada, porque a câmera de celular produz algo como 4000 pixels de largura e a coluna de blog muitas vezes tem 700 a 800 pixels de largura. Mande o original e você envia cerca de cinco vezes a largura, o que significa mais ou menos vinte e cinco vezes os pixels, e o visitante baixa megabytes para ver o que 150 KB teriam mostrado.
Alvos grosseiros que cobrem a maior parte dos casos:
- Imagens de destaque em largura cheia: 1600 a 2000 pixels de largura bastam na maior parte das telas.
- Imagens dentro de uma coluna de conteúdo: 1200 a 1600 pixels de largura mantêm nítido, com folga.
- Posts quadrados de feed: 1080 x 1080. Posts em retrato: 1080 x 1350, que é 4:5.
- Stories e formatos verticais: 1080 x 1920, que é 9:16.
- Thumbnails e cartões pequenos: 400 a 600 pixels de largura em geral bastam.
Na dúvida, exporte com cerca do dobro do tamanho em que a imagem vai aparecer, porque isso cobre telas de celular de alta densidade sem exagerar. O dobro é folga, e o original de 4000 pixels é desperdício.
Escolha o formato
Fotografias costumam funcionar melhor em JPG ou WebP, e o WebP geralmente produz arquivos menores com qualidade semelhante. Gráficos com cores uniformes, texto nítido ou transparência pedem PNG. Se o celular gerar um HEIC, converta uma cópia quando o site ou formulário não aceitar esse formato.
Comprima e confira
Redimensione primeiro e comprima depois, porque comprimir uma imagem de 4000 pixels e deixar o site encolher é jogar a maior parte do esforço fora. Com os pixels certos, Otimizar para web pode baixar o arquivo até ficar bom no tamanho em que as pessoas vão ver: abaixo de 200 KB é confortável para uma imagem normal de conteúdo, e um banner grande justifica mais.
Depois faça as duas checagens que as pessoas pulam. Primeiro, abra a página num celular de verdade, de preferência em dados móveis, porque esse é o teste real, não a sua fibra. Segundo, um último olhar de privacidade: placas, telas, endereços e desconhecidos no fundo não cabem no seu marketing.
Erros silenciosos
O clássico é otimizar com cuidado onze imagens pequenas enquanto o banner continua um original de 4 MB, então ordene as imagens por tamanho de arquivo e conserte a mais pesada primeiro, porque um arquivo inchado pode pesar mais do que todo o resto junto. O conserto barato é o arquivo grande, não a miniatura que já estava leve.
O teimoso é enviar uma foto em PNG porque “PNG é qualidade mais alta”, e numa foto isso também é várias vezes mais pesado, sem ganho visível. Qualidade que ninguém vê é só peso, e o visitante paga essa conta no carregamento.
Outro erro é otimizar a imagem e depois criar um novo recorte pesado para stories. Faça primeiro o corte e deixe a compressão para o final. Também teste a página em uma conexão lenta, porque o cache do seu computador pode esconder o tempo real de carregamento.
A ordem que eu sigo
Eu corto primeiro, sempre, porque um corte de story feito depois de eu já ter comprimido o arquivo é como eu acabo exportando um segundo original pesado e desfazendo a tarde. A caixa vem primeiro e a dieta vem por último.
Depois, redimensiono a imagem para a largura exibida pelo layout, com alguma folga para telas de alta densidade. Não envio 4000 pixels para uma coluna de 800, porque a resolução excedente aumenta a transferência sem melhorar a visualização.
Depois escolho o formato: fotos viram JPG ou WebP, gráficos com texto ficam PNG até eu saber que o site aceita WebP, e HEIC nunca vai para uma página. Eu converto isso antes mesmo de pensar em peso.
Por último comprimo e olho a página ao vivo, não o arquivo no disco, e se o banner ainda parece atrasado eu volto naquele arquivo. Não reabro doze thumbnails que já estavam pequenas, porque uma foto pesada em geral é o problema inteiro.
Guardo os originais em uma pasta que nunca é enviada ao site. Apenas as cópias preparadas vão para a publicação, o que evita o envio acidental de uma foto de celular com vários megabytes.
Se vou publicar um story e atualizar um site, preparo dois arquivos: o story recebe um corte vertical, enquanto o site usa um WebP horizontal e leve. Usar a mesma exportação nos dois lugares pode manter a página pesada e ainda cortar o rosto no story.
Ordene as imagens por tamanho de arquivo e conserte a mais pesada primeiro, corte antes de encolher e depois confira a página ao vivo num celular, em dados móveis se puder. Esse é o único teste que conta.