Carregamento lento de imagens no navegador para a Web

O carregamento lento integrado finalmente chegou.

A Web agora oferece suporte a imagens de carregamento lento no nível do navegador. Este vídeo mostra uma demonstração do recurso:

É possível usar o atributo loading para carregar imagens lentamente sem precisar escrever um código personalizado ou usar uma biblioteca JavaScript separada. Vamos nos aprofundar nos detalhes.

Compatibilidade com navegadores

Navegadores que não oferecem suporte ao atributo loading simplesmente o ignoram, sem efeitos colaterais.

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. São muitas fotos de gatos.

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 a funcionalidade de carregamento lento e muitos desenvolvedores criaram bibliotecas de terceiros para fornecer abstrações ainda mais fáceis de usar. 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 adiado de imagens ainda funcione mesmo que o JavaScript esteja desativado no cliente.

O atributo loading

O Chrome carrega imagens com 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 são buscadas enquanto a página é carregada.

É possível usar o atributo loading para adiar completamente o carregamento de imagens fora da tela que são acessadas com a rolagem:

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

Confira 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. Embora esse seja o padrão, pode ser útil definir isso explicitamente se suas ferramentas adicionarem loading="lazy" automaticamente se não houver um valor explícito ou se o linter não estiver definido explicitamente.

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

O valor eager é simplesmente uma instrução para carregar a imagem como de costume, sem atrasar ainda mais o carregamento se ela estiver fora da tela. Isso não significa que o carregamento da imagem é mais rápido do que o de outra sem o atributo loading="eager".

Os navegadores priorizam recursos com base em várias heurísticas, e o atributo loading só declara quando o recurso de imagem está na fila, não como ele é priorizado. eager implica apenas que os navegadores de enfileiramento antecipado usam por padrão.

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

Uma imagem com loading="lazy" e fetchpriority="high" ainda será atrasada quando estiver fora da tela e será buscada com alta prioridade quando estiver perto da janela de visualização. Provavelmente ela seria buscada com alta prioridade nesse caso, de modo que essa combinação não deve ser necessária nem usada.

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

Todas as imagens acima da dobra, ou seja, que podem ser visualizadas imediatamente sem rolagem, são carregadas normalmente. Aquelas que estão muito abaixo da janela de visualização do dispositivo só são buscadas quando o usuário rola a tela para 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 o carregamento seja concluído quando o usuário rolar para perto delas. Ao buscar imagens próximas bem antes de elas se tornarem visíveis na janela de visualização, maximizamos a chance de elas já estarem carregadas no momento em que se tornam visíveis.

Em comparação com as bibliotecas de carregamento lento do JavaScript, os limites para buscar imagens que são exibidas podem ser considerados conservadores.

O limite de distância não é fixo e varia de acordo com vários fatores:

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

É possível encontrar os valores padrão para os diferentes tipos de conexão efetiva na origem do Chromium. Esses números e até mesmo a abordagem de busca somente quando uma determinada distância da janela de visualização é alcançada podem mudar no futuro, à medida que a equipe do Chrome melhorar a heurística para determinar quando começar a carregar.

Economia de dados aprimorada e 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. Em conexões mais lentas (3G ou anteriores), mudamos o limite de 4000px para 2500px. Essa mudança tem duas vantagens:

• 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 nos permitem garantir que as imagens sejam provavelmente carregadas quando o usuário rolar a tela até elas.

Veja uma comparação entre os limites antigos e os novos da janela de visualização em uma das nossas demonstrações sobre conexão rápida (4G):

Limites antigos x novos:

e os novos limites vs. LazySizes (uma biblioteca conhecida de carregamento lento de JS):

Temos o compromisso de trabalhar com a comunidade de padrões da Web para melhorar o alinhamento na forma como os limites de distância da janela de visualização são abordados em diferentes navegadores.

As imagens precisam incluir atributos de dimensão

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 em uma página para imagens, é recomendável que todas as tags <img> incluam os atributos width e height. Sem as dimensões especificadas, podem ocorrer mudanças de layout, que são mais perceptíveis em páginas que levam algum tempo para carregar.

<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>, independentemente de serem carregadas lentamente. Com o carregamento lento, isso pode se tornar mais relevante. A definição de width e height nas imagens de navegadores modernos também permite que eles infiram o tamanho intrínseco delas.

Na maioria dos cenários, as imagens ainda são carregadas lentamente se as dimensões não são incluídas, mas há alguns casos extremos que você precisa conhecer. Sem width e height especificados, as dimensões da imagem serão 0×0 pixels no início. Se você tem uma galeria dessas imagens, o navegador pode concluir que todas elas cabem na janela de visualização no início, já que cada uma ocupa praticamente nenhum espaço e nenhuma imagem é tirada da tela. Nesse caso, o navegador determina que todas elas são visíveis para o usuário e decide carregar tudo.

Além disso, especificar as dimensões da imagem diminui as chances de mudanças de layout acontecerem. Se você não conseguir incluir dimensões para suas imagens, o carregamento lento delas pode ser uma troca entre economizar recursos de rede e ter mais risco de mudança de layout.

Embora o carregamento lento no Chromium seja implementado de forma que as imagens provavelmente sejam carregadas quando ficam visíveis, ainda há uma pequena chance de que elas ainda não tenham sido carregadas. Nesse caso, a ausência dos atributos width e height nessas imagens aumenta o impacto na Mudança de layout cumulativa.

Imagens definidas usando o elemento <picture> também podem ser carregadas lentamente:

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

Embora um navegador decida qual imagem carregar de qualquer um dos elementos <source>, o atributo loading só precisa ser incluído no elemento <img> substituto.

Evitar o carregamento lento de imagens que estão na primeira janela de visualização visível

Evite definir loading=lazy para as imagens que estão na primeira janela de visualização visível. Isso é particularmente relevante para imagens LCP. Consulte o artigo Os efeitos de desempenho do carregamento lento demais para saber mais.

Recomendamos adicionar loading=lazy apenas a imagens posicionadas abaixo da dobra, se possível. As imagens carregadas rapidamente podem ser buscadas imediatamente. Já as imagens com carregamento lento, no momento, o navegador precisa esperar até saber onde a imagem está posicionada na página, o que depende da disponibilidade da IntersectionObserver.

Em geral, todas as imagens da janela de visualização devem ser carregadas prontamente usando os padrões do navegador. Não é necessário especificar loading=eager para que isso seja o caso de imagens na janela de visualização.

<!-- 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 vão ignorar a presença dele. Esses navegadores não têm os benefícios do carregamento lento, mas incluir o atributo não tem impacto negativo neles.

Perguntas frequentes

Há planos para o carregamento lento automático de imagens no Chrome?

Anteriormente, o Chromium carregava de forma lenta automaticamente todas as imagens adequadas para serem adiadas se o Modo Lite estivesse ativado no Chrome para Android e o atributo loading não fosse fornecido ou definido como loading="auto". No entanto, o modo Lite foi descontinuado (assim como o loading="auto" não padrão), e atualmente não há planos de fornecer carregamento lento automático de imagens no Chrome.

Posso mudar a distância que uma imagem precisa estar antes que um carregamento seja acionado?

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 testam diferentes distâncias e variáveis de limite.

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

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

Existe uma desvantagem no carregamento lento de imagens que estão na janela de visualização do dispositivo?

É mais seguro evitar colocar loading=lazy em imagens acima da dobra, já que o Chrome não pré-carrega imagens loading=lazy no verificador de pré-carregamento e também atrasa a busca dessas imagens até que todo o layout esteja concluído. Consulte Evitar o carregamento lento de imagens que estão na primeira janela de visualização visível para mais informações.

Como o atributo loading funciona com imagens que estão na janela de visualização, mas não imediatamente visíveis (por exemplo: atrás de um carrossel ou ocultas pelo CSS para determinados tamanhos de tela)?

O uso de loading="lazy" pode impedir que eles sejam carregados quando não estiverem visíveis, mas dentro da distância calculada. Por exemplo, Chrome, Safari e Firefox não carregam imagens usando o estilo display: none;, seja no elemento de imagem ou em um elemento pai. No entanto, outras técnicas para ocultar imagens, como o uso do estilo opacity:0, ainda resultarão no carregamento delas. Sempre teste sua implementação minuciosamente para garantir que ela está agindo conforme o esperado.

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

Agora que o carregamento lento nativo está disponível em navegadores mais recentes, considere se você ainda precisa de uma biblioteca ou script de terceiros para carregar imagens lentamente.

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 carregamento lento?

Crie um polyfill ou use uma biblioteca de terceiros para carregar imagens lentamente no seu site. A propriedade loading pode ser usada para detectar se o recurso é compatível com o navegador:

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

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

• <img src> foi substituído por <img data-src> para evitar um carregamento antecipado em navegadores incompatíveis. Se o atributo loading for compatível, troque data-src por src.
• Se o loading não tiver suporte, carregue um substituto (lentosizes) e inicie-o. De acordo com os documentos da Lazysizes, a classe lazyload é usada como uma forma de indicar para retardar as imagens que serão carregadas lentamente.

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

Veja uma demonstração desse padrão. Teste 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 e já está implementado no Chromium e no Safari. Isso permite o carregamento lento de iframes usando o atributo loading. Consulte este artigo dedicado sobre carregamento lento de iframe para mais informações.

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

Todos os anúncios exibidos ao usuário na forma de imagem ou iframe 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 serão carregados imediatamente se a página for impressa. Consulte o problema 875403 para saber mais.

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

O Lighthouse 6.0 e versões mais recentes consideram as abordagens de carregamento lento de imagens fora da tela que podem usar limites diferentes, permitindo que elas sejam aprovadas na auditoria Adiar imagens fora da tela.

Conclusão

A preparação do suporte para imagens de carregamento lento pode facilitar bastante a melhoria do desempenho de suas páginas da Web.

Você percebeu algum comportamento incomum com esse recurso ativado no Chrome? Registre um bug (link em inglês).