O fotógrafo entregou fotos lindas do seu estabelecimento — 6MB cada, resolução de revista. Você subiu direto no site, sem mexer em nada. Três meses depois, um cliente reclamou que o site "trava" no celular dele. Não é o celular dele. São suas 12 fotos de 6MB carregando de uma vez.
Escolha o formato certo
WebP é o formato moderno recomendado: oferece qualidade visual equivalente ao JPEG/PNG com arquivos até 30% menores. A maioria das ferramentas de edição e plataformas já suportam exportação direta em WebP.
Redimensione antes de fazer upload
Uma foto de câmera profissional pode ter 4000px de largura — mas se o espaço no site é de 800px, o excesso é peso desperdiçado. Sempre redimensione a imagem para o tamanho real que ela vai ocupar na tela.
Comprima sem perder qualidade perceptível
Ferramentas como TinyPNG ou Squoosh reduzem o peso do arquivo em 50-80% sem diferença visual perceptível ao olho humano. Esse passo, sozinho, já resolve boa parte dos problemas de performance.
Use lazy loading
Imagens fora da área visível inicial (abaixo da dobra) devem carregar só quando o usuário rolar a página até elas, usando o atributo loading="lazy". Isso acelera o carregamento inicial percebido.
Defina largura e altura sempre
Especificar os atributos width e height em cada imagem evita que o layout "pule" enquanto ela carrega — um problema direto de CLS (Cumulative Layout Shift), uma das Core Web Vitals.
Evite imagens desnecessárias
Cada imagem tem um custo de performance. Antes de adicionar mais uma, pergunte se ela realmente agrega valor ao conteúdo ou se está apenas preenchendo espaço visual.
Abra a pasta de imagens do seu site agora
Se qualquer arquivo passar de 500KB, ele é candidato certo pra compressão. Rode pelo Squoosh (gratuito, 2 minutos por imagem) antes do próximo upload — o cliente que reclamou de travamento nunca mais vai perceber o problema.