Carregamento lento de imagens no navegador para a Web

É possível usar o atributo loading para carregar imagens de maneira lenta sem precisar criar um código personalizado ou usar uma biblioteca JavaScript separada. Confira uma demonstração desse recurso:

Nesta página, mostramos os detalhes da implementação do carregamento lento no navegador.

Por que usar o carregamento lento no nível do navegador?

De acordo com o HTTP Archive, as imagens são o tipo de recurso mais solicitado para a maioria dos sites e geralmente ocupam mais largura de banda do que qualquer outro recurso. No 90o percentil, os sites enviam mais de 5 MB de imagens em computadores e dispositivos móveis.

Antes, havia duas maneiras de adiar o carregamento de imagens fora da tela:

• Como usar a API Intersection Observer
• Como usar manipuladores de eventos scroll, resize ou orientationchange

Qualquer uma das opções pode permitir que os desenvolvedores incluam um comportamento de carregamento lento, e muitos desenvolvedores criaram bibliotecas de terceiros para fornecer abstrações ainda mais fáceis de usar.

No entanto, com o carregamento lento compatível diretamente com o navegador, não é necessário ter uma biblioteca externa. O carregamento lento no nível do navegador também garante que o carregamento de imagens ainda funcione mesmo que o cliente desative o JavaScript. No entanto, o carregamento é adiado somente quando o JavaScript está ativado.

O atributo loading

O Chrome carrega imagens em prioridades diferentes, dependendo de onde elas estão localizadas em relação à janela de visualização do dispositivo. As imagens abaixo da janela de visualização são carregadas com uma prioridade mais baixa, mas ainda assim são buscadas conforme a página é carregada.

É possível usar o atributo loading para adiar completamente o carregamento de imagens fora da tela:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Veja os valores aceitos para o atributo loading:

• lazy: adia o carregamento do recurso até que ele atinja uma distância calculada da janela de visualização.
• eager: comportamento de carregamento padrão do navegador, que é o mesmo que não incluir o atributo e significa que a imagem é carregada independentemente de onde ela está localizada na página. Esse é o padrão, mas pode ser útil definir explicitamente se as ferramentas adicionarem loading="lazy" automaticamente quando não houver um valor explícito ou se o linter reclamar se ele não estiver definido explicitamente.

Relação entre o atributo loading e a prioridade de busca

O valor eager é uma instrução para carregar a imagem normalmente, sem atrasar ainda mais o carregamento se a imagem estiver fora da tela. Ele não carrega a imagem mais rápido do que outra imagem que não tenha um atributo loading.

Se você quiser aumentar a prioridade de busca de uma imagem importante (por exemplo, a imagem LCP), use Buscar prioridade com fetchpriority="high".

Uma imagem com loading="lazy" e fetchpriority="high" ainda é atrasada enquanto está fora da tela e buscada com alta prioridade quando está quase dentro da janela de visualização. Essa combinação não é realmente necessária, porque o navegador provavelmente carregaria essa imagem com alta prioridade de qualquer maneira.

Limites de distância da janela de visualização

Todas as imagens que aparecem imediatamente sem rolagem carregam normalmente. As imagens muito abaixo da janela de visualização do dispositivo só são buscadas quando o usuário rola perto delas.

A implementação do carregamento lento do Chromium tenta garantir que as imagens fora da tela sejam carregadas cedo o suficiente para que terminem de ser carregadas no momento que o usuário rola até elas, buscando-as bem antes de ficarem visíveis na janela de visualização.

O limite de distância varia de acordo com os seguintes fatores:

• O tipo de recurso de imagem que está sendo buscado
• O tipo de conexão efetiva

Confira os valores padrão para os diferentes tipos de conexão efetivas na origem do Chromium. Teste esses diferentes limites limitando a rede no DevTools.

Melhorias na economia de dados e nos limites de distância da janela de visualização

Em julho de 2020, o Chrome fez melhorias significativas para alinhar os limites de distância da janela de visualização do carregamento lento de imagens para atender melhor às expectativas dos desenvolvedores.

Em conexões rápidas (4G), reduzimos os limites de distância da janela de visualização do Chrome de 3000px para 1250px e, em conexões mais lentas (3G ou anteriores), mudamos o limite de 4000px para 2500px. Essa mudança tem dois efeitos:

• O <img loading=lazy> se comporta mais perto da experiência oferecida pelas bibliotecas de carregamento lento do JavaScript.
• Os novos limites de distância da janela de visualização ainda significam que as imagens provavelmente já terão sido carregadas quando o usuário rolar a tela até elas.

Você pode encontrar uma comparação entre os antigos limites de distância da janela de visualização em relação aos novos em uma das nossas demonstrações sobre conexão rápida (4G) abaixo:

Limites antigos versus novos limites:

e os novos limites em comparação com a LazySizes (uma biblioteca conhecida de carregamento lento do JavaScript):

Atribuir atributos de dimensão às suas imagens

Enquanto o navegador carrega uma imagem, ele não sabe imediatamente as dimensões dela, a menos que elas sejam explicitamente especificadas. Para permitir que o navegador reserve espaço suficiente para imagens em uma página e evitar mudanças de layout disruptivas, recomendamos adicionar os atributos width e height a todas as tags <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Como alternativa, especifique os valores diretamente em um estilo in-line:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

A prática recomendada de definir dimensões se aplica às tags <img>, independente do carregamento lento, mas o carregamento lento pode torná-lo mais importante.

O carregamento lento no Chromium é implementado de forma a aumentar a probabilidade de carregamento das imagens assim que estiverem visíveis, mas ainda há uma chance de que elas não sejam carregadas no momento certo. Se isso acontecer, não especificar width e height nas imagens vai aumentar o impacto na Mudança de layout cumulativa. Se você não conseguir especificar as dimensões das imagens, o carregamento lento delas vai economizar recursos de rede, correndo o risco de aumentar as mudanças de layout.

Na maioria dos cenários, as imagens ainda serão carregadas lentamente se você não especificar dimensões, mas há alguns casos extremos que precisam ser considerados. Sem a especificação de width e height, as dimensões da imagem são padronizadas para 0×0 pixels. Se você tem uma galeria de imagens, o navegador pode decidir que todas elas cabem na janela de visualização no início, porque cada uma delas não ocupa espaço e nenhuma imagem é empurrada para fora da tela. Nesse caso, o navegador decide carregar tudo, tornando a página mais lenta.

Para conferir um exemplo de como loading funciona com um grande número de imagens, consulte esta demonstração.

Você também pode carregar imagens de maneira lenta definidas usando o elemento <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Embora o navegador decida qual imagem carregar de qualquer um dos elementos <source>, você só precisa adicionar loading ao elemento substituto <img>.

Sempre carregar imagens prontamente visíveis na primeira janela de visualização

Para imagens visíveis quando o usuário carrega a página pela primeira vez, e especialmente para imagens LCP, use o carregamento antecipado padrão do navegador para que elas possam ser disponibilizadas imediatamente. Para ver mais informações, consulte Os efeitos do desempenho do carregamento lento em excesso.

Use loading=lazy somente para imagens fora da janela de visualização inicial. O navegador não pode fazer o carregamento lento de uma imagem até saber onde ela precisa estar na página. Isso deixa o carregamento mais lento.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Degradação graciosa

Os navegadores que não oferecem suporte ao atributo loading ignoram esse atributo. Eles não têm os benefícios do carregamento lento, mas não há impacto negativo na inclusão dele.

Perguntas frequentes

Posso fazer o carregamento lento automático de imagens no Chrome?

Anteriormente, o Chromium carregava de forma automática todas as imagens adequadas para serem adiadas se o Modo Lite fosse ativado no Chrome para Android e o atributo loading não estivesse fornecido ou definido como loading="auto". No entanto, o Modo Lite e o loading="auto" foram descontinuados, e não há planos de fornecer imagens lentas automaticamente no Chrome.

Posso alterar a distância que uma imagem precisa estar da janela de visualização antes de carregar?

Esses valores estão fixados no código e não podem ser alterados pela API. No entanto, eles podem mudar no futuro, à medida que os navegadores testarem diferentes variáveis e distâncias de limite.

As imagens de plano de fundo CSS podem usar o atributo loading?

Não, ele só pode ser usado com tags <img>.

O loading pode funcionar com imagens na janela de visualização que não são imediatamente visíveis?

O uso de loading="lazy" pode evitar o carregamento de imagens quando elas não estão visíveis, mas estão dentro da distância calculada. Essas imagens podem estar atrás de um carrossel ou ocultas pelo CSS para determinados tamanhos de tela. Por exemplo, o Chrome, o Safari e o Firefox não carregam imagens com o estilo display: none;, seja no elemento de imagem ou em um elemento pai. No entanto, outras técnicas de ocultação de imagem, como o uso do estilo opacity:0, ainda fazem com que o navegador carregue a imagem. Sempre teste sua implementação completamente para garantir que ela esteja funcionando conforme o esperado.

O Chrome 121 mudou o comportamento de imagens de rolagem horizontal, como carrosséis. Agora eles usam os mesmos limites da rolagem vertical. Isso significa que, para o caso de uso do carrossel, as imagens serão carregadas antes de ficarem visíveis na janela de visualização. Isso significa que o carregamento da imagem tem menos probabilidade de ser perceptível para o usuário, mas à custa de mais downloads. Use a demonstração do carregamento lento horizontal para comparar o comportamento no Chrome com o Safari e o Firefox.

E se eu já estiver usando uma biblioteca de terceiros ou um script para carregar imagens lentamente?

Com suporte total ao carregamento lento integrado a navegadores modernos, você provavelmente não precisa de uma biblioteca ou script de terceiros para fazer o carregamento lento de imagens.

Um motivo para continuar usando uma biblioteca de terceiros com loading="lazy" é fornecer um polyfill para navegadores que não oferecem suporte ao atributo ou ter mais controle sobre quando o carregamento lento é acionado.

Como lidar com navegadores que não são compatíveis com o carregamento lento? {browsers-dont-support}

Crie um polyfill ou use uma biblioteca de terceiros para carregar imagens lentamente no site. Você pode usar a propriedade loading para detectar se um navegador é compatível com o recurso:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Por exemplo, a Slowsizes é uma biblioteca conhecida de carregamento lento do JavaScript. Só é possível detectar o suporte ao atributo loading para carregar Slowsizes como uma biblioteca substituta quando loading não tem suporte. Isso funciona da seguinte maneira:

• Substitua <img src> por <img data-src> para evitar um carregamento antecipado em navegadores não compatíveis. Se o atributo loading tiver suporte, troque data-src por src.
• Se loading não for compatível, carregue um substituto de Slowsizes e inicie-o usando a classe lazyload para indicar quais imagens devem ser carregadas:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Confira uma demonstração desse padrão. Teste-o em um navegador mais antigo para ver o substituto em ação.

O carregamento lento de iframes também é compatível com navegadores?

O <iframe loading=lazy> também foi padronizado. Isso permite que você faça o carregamento lento de iframes usando o atributo loading. Para ver mais informações, consulte Chegou a hora de carregar lentamente iframes fora da tela.

Como o carregamento lento no navegador afeta os anúncios em uma página da Web?

Todos os anúncios exibidos ao usuário como imagens ou iframes com carregamento lento, assim como qualquer outra imagem ou iframe.

Como as imagens são tratadas quando uma página da Web é impressa?

Todas as imagens e iframes são carregados imediatamente quando a página é impressa. Consulte o problema 875403 para saber mais detalhes.

O Lighthouse reconhece o carregamento lento no nível do navegador?

Lighthouse 6.0 e fatores mais recentes em abordagens de carregamento lento de imagens fora da tela que podem usar diferentes limites, permitindo que elas sejam aprovadas na auditoria Adiar imagens fora da tela.

Carregar imagens lentamente para melhorar o desempenho

A compatibilidade do navegador com imagens de carregamento lento pode facilitar bastante a melhoria do desempenho das suas páginas.

Você percebeu algum comportamento incomum com esse recurso ativado no Chrome? Registre um bug.