Imagens de fundo são terríveis
Por que as imagens de fundo prejudicam suas Core Web Vitals e como substituí-las
Imagens de fundo são terríveis
Aqueles que me conhecem ou já me ouviram falar talvez já me tenham ouvido falar sobre imagens de fundo. Para os que não me conhecem: eu realmente, mas 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 as 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 (deferring), pré-carregamento (preloading), carregamento assíncrono (async loading), agendamento, definição de fetchpriority etc., conseguimos manter todos os recursos críticos sob controle. Exceto as imagens de fundo!
Considere este exemplo do mundo real:
Diariamente, principalmente em sites WordPress, vejo esse padrão. Todas as imagens normais carregam com lazy load e algumas imagens (neste caso, os ícones sociais no rodapé) são imagens de fundo. 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 enfileiradas para download antes da imagem 'hero.jpg' muito mais importante que geralmente se tornará o elemento de Largest Contentful Paint na página.
Mas não é só isso!
Como eu disse, as imagens de fundo são terríveis! Isso porque, além da prioridade estranha que às vezes recebem, as imagens de fundo não possuem os recursos interessantes 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 nas tags<img>(com 94,9% de suporte global) simplesmente não existe para fundos. - Sem async decoding: não há atributo decoding para imagens de fundo
- Sem fetchpriority: não há atributo 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 imagem responsivas: a função image-set() para imagens de fundo não possui 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 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 que menos código com a mesma complexidade!
- Sem texto alt: imagens de fundo não têm atributo alt, o que prejudica a acessibilidade e significa que o Google Images não pode indexá-las.
Imagens de fundo carregadas via url() são candidatas válidas para o 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 fazer o download e analisar o CSS antes mesmo de saber que a imagem existe. Esse atraso no carregamento de recursos (resource load delay) 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%.
Encontre 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á uma tabela bem formatada com todos os nomes das imagens de fundo e seus initiators.
Como evitar imagens de fundo
Imagens de fundo são facilmente evitáveis. Como fazer isso depende da própria imagem. Existem basicamente 2 métodos.
No caso de 'imagens normais'
Você não acreditaria se eu dissesse, 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 na 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 do stylesheet.
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, há muito tempo, essa costumava ser a única maneira de obter imagens de capa e acho que as pessoas simplesmente se apegam ao que conhecem. Felizmente, existem opções melhores disponíveis para nós. Então, vamos consertar isso!
No caso de imagens de capa, 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 o que o navegador precisa para carregá-la de forma eficiente.
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 carreguem apenas quando o usuário rolar para 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 informam o que deve ser mais rápido. Os dados de campo de visitantes reais informam o que realmente é.
CoreDash has MCP built in.
Connect it to Claude or any AI agent. Ask it why your INP spiked last Tuesday.
See how it works
