Las imágenes de fondo son el mal
Por qué las imágenes de fondo perjudican tus Core Web Vitals y cómo reemplazarlas
Las imágenes de fondo son el mal
Quienes me conocen o me han escuchado hablar pueden haberme oído hablar sobre las imágenes de fondo. Para quienes no lo han hecho: realmente, pero realmente, no me gustan las imágenes de fondo. Aquí explico por qué no me gustan las imágenes de fondo, cómo encontrar rápidamente páginas con imágenes de fondo y cómo solucionarlo.
Última revisión por Arjen Karel en marzo de 2026
Por qué las imágenes de fondo son perjudiciales para las Core Web Vitals
Al cargar una página web, cada elemento tiene su tiempo y su lugar. Con algunas técnicas modernas como aplazar (defer), precargar (preload), carga asíncrona, programación (scheduling), definir la fetchpriority, etc., etc., podemos tener todos los recursos críticos prácticamente bajo control. ¡Excepto las imágenes de fondo!
Considera este ejemplo del mundo real:
A diario, principalmente en sitios de WordPress, veo este patrón. Todas las imágenes normales se cargan con lazy loading y algunas imágenes (en este caso los íconos sociales en el footer) son imágenes de fondo. ¿Adivinas qué sucede?
<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>
Quizás lo hayas adivinado: las imágenes de fondo fuera de pantalla se ponen en cola para su descarga antes que la imagen mucho más importante 'hero.jpg' que, por lo general, se convertirá en el elemento Largest Contentful Paint de la página.
¡Pero eso no es todo!
Como dije, ¡las imágenes de fondo son el mal! Esto se debe a que, además de la extraña prioridad que a veces obtienen, ¡las imágenes de fondo carecen de las increíbles características que tienen las imágenes normales!
- Sin lazy loading: no existe un atributo loading para las imágenes de fondo. El atributo
loading="lazy"que funciona en las etiquetas<img>(con 94.9% de soporte global) simplemente no existe para los fondos. - Sin decodificación asíncrona: no hay atributo decoding para las imágenes de fondo
- Sin fetchpriority: no hay atributo fetchpriority para las imágenes de fondo. No puedes indicarle al navegador qué imagen de fondo importa más. Con las etiquetas
<img>, el 17.3% de las páginas móviles ya usafetchpriority="high"en su imagen LCP según el Web Almanac 2025. - Fuentes de imágenes responsivas: La función image-set() para imágenes de fondo no tiene las mismas características que obtienes con
srcsety el elemento<picture>. - Sin atributos width y height. No poder establecer los atributos simples de ancho y alto significa que el navegador no puede reservar espacio para la imagen, lo que causa Cumulative Layout Shift (CLS). ¡Terminas usando soluciones alternativas de CSS, y tener más código siempre es más lento que tener menos código con la misma complejidad!
- Sin texto alt: las imágenes de fondo no tienen atributo alt, lo que perjudica la accesibilidad y significa que Google Images no puede indexarlas.
Las imágenes de fondo cargadas mediante url() son candidatas válidas para el LCP. Una imagen de fondo lenta aparecerá como tu LCP, pero no tienes ninguna de las herramientas anteriores para optimizarla. El navegador primero debe descargar y analizar el CSS antes de siquiera saber que la imagen existe. Este retraso en la carga de recursos añade aproximadamente 400ms a la mediana del LCP según las propias mediciones de Google.
Según el Web Almanac 2025, el 9% de las páginas móviles todavía usa una imagen iniciada por CSS como su elemento LCP. Ese número no ha cambiado desde 2022. En los sitios monitorizados por CoreDash, reemplazar una imagen de fondo tipo hero por una etiqueta <img> mejoró la mediana del LCP en un 35%.
Encuentra rápidamente todas las imágenes de fondo en una 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!');
Esto te mostrará una tabla con un formato limpio con todos los nombres de las imágenes de fondo y sus initiators.
Cómo evitar las imágenes de fondo
Las imágenes de fondo son fácilmente evitables. Cómo hacer esto depende de la imagen en sí. Hay aproximadamente 2 métodos.
En el caso de 'imágenes normales'
No lo creerías si te dijera que en la mayoría de los casos donde encuentro imágenes de fondo, la parte de fondo de la imagen ni siquiera tiene un propósito. Las imágenes simplemente 'necesitan estar en algún lugar de la página' y el background-image:url() se usa incorrectamente para este fin.
Si este es el caso, simplemente añade una etiqueta de imagen normal y elimina la imagen de fondo de la hoja de estilos.
En el caso de imágenes de cubierta (cover images):
Las cover images son imágenes que cubren por completo un contenedor padre. Usar imágenes de fondo como cover images tiene algo de sentido porque hace mucho tiempo esta solía ser la única forma de obtener cover images y supongo que la gente simplemente se apega a lo que conoce. Afortunadamente, tenemos mejores opciones disponibles. ¡Así que vamos a solucionarlo!
En el caso de cover images simplemente elimina el estilo background-image: url(hero.jpg); background-size: cover; y coloca una imagen normal en ese mismo contenedor y edita el CSS para que se vea así:
<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>
Ahora tienes una imagen adecuada con los atributos width, height, loading, decoding, srcset, fetchpriority y alt. Todo lo que el navegador necesita para cargarla de manera eficiente.
Cuando debes mantener una imagen de fondo
A veces sí necesitas una imagen de fondo en CSS: patrones repetitivos, superposiciones decorativas o casos en los que el CMS no te da otra opción. En esas situaciones, haz un preload de la imagen para que el navegador la descubra de manera temprana:
<link rel="preload" href="hero.webp" as="image" type="image/webp" fetchpriority="high">
Coloca esto lo antes posible en el <head>. Para imágenes de fondo fuera de pantalla, puedes aplazarlas con un IntersectionObserver para que solo se carguen cuando el usuario se desplace cerca de ellas.
Para verificar que tus cambios realmente mejoran la experiencia del usuario real, configura un RUM (Real User Monitoring). Las puntuaciones de laboratorio te dicen qué debería ser más rápido. Los datos de campo de visitantes reales te dicen lo que realmente es.
The RUM tool I built for my own clients.
CoreDash is what I use to audit enterprise platforms. Under 1KB tracking script, EU hosted, no consent banner. AI with MCP support built in. The same tool, available to everyone.
Create Free Account
