Las imágenes de fondo son perjudiciales
Descubre por qué debes evitar las imágenes de fondo en tu sitio web, cómo encontrarlas rápidamente y cómo solucionar este problema
Las imágenes de fondo son perjudiciales
Aquellos de ustedes que me conocen o me han escuchado hablar, puede que me hayan oído hablar sobre las imágenes de fondo. Para los que no: realmente no me gustan las imágenes de fondo. En este artículo explicaré rápidamente 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 solucionarlas!
Por qué las imágenes de fondo son perjudiciales para los Core Web Vitals
Al cargar una página web, cada elemento tiene su momento y su lugar. Con algunas técnicas modernas como deferring, preloading, carga async, scheduling, definir el fetchpriority, etc., podemos tener prácticamente todos los recursos críticos bajo control. ¡Excepto las imágenes de fondo!
Considera este ejemplo del mundo real:
A diario, principalmente en sitios WordPress, veo este patrón. Todas las imágenes normales se cargan con lazy loading y algunas imágenes (en este caso los iconos sociales en el footer) son imágenes de fondo. ¿Puedes adivinar 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"></divspan </div>
</footer>
</body>
</html>Puede que lo hayas adivinado: las imágenes de fondo fuera de pantalla se ponen en cola de descarga antes de la mucho más importante imagen 'hero.jpg' que generalmente se convierte en el elemento Largest Contentful Paint de la página.
¡Pero eso no es todo!
Como dije, ¡las imágenes de fondo son perjudiciales! Esto se debe a que, aparte de la extraña prioridad que a veces obtienen, las imágenes de fondo carecen de las funciones interesantes que tienen las imágenes normales.
- Sin lazy loading: no existe un atributo loading para las imágenes de fondo
- Sin decodificación async: no existe un atributo decoding para las imágenes de fondo
- Sin fetchpriority: no existe un atributo fetchpriority para las imágenes de fondo
- Fuentes de imagen responsive: El atributo image-set() para imágenes de fondo no tiene las mismas funcionalidades que obtienes con un buen diseño responsive.
- Sin atributo width y height. No poder establecer el simple atributo width y height te obligará a usar soluciones alternativas que requieren código (¡más código siempre es más lento que menos código con la misma complejidad!)
- Sin alt text: aunque esto no
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 formato limpio con los nombres de todas las imágenes de fondo y los iniciadores
Cómo evitar las imágenes de fondo
Las imágenes de fondo se pueden evitar fácilmente. Cómo hacerlo depende de la imagen en sí. Hay aproximadamente 2 métodos.
En caso de 'imágenes normales'
No lo creerías si te lo dijera, pero 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 se usa incorrectamente background-image:url() 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 caso de imágenes de cobertura:
Las imágenes de cobertura son imágenes que cubren completamente un contenedor padre. Usar imágenes de fondo como imágenes de cobertura tiene cierto sentido porque hace mucho tiempo esta era la única forma de obtener imágenes de cobertura y supongo que la gente se queda con lo que conoce. Afortunadamente, tenemos mejores opciones disponibles. ¡Así que arreglémoslo!
En caso de imágenes de cobertura, 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>Lab data is not enough.
I analyze your field data to find the edge cases failing your user experience.
- Real User Data
- Edge Case Detection
- UX Focused
