Os celulares baixam as suas imagens de desktop

O que está acontecendo de fato

Num site que auditamos neste mês, a imagem principal da página inicial era um WebP de 1920 por 1080 com 2,6 MB. Num celular, essa imagem aparece com cerca de 390 pixels de largura. O celular baixa os 2,6 MB inteiros, decodifica dois milhões de pixels e depois exibe mais ou menos 4% deles.

A mesma imagem, redimensionada para os 800 pixels que um celular de alta densidade realmente usa, tem 33 KB. É a mesma fotografia, com a mesma qualidade naquela tela, com 98% menos para baixar. Numa conexão de dados móveis, é a diferença entre a página aparecer na hora e um espaço em branco por dois ou três segundos.

É também isso que derruba a sua pontuação de Largest Contentful Paint. A imagem principal costuma ser a maior coisa da página, então a página não parece carregada até ela chegar, e ela não chega enquanto cada byte não chegar.

Deixe o navegador escolher

Fazer uma imagem menor não resolve, porque os visitantes no desktop ainda querem a grande. Em vez disso, ofereça vários tamanhos e deixe cada navegador escolher. O HTML permite isso há anos: o srcset lista as opções e as larguras delas, e o sizes diz ao navegador com que largura a imagem vai aparecer no layout, para que ele faça a conta antes de baixar qualquer coisa.

<img
  src="/img/hero-1200.webp"
  srcset="/img/hero-600.webp 600w,
          /img/hero-900.webp 900w,
          /img/hero-1200.webp 1200w,
          /img/hero-1920.webp 1920w"
  sizes="(max-width: 1020px) 100vw, 60vw"
  width="1920" height="1080"
  alt="Volunteers planting trees along the river trail"
  fetchpriority="high"
/>

Leia o sizes como uma promessa sobre o layout: abaixo de 1020 pixels, a imagem ocupa a largura da tela; acima disso, ocupa 60% da largura. O navegador multiplica pela sua própria densidade de pixels, escolhe a menor opção que ainda fica nítida e nunca baixa as outras. Os atributos width e height reservam o espaço para que a página não pule quando a imagem chegar, que é o que o Cumulative Layout Shift mede.

Quando você precisa do elemento picture

O srcset trata uma imagem em vários tamanhos. O elemento picture trata dois problemas diferentes. O primeiro é a direção de arte: um recorte largo de paisagem no desktop e um recorte fechado de retrato no celular, porque o mesmo enquadramento não funciona nos dois formatos. O segundo é a alternativa de formato: oferecer AVIF aos navegadores que o entendem, WebP aos demais e um JPEG como base.

<picture>
  <source media="(max-width: 700px)" type="image/avif" srcset="/img/hero-phone.avif" />
  <source media="(max-width: 700px)" type="image/webp" srcset="/img/hero-phone.webp" />
  <source type="image/avif" srcset="/img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w" sizes="60vw" />
  <source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-1920.webp 1920w" sizes="60vw" />
  <img src="/img/hero-1200.jpg" width="1920" height="1080" alt="Volunteers planting trees along the river trail" />
</picture>

A maioria dos sites não precisa disso. Se um único recorte funciona em todo lugar e você serve WebP, um img simples com srcset é a ferramenta certa, e é muito mais fácil de manter correto. Use o picture quando tiver um problema real de direção de arte ou quando for acrescentar AVIF.

Formatos: WebP agora, AVIF quando puder

O WebP é suportado por todos os navegadores que os seus visitantes usam e costuma ser de 25 a 35% menor do que um JPEG com a mesma qualidade visual. O AVIF é ainda menor, mas mais lento para codificar, então faz sentido para as poucas imagens que mais importam, com o WebP por trás.

O formato não substitui o tamanho. A imagem principal de 2,6 MB citada acima já era WebP. O problema era a largura de 1920 pixels e uma configuração de qualidade mais alta do que qualquer pessoa consegue ver. Primeiro o tamanho, depois o formato, depois a qualidade.

Prioridade e carregamento tardio

Dois atributos completam o trabalho. A imagem principal, a única imagem visível sem rolar, recebe fetchpriority="high", para que o navegador a busque antes das folhas de estilo e dos scripts que, de outro modo, ficariam na frente dela na fila. Tudo o que está abaixo da dobra recebe loading="lazy", para não ser baixado até que o visitante role em direção a ele.

O erro comum é aplicar loading="lazy" também à imagem principal, normalmente porque um plugin o acrescenta a todas as imagens. Adiar o carregamento do maior elemento visível deixa a página mais lenta, e o Lighthouse vai apontar isso.

Onde o WordPress ajuda, e onde os temas desfazem a ajuda

Desde a versão 4.4, o WordPress gera vários tamanhos de cada arquivo enviado e escreve srcset e sizes nas tags de imagem automaticamente. Desde a 6.1, ele pode gerar WebP junto com o original. Para as imagens colocadas pelo editor, o trabalho já está feito.

As imagens principais são onde dá errado. Muitos temas e construtores de páginas (Elementor, WPBakery e outros) produzem a imagem principal como imagem de fundo em CSS, ou apontam diretamente para o original em tamanho cheio, e nenhum dos dois caminhos traz srcset. Uma imagem principal definida como fundo não pode ser responsiva da forma descrita aqui; ela precisa virar um img de verdade, ou o tema precisa de uma variante para celular.

O outro vazamento comum é um plugin que remove ou reescreve as tags de imagem, ou um tema que pede o tamanho chamado full para cada miniatura. Dá para verificar tudo isso do mesmo jeito: veja o código-fonte da página, encontre a imagem principal e procure um atributo srcset. Se ele não estiver lá, o navegador não tem do que escolher.

Verifique o seu próprio site em um minuto

Abra a sua página inicial num celular, ou num navegador de desktop com a emulação de celular ligada e o painel de rede aberto, filtrado por imagens. Ordene por tamanho. Se o primeiro item passar de 300 KB, essa é a imagem a corrigir primeiro. A auditoria gratuita deste site faz a mesma verificação na sua página inicial e mostra em linguagem simples a maior imagem e a economia possível.

Se você é cliente, corrigir a imagem principal de um template é uma pequena tarefa dentro da gestão mensal. Recodificar a biblioteca de mídia inteira é um projeto com orçamento fixo. Em qualquer caso, abra um pedido e começaremos pela imagem que mais custa.