Como otimizar imagens para a web sem perder qualidade

Para otimizar imagens para a web sem perda visível, faça cinco coisas: exporte cada imagem no tamanho em pixels em que ela aparece (mais ou menos o dobro para telas nítidas), escolha um formato moderno como AVIF ou WebP, comprima com qualidade moderada e compare no olho, sirva vários tamanhos com srcset e use lazy loading em tudo que está abaixo da dobra. Esses passos resolvem a maior parte dos avisos de imagem no Lighthouse e costumam reduzir muito o peso da página, porque a foto original direto da câmera ou da ferramenta de design é muitas vezes maior do que a tela precisa.

Passo 1: exporte no tamanho exibido

Uma imagem exibida com 800 pixels de largura não precisa ter 4.000 pixels. O Lighthouse aponta imagens grandes demais porque os pixels extras são baixados, decodificados e jogados fora. Meça a largura da imagem no seu layout no maior tamanho em que ela aparece e exporte com cerca do dobro dessa largura para celulares e notebooks de alta densidade. Passar de duas vezes raramente fica mais nítido e sempre custa bytes.

Passo 2: escolha o formato certo

O formato importa mais do que qualquer controle de compressão. O AVIF costuma gerar o menor arquivo, o WebP chega perto e funciona em todos os navegadores atuais, e JPEG e PNG continuam sendo as alternativas seguras. WebP ou PNG e PNG ou JPG se aprofundam em cada par.

Passo 3: comprima, depois olhe

Os formatos com perda têm um ajuste de qualidade, e o valor certo depende da imagem. Comece em torno de 75 a 80 no WebP e de 50 a 60 no AVIF, exporte e compare com o original em 100% de zoom. Baixe até enxergar uma diferença e depois volte um passo. Rostos, texto pequeno e degradês precisam de mais qualidade do que paisagens cheias de detalhes. Compressão de imagens explica o que o codificador descarta.

Aproveite e remova os metadados, como dados da câmera e miniaturas embutidas. A maioria das ferramentas de exportação faz isso com uma caixinha, e elimina bytes que ninguém vê.

Passo 4: marcação responsiva com srcset e sizes

Com várias larguras exportadas, deixe o navegador escolher. O srcset lista os arquivos e suas larguras; o sizes diz ao navegador com que largura a imagem vai aparecer. O navegador então baixa o menor arquivo que fica nítido o bastante naquela tela.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Para uma imagem dentro de uma coluna, descreva o layout no sizes, por exemplo sizes="(min-width: 1024px) 720px, 100vw". Errar o sizes é o motivo mais comum para uma configuração responsiva continuar baixando o arquivo grande.

Passo 5: as dicas de carregamento que importam

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Essas dicas se ligam diretamente às Core Web Vitals. A imagem de destaque muitas vezes é o elemento do Largest Contentful Paint, que segundo o web.dev deve aparecer em até 2,5 segundos, e dimensões ausentes são uma causa clássica de mudança de layout. Se o seu destaque é um vídeo e não uma imagem, o mesmo raciocínio vale em vídeo de fundo para sites.

Checklist antes de publicar

1. 1

   Meça o espaço

   Descubra a maior largura em que cada imagem aparece no seu layout.

2. 2

   Exporte nos tamanhos certos

   Uma a duas vezes a largura do espaço, mais versões menores para celular.

3. 3

   Escolha o formato

   AVIF ou WebP para fotos e degradês, SVG para logos, PNG só quando ele ganhar.

4. 4

   Comprima no olho

   Baixe a qualidade até ver uma mudança, depois suba um passo.

5. 5

   Faça a marcação

   srcset, sizes, width, height, alt e lazy loading abaixo da dobra.

6. 6

   Teste

   Rode o Lighthouse numa janela anônima e confira as auditorias de imagem e o elemento de LCP.

Boa parte disso fica mais fácil quando a imagem já nasce no tamanho final. No Gradiently você cria uma vez e o Pro redimensiona para todos os tamanhos em um passo, depois exporta PNG, JPG ou SVG em dimensões exatas até 4K, então o destaque, o banner e a imagem Open Graph começam no tamanho que a página vai mostrar.