Compatibilidade com navegadores
- 77
- 79
- 75
- 15,4
É 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
ouorientationchange
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 adicionaremloading="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 atributoloading
tiver suporte, troquedata-src
porsrc
. - Se
loading
não for compatível, carregue um substituto de Slowsizes e inicie-o usando a classelazyload
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?
Compatibilidade com navegadores
- 77
- 79
- 121
- 16.4
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.