Imagens de fundo são do mal
Por que imagens de fundo prejudicam suas Core Web Vitals e como substituí-las
Imagens de fundo são do mal
Aqueles que me conhecem ou já me ouviram palestrar podem ter me escutado falar sobre imagens de fundo. Aqueles que não: eu realmente não gosto de imagens de fundo. Aqui está o porquê de eu não gostar de imagens de fundo, como encontrar rapidamente páginas com imagens de fundo e como corrigi-las.
Última revisão por Arjen Karel em março de 2026
Por que imagens de fundo são ruins para as Core Web Vitals
Ao carregar uma página da web, cada elemento tem seu tempo e seu lugar. Com algumas técnicas modernas como adiamento, pré-carregamento, carregamento assíncrono, agendamento, definição de fetchpriority etc etc, podemos ter todos os recursos críticos praticamente sob controle. Exceto pelas imagens de fundo!
Considere este exemplo do mundo real:
Diariamente, principalmente em sites WordPress, vejo esse padrão. Todas as imagens normais são carregadas via lazy loading e algumas imagens (neste caso, os ícones sociais no rodapé) são imagens de fundo. Você consegue adivinhar o que acontece?
<html>
<head>
<style>
footer {
/* a margin of 100 vh wil make the footer off-screen !*/
margin-top: 100vh;
>.social {
>.facebook {background-image: url('img/facebook.jpg');}
>.instagram {background-image: url('img/instagram.jpg');}
>.linkedin {background-image: url('img/linkedin.jpg');}
>.email {background-image: url('img/email.jpg');}
}
}
</style>
</head>
<body>
<!-- yes this image is lazy loaded, because tiny mistakes happen! -->
<img loading="lazy" src="img/hero.jpg"></img>
<footer>
<div class="social">
<span class="facebook"></span>
<span class="instagram"></span>
<span class="linkedin"></span>
<span class="email"></span>
</div>
</footer>
</body>
</html>
Você deve ter adivinhado: as imagens de fundo fora da tela são colocadas na fila para download antes da imagem 'hero.jpg' muito mais importante que geralmente se tornará o elemento de Largest Contentful Paint na página.
Mas isso não é tudo!
Como eu disse, imagens de fundo são do mal! Isso porque, além da prioridade estranha que elas às vezes recebem, as imagens de fundo não possuem os recursos legais que as imagens normais têm!
- Sem lazy loading: não há atributo de carregamento para imagens de fundo. O atributo
loading="lazy"que funciona em tags<img>(com 94.9% de suporte global) simplesmente não existe para fundos. - Sem async decoding: não há atributo de decoding para imagens de fundo
- Sem fetchpriority: não há atributo de fetchpriority para imagens de fundo. Você não pode dizer ao navegador qual imagem de fundo é mais importante. Com tags
<img>, 17.3% das páginas mobile já usamfetchpriority="high"em sua imagem LCP, de acordo com o Web Almanac 2025. - Fontes de imagens responsivas: A função image-set() para imagens de fundo não tem os mesmos recursos que você obtém com
srcsete o elemento<picture>. - Sem atributo width e height. Não ser capaz de definir o simples atributo de width e height significa que o navegador não pode reservar espaço para a imagem, o que causa Cumulative Layout Shift (CLS). Você acaba usando soluções alternativas em CSS, e mais código é sempre mais lento do que menos código com a mesma complexidade!
- Sem alt text: imagens de fundo não possuem o atributo alt, o que prejudica a acessibilidade e significa que o Google Imagens não pode indexá-las.
Imagens de fundo carregadas via url() são candidatas válidas de LCP. Uma imagem de fundo lenta aparecerá como seu LCP, mas você não tem nenhuma das ferramentas acima para otimizá-la. O navegador deve primeiro baixar e analisar o CSS antes mesmo de saber que a imagem existe. Esse atraso no carregamento do recurso adiciona cerca de 400ms ao LCP mediano de acordo com as próprias medições do Google.
De acordo com o Web Almanac 2025, 9% das páginas mobile ainda usam uma imagem iniciada por CSS como seu elemento LCP. Esse número não mudou desde 2022. Em sites monitorados pelo CoreDash, substituir uma imagem de fundo de destaque (hero) por uma tag <img> melhorou o LCP mediano em 35%.
Como encontrar rapidamente todas as imagens de fundo em uma página
let bgimg = performance.getEntriesByType('resource')
.filter(rs => rs.initiatorType == 'css')
.map(rs => {
return {
name: rs.name,
initiator: rs.initiatorType
}
}) || [];
(bgimg.length > 0)?
console.table(bgimg):
console.log('No background images on this page!');
Isso mostrará a você uma tabela bem formatada com todos os nomes das imagens de fundo e os iniciadores.
Como evitar imagens de fundo
Imagens de fundo são facilmente evitáveis. Como fazer isso depende da imagem em si. Existem aproximadamente 2 métodos.
No caso de 'imagens normais'
Você não acreditaria se eu te contasse, mas na maioria dos casos em que encontro imagens de fundo, a parte de fundo da imagem nem tem um propósito. As imagens apenas 'precisam estar em algum lugar da página' e o background-image:url() é mal utilizado para esse fim.
Se for esse o caso, basta adicionar uma tag de imagem normal e remover a imagem de fundo da folha de estilos.
No caso de imagens de capa (cover images):
Imagens de capa são imagens que cobrem completamente um contêiner pai. Usar imagens de fundo como imagens de capa até faz sentido porque, muito tempo atrás, essa costumava ser a única maneira de obter imagens de capa e acho que as pessoas apenas se apegam ao que conhecem. Felizmente, temos opções melhores disponíveis para nós. Então vamos consertar isso!
No caso de cover images basta remover o estilo background-image: url(hero.jpg); background-size: cover; e colocar uma imagem normal nesse mesmo contêiner e editar o CSS para ficar assim:
<style>
.img-container {
position: relative;
> img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
}
}
</style>
<div class="img-container">
<img
height="500"
width="300"
decoding="async"
loading="lazy"
src="hero.jpg"
srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
alt="alt text"
fetchpriority="low"
>
</div>
Agora você tem uma imagem adequada com os atributos width, height, loading, decoding, srcset, fetchpriority e alt. Tudo que o navegador precisa para carregá-la com eficiência.
Quando você deve manter uma imagem de fundo
Às vezes você realmente precisa de uma imagem de fundo em CSS: padrões de repetição, sobreposições decorativas ou casos em que o CMS não oferece outra opção. Nessas situações, faça o preload da imagem para que o navegador a descubra cedo:
<link rel="preload" href="hero.webp" as="image" type="image/webp" fetchpriority="high">
Coloque isso o mais cedo possível no <head>. Para imagens de fundo fora da tela, você pode adiá-las com um IntersectionObserver para que elas só carreguem quando o usuário rolar a página perto delas.
Para verificar se suas alterações realmente melhoram a user experience real, configure o Real User Monitoring. As pontuações de laboratório dizem a você o que deveria ser mais rápido. Os dados de campo de visitantes reais dizem o que realmente é.
CoreDash já vem com MCP.
Conecta no Claude ou em qualquer agente de IA. Pergunta pra ele por que seu INP disparou terça passada.
Vê como funciona
