Rendimiento web: uso de texturas como fondos CSS

Las texturas sin costuras son excelentes fondos CSS. Una sola imagen pequeña puede cubrir todo un viewport mediante el mosaico, dando a una página riqueza visual sin imágenes hero de gran tamaño. Pero una implementación correcta importa: una textura de fondo mal optimizada puede añadir cientos de kilobytes al peso de la página y causar desplazamientos de diseño durante la carga. Esta guía cubre los detalles técnicos del uso de texturas sin costuras en CSS.

Propiedades CSS para texturas en mosaico

El CSS básico para un fondo en mosaico es sencillo:

• background-image — Configúralo como url('/texture.webp') apuntando a tu imagen sin costuras.
• background-repeat — Configúralo como repeat (el valor predeterminado). El navegador repite la imagen en ambas direcciones. Usa repeat-x o repeat-y para mosaico en un solo eje.
• background-size — Controla el tamaño de cada mosaico. Una textura de 512 px con background-size: 256px 256px se repite a la mitad de su tamaño nativo, creando un patrón más denso. Omite esta propiedad para repetir a la resolución nativa.
• background-attachment — Usa scroll (predeterminado) para el comportamiento normal. Evita fixed en dispositivos móviles — fuerza la composición en el hilo principal y causa tirones en iOS Safari.

Selección del formato de imagen

WebP

WebP debería ser tu formato predeterminado para texturas de fondo CSS. Admite tanto compresión con pérdida como sin pérdida, es un 25–35% más pequeño que un PNG de calidad equivalente, y tiene soporte universal en navegadores (más del 97% de cobertura global). Una textura sin costuras de 512 px se comprime a 15–40 KB en WebP con pérdida a calidad 80, frente a los 60–150 KB como PNG.

PNG

Usa PNG solo cuando necesites fidelidad sin pérdida o transparencia (canal alfa). PNG es significativamente más grande que WebP para texturas fotográficas o con degradados. Para patrones simples con pocos colores (tableros de ajedrez, cuadrículas), PNG puede ser competitivo con WebP gracias a su manejo eficiente de regiones de color plano.

JPEG

JPEG carece de transparencia e introduce artefactos de compresión visibles alrededor de los bordes duros, lo que lo convierte en una mala elección para texturas con detalle nítido. Sin embargo, para texturas suaves y orgánicas (nubes, ruido, degradados), JPEG a calidad 75–80 puede ser más pequeño que WebP con calidad aceptable. El soporte es universal.

AVIF

AVIF ofrece las mejores tasas de compresión (un 40–50% más pequeño que WebP) pero tiene tiempos de decodificación más lentos y soporte incompleto en navegadores. Úsalo como mejora progresiva a través del elemento <picture> si sirves texturas como etiquetas <img>. Para fondos CSS, una cadena de respaldo a WebP es más sencilla.

Objetivos de tamaño de archivo

Para texturas de fondo, apunta a estos tamaños de archivo:

• Menos de 30 KB — Ideal. Se carga en un solo ciclo TCP en la mayoría de las conexiones. Impacto negligible en el peso total de la página.
• 30–50 KB — Aceptable. Sigue siendo rápido en banda ancha; considera la carga diferida en móvil.
• 50–100 KB — Úsalo solo si la textura es contenido crítico por encima del pliegue. Carga diferida si está por debajo del pliegue.
• Más de 100 KB — Demasiado grande para un fondo repetido. Reduce la resolución, aumenta la compresión o simplifica el patrón.

Patrones solo con CSS vs. texturas de imagen

Los degradados CSS pueden crear patrones simples — franjas, puntos, tableros de ajedrez — sin ninguna solicitud de red. Un degradado lineal repetido con paradas de color duras produce franjas nítidas. Los degradados radiales crean patrones de puntos. Son independientes de la resolución y extremadamente ligeros.

Sin embargo, los patrones CSS no pueden replicar texturas orgánicas como el ruido, el mármol o el grano del papel. Para cualquier cosa más allá de los patrones geométricos, una pequeña textura de imagen es el mejor enfoque. El punto óptimo es una imagen sin costuras de 256–512 px a menos de 30 KB.

Consideraciones sobre el modo oscuro

Las texturas de fondo a menudo necesitan ajuste para el modo oscuro. Una textura de papel claro sobre un fondo oscuro resulta chocante. Las opciones incluyen:

• Texturas separadas — Sirve una variante oscura usando prefers-color-scheme: dark en una media query o propiedades personalizadas de CSS.
• Superposición de filtro CSS — Aplica filter: invert(1) o filter: brightness(0.3) a un pseudoelemento que lleva el fondo, preservando un único asset de imagen.
• Reducción de opacidad — Usa una textura muy sutil (opacity: 0.05) que funcione tanto en fondos claros como oscuros como una superposición de ruido.

Carga diferida y rendimiento

Las imágenes de fondo CSS no pueden usar el atributo loading="lazy" (que se aplica solo a <img> e <iframe>). Para cargar diferidamente una textura de fondo, usa la API Intersection Observer para añadir una clase CSS que contenga la regla background-image solo cuando el elemento entre en el viewport. Para fondos por encima del pliegue, precarga la imagen con <link rel="preload" as="image" href="/es/texture.webp"> para iniciar la descarga anticipadamente.

Explora la biblioteca de texturas o genera un patrón ligero con el generador de Patrón geométrico o Cuadrícula — ambos producen resultados limpios y de tamaño de archivo reducido, ideales para fondos web.