Otimizar imagens para a web sem perder qualidade

Para otimizar imagens para a web sem perda visível, faz cinco coisas: exporta cada imagem no tamanho em píxeis em que é apresentada (cerca do dobro, para ecrãs nítidos), escolhe um formato moderno como AVIF ou WebP, comprime com uma qualidade moderada e compara a olho, serve vários tamanhos com srcset e aplica lazy loading a tudo o que fica abaixo da dobra. Estes passos resolvem a maioria dos avisos de imagens no Lighthouse e costumam reduzir bastante o peso da página, porque a fotografia original, vinda diretamente da câmara ou da ferramenta de design, é muitas vezes maior do que o ecrã precisa.

Passo 1: exporta no tamanho em que mostras

Uma imagem apresentada com 800 píxeis de largura não precisa de ter 4000. O Lighthouse assinala imagens demasiado grandes porque os píxeis a mais são descarregados, descodificados e deitados fora. Mede a largura máxima da imagem no teu layout e exporta com cerca do dobro, para telemóveis e portáteis de alta densidade. Passar do dobro raramente se nota na nitidez e custa sempre bytes.

Passo 2: escolhe o formato certo

O formato pesa mais do que qualquer controlo de compressão. O AVIF costuma dar o ficheiro mais pequeno, o WebP chega perto e é suportado em todo o lado nos navegadores atuais, e o JPEG e o PNG continuam a ser as alternativas seguras. WebP vs PNG e PNG vs JPG aprofundam cada par.

Passo 3: comprime e depois olha

Os formatos com perdas têm uma definição de qualidade, e o valor certo depende da imagem. Começa por 75 a 80 no WebP e por 50 a 60 no AVIF, exporta e compara com o original a 100% de zoom. Baixa até veres diferença e depois sobe um degrau. Rostos, texto fino e gradientes precisam de mais qualidade do que paisagens cheias de detalhe. Compressão de imagem explica o que o codificador deita fora.

Aproveita para retirar os metadados, como dados da câmara e miniaturas incorporadas. A maioria das ferramentas de exportação faz isso com uma caixa de seleção, e elimina bytes que ninguém vê.

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

Com várias larguras exportadas, deixa o navegador escolher. O srcset lista os ficheiros e as respetivas larguras; o sizes diz ao navegador que largura a imagem terá. O navegador descarrega então o ficheiro mais pequeno que ainda é nítido naquele ecrã.

<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, descreve o layout em sizes, por exemplo sizes="(min-width: 1024px) 720px, 100vw". Errar no sizes é o motivo mais comum de uma configuração responsiva continuar a descarregar o ficheiro grande.

Passo 5: indicações de carregamento que contam

<!-- 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" />

Estas indicações correspondem diretamente às Core Web Vitals. A imagem hero é muitas vezes o elemento do Largest Contentful Paint, que a web.dev recomenda que seja apresentado em 2,5 segundos, e a falta de dimensões é uma causa clássica de mudança de layout. Se o teu hero for um vídeo em vez de uma imagem, aplica-se o mesmo raciocínio em vídeos de fundo para sites.

Uma lista de verificação antes de publicares

1. 1

   Mede o espaço

   Descobre a maior largura apresentada de cada imagem no teu layout.

2. 2

   Exporta nos tamanhos certos

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

3. 3

   Escolhe o formato

   AVIF ou WebP para fotografias e gradientes, SVG para logótipos, PNG só quando compensa.

4. 4

   Comprime a olho

   Baixa a qualidade até notares uma mudança e depois sobe um degrau.

5. 5

   Marca o código

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

6. 6

   Testa

   Corre o Lighthouse numa janela anónima e verifica as auditorias de imagens e o elemento LCP.

Muito disto é mais fácil quando a imagem é feita logo no tamanho final. No Gradiently desenhas uma vez e o Pro redimensiona para todos os tamanhos num só passo, exportando depois PNG, JPG ou SVG com dimensões exatas até 4K, para que o hero, o banner e a imagem Open Graph comecem cada um no tamanho que a página vai mostrar.