Como reduzir o tamanho das imagens sem perda visível de qualidade

As imagens costumam ser a parte mais pesada de uma página web, e uma única foto não otimizada pode pesar mais do que todo o HTML, o CSS e o JavaScript da página somados. A boa notícia é que a maior parte desse peso é invisível: pixels que ninguém vê e detalhes que o olho não percebe. Eliminá-lo deixa as páginas mais rápidas, principalmente em celulares e conexões móveis, sem piorar em nada a aparência.

Reduzir o tamanho das imagens se resume a quatro coisas: as dimensões certas, o formato certo, uma compressão sensata e o comportamento de carregamento adequado.

Primeiro, encontre as imagens mais pesadas

Abra as ferramentas de desenvolvedor do navegador, vá até a aba Network (Rede), filtre por "Img", recarregue a página e ordene por tamanho. Os maiores arquivos são onde você vai economizar mais. O verificador de velocidade de sites do Rudra executa o Lighthouse na página e lista as auditorias que não passaram, entre elas as de imagem (como imagens grandes demais ou mal comprimidas), quando se aplicam. Nos rastreamentos de site completo, o Rudra também sinaliza imagens sem os atributos de largura e altura e páginas que carregam mais de dez imagens sem lazy loading.

Como reduzir o tamanho das imagens, passo a passo

1. Redimensione para o tamanho em que a imagem é exibida

Este costuma ser o maior ganho. Uma foto de 4.000 pixels de largura exibida em uma coluna de 800 pixels carrega cerca de 25 vezes mais pixels do que precisa. Descubra o maior tamanho em que a imagem é realmente exibida (inspecione-a nas ferramentas de desenvolvedor) e exporte-a nessa largura, ou em até o dobro dela, para garantir nitidez em telas de alta densidade. Encolher uma imagem com CSS não reduz o download; o arquivo inteiro continua sendo enviado.

2. Escolha o formato certo

• JPEG: fotografias e imagens complexas, quando você precisa de compatibilidade máxima.
• PNG: imagens que exigem qualidade sem perdas ou transparência com bordas nítidas, como capturas de tela de interfaces ou diagramas com poucas cores. PNG é uma escolha ruim para fotos.
• WebP: compatível com todos os principais navegadores atuais e normalmente menor do que JPEG ou PNG com qualidade visual parecida. Também aceita transparência e animação.
• AVIF: muitas vezes ainda menor do que o WebP com a mesma qualidade visual e compatível com todos os principais navegadores atuais, embora a codificação seja mais lenta.
• SVG: logotipos, ícones e ilustrações simples. É vetorial, então continua nítido em qualquer tamanho e costuma ser minúsculo.
• Vídeo em vez de GIF: um GIF animado costuma ser muitas vezes maior do que o mesmo clipe em vídeo MP4 ou WebM. Use <video autoplay muted loop playsinline>.

3. Comprima e confira com os próprios olhos

Os formatos com perdas (JPEG, WebP, AVIF) permitem trocar tamanho de arquivo por qualidade. Para fotos, uma qualidade na faixa de 70 a 85 é um ponto de partida comum, que muitas vezes fica igual ao original, mas o valor certo depende da imagem; por isso, compare o resultado no tamanho real. Remova também os metadados, como dados da câmera e localização por GPS, que acrescentam peso e podem revelar mais do que você gostaria. Ferramentas úteis:

• Squoosh (no navegador): compare formatos e níveis de qualidade lado a lado, uma imagem por vez.
• ImageOptim (macOS) ou ferramentas de desktop parecidas: arraste uma pasta para otimizar com ou sem perdas.
• Linha de comando: cwebp -q 80 photo.jpg -o photo.webp converte para WebP; magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg redimensiona e recomprime com o ImageMagick.
• Em um pipeline de build: bibliotecas como a sharp (Node.js) conseguem redimensionar e converter todas as imagens automaticamente no build ou no upload.

4. Sirva tamanhos diferentes para telas diferentes

Um celular não deveria baixar a imagem dimensionada para um monitor grande de desktop. Com srcset e sizes, o navegador escolhe o menor arquivo que ainda fica nítido:

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset lista os arquivos e suas larguras; sizes informa ao navegador a largura em que a imagem será exibida (800 pixels em telas grandes e, nas demais, a largura total da viewport). Para oferecer formatos modernos com uma alternativa de reserva, envolva a imagem em <picture> com um <source type="image/avif" srcset="..."> e um <source type="image/webp" srcset="..."> antes do <img>; os navegadores usam o primeiro formato que reconhecem.

5. Use lazy loading abaixo da dobra, mas não na imagem de destaque

Adicione loading="lazy" às imagens que ficam mais abaixo na página, e o navegador só vai buscá-las quando o visitante rolar até perto delas. Não aplique lazy loading à imagem principal do topo da página: muitas vezes ela é o elemento de Largest Contentful Paint, e atrasá-la deixa a página com cara de mais lenta. Para essa imagem, considere fetchpriority="high", para que o navegador a busque logo.

6. Sempre defina largura e altura

Os atributos de largura e altura permitem que o navegador reserve o espaço certo antes de a imagem chegar, para que o texto não pule quando ela carrega, o que é uma causa comum de mudança de layout (CLS). Defina-os com o tamanho intrínseco da imagem e mantenha as imagens fluidas com img { max-width: 100%; height: auto; } no seu CSS.

7. Automatize

A otimização manual não sobrevive ao próximo upload. Deixe a sua plataforma cuidar disso: o WordPress gera vários tamanhos de cada imagem enviada e adiciona srcset automaticamente, e plugins de otimização podem acrescentar compressão e conversão para WebP ou AVIF; o componente <Image> do Next.js redimensiona, converte e aplica lazy loading por padrão; e as CDNs de imagem transformam as imagens em tempo real a partir de parâmetros no URL. Combine isso com tempos de cache longos para os arquivos de imagem, para que quem volta ao site não precise baixá-los de novo.

Erros comuns

• Aplicar lazy loading à imagem de destaque, o que atrasa o conteúdo mais importante.
• Subir fotos de câmera ou de celular em resolução máxima e deixar o CSS encolhê-las.
• Salvar fotografias em PNG.
• Colocar imagens importantes em backgrounds de CSS, onde o navegador as descobre tarde e elas não podem ter texto alternativo.
• Recomprimir várias vezes um JPEG que já está comprimido, o que acrescenta artefatos visíveis a cada rodada.
• Esquecer largura e altura e provocar mudança de layout.
• Comprimir demais fotos de produto, até sumir o detalhe que os clientes querem ver.

O que as ferramentas conseguem e não conseguem avaliar

As auditorias automáticas são boas em identificar imagens maiores do que o tamanho de exibição, sem formatos modernos ou sem dimensões, e estimam quanto você poderia economizar. Elas não sabem dizer se uma imagem comprimida ainda está boa o bastante para a sua finalidade. Uma ilustração de blog aguenta compressão pesada; uma foto de produto ou uma peça de portfólio talvez não. A decisão final é no olho.