Conclusiones clave
- No coloques contenido esencial únicamente en un fondo CSS, porque no cuenta con un mecanismo nativo de texto alternativo.
- Adapta las dimensiones del archivo de origen al área renderizada y a la densidad de pantalla prevista.
- Usa consultas de medios o image-set cuando los requisitos de viewport y densidad sean significativamente diferentes.
Las imágenes de fondo son adecuadas para la decoración y las composiciones en capas, pero es más fácil asignarles un tamaño excesivo y más difícil describirlas que a las imágenes semánticas. Úsalas de forma deliberada, no como un componente universal para imágenes.
Lo más importante
- Protege el contraste del texto en todos los recortes y estados de carga.
- Evita precargar fondos que no sean visibles o importantes para el renderizado inicial.
Decide si la imagen es decorativa o forma parte del contenido
Un fondo CSS forma parte del pintado de un elemento, no es una imagen semántica expuesta mediante un atributo alt. Úsalo para texturas, ambientación, patrones repetidos y composiciones cuyo significado ya esté presente en el texto. Si la imagen es una foto de producto, un gráfico, una captura de pantalla instructiva u otro contenido que el lector debe percibir, un elemento HTML img o picture suele ser la estructura correcta.
Esta decisión afecta más que la accesibilidad. Las imágenes HTML admiten dimensiones intrínsecas, descriptores de fuentes responsivas, controles nativos de carga diferida e indicaciones de recursos del navegador diseñadas para el contenido. Pueden indexarse y seleccionarse como contenido destacado de la página. Un fondo resulta útil precisamente cuando esa semántica es innecesaria y el diseño debe seguir siendo comprensible aunque la capa decorativa nunca se cargue.
Imagen semántica
Usa img o picture, texto alternativo significativo, dimensiones intrínsecas y una política de carga explícita.
Imagen decorativa
Usa un fondo CSS con texto accesible y un color de respaldo utilizable que se renderice de manera independiente.
Texto esencial dentro de la imagen
Pasa el texto a HTML para que siga siendo seleccionable, traducible, adaptable y accesible cuando las imágenes estén desactivadas.
Comprende cómo descubre el navegador una imagen de fondo
El navegador no puede solicitar un fondo definido en una hoja de estilos hasta que haya obtenido el CSS correspondiente y asociado la regla con un elemento. Por lo tanto, un fondo grande de una sección principal puede descubrirse después que una URL de imagen incluida en el HTML inicial. Si esa sección se convierte en el elemento de Largest Contentful Paint de la página, la entrega del CSS y la prioridad de la solicitud de la imagen pueden afectar considerablemente la percepción de la carga.
No supongas que un fondo cuenta con carga diferida nativa. Para el contenido situado debajo de la parte visible, las clases condicionales, las consultas de medios o la lógica de la aplicación pueden retrasar la detección, pero cada enfoque añade complejidad y debe funcionar sin saltos de diseño. Para un fondo crítico, mantén la regla en CSS disponible de inmediato y considera una precarga cuidadosamente ajustada solo después de medir. Una precarga que no coincida puede descargar una opción mientras CSS selecciona otra.
Ajusta el tamaño del archivo de origen al área real de pintura
Comienza con las dimensiones medidas del contenedor en distintos diseños representativos. background-size: cover llena el cuadro y conserva la relación de aspecto, pero recorta el eje que exceda sus límites. contain conserva la imagen completa y puede dejar espacio sin cubrir. Los tamaños explícitos en píxeles o porcentajes pueden ser adecuados para elementos gráficos, mientras que las texturas pequeñas suelen necesitar su tamaño natural y una repetición controlada.
Un archivo de origen debe ser lo bastante grande para la mayor densidad de renderizado prevista, pero no debe dimensionarse de forma predeterminada para el monitor más grande. Una tarjeta de 400 píxeles no necesita la misma imagen derivada que una sección principal de ancho completo. Define un conjunto pequeño y específico de anchos de salida según los puntos de quiebre y espacios reales de los componentes. Prueba teléfonos altos, pantallas horizontales de poca altura, el zoom y el texto traducido, porque pueden cambiar el cuadro y dejar al descubierto un recorte no previsto.
Cover
Adecuado para decoraciones de borde a borde cuando es aceptable perder contenido periférico de la imagen.
Contain
Adecuado cuando toda la imagen debe permanecer visible y el área de fondo sobrante puede diseñarse deliberadamente.
Repeat
Adecuado para texturas pequeñas y continuas; evita descargar un lienzo grande que solo contenga píxeles repetidos.
Fijar el punto focal
Usa una background-position deliberada cuando el sujeto deba permanecer visible y verifica todas las relaciones de aspecto compatibles.
Selecciona deliberadamente fuentes responsivas con CSS
Las consultas de medios pueden asignar archivos diferentes cuando los cambios de diseño son considerables, como una escena amplia en una computadora de escritorio y un recorte más cerrado en un teléfono. image-set() puede ofrecer alternativas de densidad o formato donde sean compatibles. Estos mecanismos son útiles, pero no equivalen a los descriptores de ancho de srcset ni al atributo sizes. Quien crea la hoja de estilos sigue siendo responsable de hacer coincidir cada candidato con el área pintada.
Mantén la cascada fácil de auditar. La propiedad abreviada background restablece las subpropiedades omitidas, por lo que una declaración posterior puede eliminar silenciosamente un color de respaldo, una posición, un modo de repetición o un tamaño. Prefiere propiedades explícitas no abreviadas cuando las reglas se dividan entre puntos de quiebre. Incluye un background-image de referencia antes de las alternativas avanzadas y prueba el estilo calculado final en lugar de asumir que el orden del código fuente expresa el respaldo previsto.
.story-card {
background-image: url('/media/story-640.webp');
background-position: center;
background-size: cover;
}
@media (min-width: 48rem) {
.story-card {
background-image: image-set(
url('/media/story-1280.avif') type('image/avif'),
url('/media/story-1280.webp') type('image/webp')
);
}
}Equilibra el formato, la calidad y la estabilidad visual
Los fondos fotográficos suelen tolerar la compresión con pérdida, mientras que los gráficos planos, los logotipos y las ilustraciones con mucho texto necesitan bordes más definidos y pueden requerir transparencia. Los formatos modernos pueden reducir el tamaño de la transferencia, pero el archivo codificado más pequeño no produce automáticamente el mejor resultado. Inspecciona los degradados, los rostros, los colores de marca y las áreas oscuras con el recorte y la densidad de visualización reales.
Establece un background-color sólido que se aproxime al peso visual de la imagen y mantenga un contraste legible con el primer plano. Aparece antes de que finalice la decodificación y permanece si la solicitud falla, una política de ahorro de datos bloquea la imagen o una hoja de estilos del usuario la elimina. Evita un destello blanco repentino detrás de texto oscuro o un fondo de respaldo oscuro detrás de un logotipo oscuro. La estabilidad durante la carga forma parte del diseño, no es un estado de error que deba ignorarse.
Protege la legibilidad y la accesibilidad en todos los estados
El texto colocado sobre una fotografía debe seguir siendo legible en cada recorte responsivo, no solo en el viewport de referencia del director de arte. Prefiere una superposición predecible, un degradado o un panel de texto opaco independiente en lugar de sombras de texto poco fiables. Si los editores pueden reemplazar el recurso, prueba las imágenes permitidas más claras y más oscuras. El contraste también debe mantenerse antes de que llegue la imagen y después de que no se pueda cargar.
Los modos de colores forzados, los estilos de impresión, la configuración de reducción de datos y los estilos personalizados del usuario pueden suprimir los fondos. Coloca los encabezados, las llamadas a la acción, los precios y la información legal en el HTML normal. Conserva un orden de lectura lógico y un tratamiento del foco del teclado sin depender de la ilustración. Si el fondo solo transmite una atmósfera, no necesita una descripción alternativa; si alguien solicita una descripción, eso indica que la imagen podría ser realmente contenido.
Estado de carga
El color de respaldo debe mantener el contraste con el primer plano antes de que termine la decodificación de la imagen.
Estado de fallo
La navegación, el texto y los controles deben seguir siendo comprensibles cuando falle la URL de la imagen.
Anulación del usuario
Los modos de alto contraste, impresión y reducción de datos no deben eliminar información esencial.
Contenido editable
Cuando se puedan seleccionar imágenes arbitrarias, aplica una superposición o una región segura para el contenido en lugar de confiar en cada recorte.
Genera solo las variantes que pueda usar el diseño
Para ubicaciones de fondo conocidas, genera anchos, alturas y comportamientos de recorte explícitos a partir de una fuente aprobada. Los pipelines de procesamiento suelen ofrecer estrategias de cambio de tamaño con nombre: una estrategia de ajuste conserva la imagen completa dentro de un cuadro delimitador, un recorte de relleno elimina el contenido excedente para ocupar dimensiones exactas y una estrategia de relleno con márgenes conserva la imagen completa dentro de un lienzo exacto. Estas estrategias determinan el propio archivo entregado, antes de que las palabras clave cover y contain de CSS decidan cómo se pinta ese archivo dentro de su cuadro. Elige la estrategia según la composición en lugar de aplicar una sola regla de recorte a todos los recursos.
Optimiza cada archivo generado después de cambiar su tamaño y publica las variantes terminadas en la capa de almacenamiento y entrega del sitio. Mantén un manifiesto que asigne cada función y punto de quiebre a su URL persistente, dimensiones, formato, tamaño en bytes y revisión de la fuente. CSS y el navegador aún seleccionan entre esos archivos; el pipeline de recursos no debe intentar adivinar el diseño de la página durante la ejecución.
Carga las imágenes de fondo según la prioridad de la página
No precargues todos los archivos decorativos. Una precarga consume ancho de banda y puede competir con las fuentes, el CSS, los scripts y el contenido principal real. Reserva la detección temprana para un fondo que, según las mediciones, sea visible de inmediato e importante para la experiencia inicial. La decoración situada debajo de la parte visible puede esperar hasta que el componente correspondiente esté próximo a usarse o puede omitirse en diseños con restricciones.
La política de caché debe ajustarse a la mutabilidad de los recursos. Las URL con huellas digitales pueden tener una vida útil de caché prolongada porque un cambio en el contenido genera una URL nueva. Una URL estable cuyo contenido cambia sin modificarla requiere revalidación y puede mostrar recortes obsoletos entre despliegues. Evita las URL firmadas que caduquen mientras el HTML o CSS almacenado en caché aún haga referencia a ellas. Las políticas entre orígenes, las credenciales y las reglas de Content Security Policy deben configurarse antes de pasar a producción.
Prueba el rendimiento en toda la página
Mide los bytes transferidos, la hora de inicio de la solicitud, el tiempo de decodificación, el Largest Contentful Paint y la estabilidad visual en dispositivos y condiciones de red representativos. Un archivo más pequeño aún puede ser lento si el CSS lo detecta tarde o el navegador decodifica una superficie de píxeles innecesariamente grande. Cuando el elemento visual sea prominente, compara la implementación del fondo con una imagen semántica; el modelo de contenido más sencillo puede ofrecer un mejor rendimiento.
Inspecciona los registros de solicitudes del navegador para detectar descargas duplicadas causadas por consultas de medios superpuestas, precargas sin usar o varias declaraciones abreviadas. Prueba el recorte con textos traducidos realistas y alturas dinámicas del viewport. Supervisa los datos de campo de producción después del lanzamiento, ya que las pruebas de laboratorio no pueden reproducir todas las cachés, los dispositivos y las conexiones. Si un fondo decorativo resulta sistemáticamente costoso y aporta poco, eliminarlo es una optimización válida.
Detección
Confirma cuándo se conoce la URL seleccionada en relación con la carga del HTML y el CSS.
Selección
Verifica que cada viewport descargue la opción prevista en lugar de una alternativa de respaldo más grande.
Renderizado
Comprueba las dimensiones decodificadas, el recorte, el contraste y el impacto de la decodificación en el hilo principal.
Operaciones
Prueba los recursos ausentes, las cachés obsoletas, las URL caducadas, los fallos de CSP y el comportamiento de reversión.
Detalles técnicos que conviene conocer
- Los fondos CSS no tienen atributo alt y se omiten del árbol de accesibilidad, lo cual es apropiado para la decoración, pero incorrecto para diagramas, imágenes de productos o contenido instructivo.
- Un fondo utilizado como elemento Largest Contentful Paint puede detectarse más tarde que una imagen HTML porque el navegador debe obtener y analizar el CSS antes de encontrar su URL.
- Es posible seleccionar fondos responsivos mediante consultas de medios e image-set, pero picture y srcset ofrecen una semántica más completa, descriptores de ancho y un comportamiento nativo de carga diferida.
- La propiedad abreviada background restablece las propiedades de fondo omitidas, lo que puede eliminar accidentalmente un color, una posición, un tamaño o un comportamiento de repetición declarados previamente.
- Las imágenes decorativas no deberían contener texto esencial porque pueden desaparecer en el modo de colores forzados, los estilos de impresión, las descargas fallidas o las hojas de estilos del usuario.
- Un color de respaldo debería conservar un contraste legible antes de que llegue la imagen y cuando una política de reducción de datos o de red impida que se cargue.
Un enfoque práctico
- 1
Clasifica la imagen como decorativa o semántica y elige CSS o HTML según corresponda.
- 2
Mide los tamaños reales del contenedor y crea un conjunto pequeño de variantes con una finalidad concreta.
- 3
Establece explícitamente el color de respaldo, la posición, el tamaño y el comportamiento de repetición.
- 4
Prueba el tamaño de transferencia, el LCP, el contraste y los recortes en dispositivos representativos.
Límite de la arquitectura
CSS determina cómo se pinta un fondo, mientras que el sitio sigue siendo responsable de las dimensiones de origen, la prioridad de precarga, la selección responsiva, el almacenamiento en caché y la entrega. Una imagen de fondo nunca sustituye el contenido semántico.
Preguntas frecuentes
¿Una imagen de fondo CSS puede tener texto alternativo?
No. Los fondos CSS no cuentan con el mecanismo nativo de texto alternativo de un elemento HTML img. Úsalos solo cuando la imagen sea decorativa o cuando su información esté presente por completo en el HTML cercano. Usa img o picture para el contenido visual significativo.
¿background-size: cover siempre es responsivo?
Responde al tamaño del cuadro, pero lo hace mediante recortes y conserva la relación de aspecto. No elige un archivo de origen con el tamaño adecuado ni protege al sujeto. Proporciona variantes adecuadas, establece una posición focal y prueba distintas relaciones de aspecto.
¿Conviene precargar el fondo de una sección principal?
Solo cuando las mediciones demuestren que es un recurso importante ubicado en la parte visible al cargar la página y que descubrirlo tarde perjudica la carga. La precarga debe coincidir con la URL que seleccionará el CSS. Precargar un fondo decorativo o situado debajo de la parte visible puede retrasar recursos más importantes.
¿Cómo se puede aplicar carga diferida a una imagen de fondo?
CSS no tiene un equivalente directo del atributo loading de img. Un sitio puede diferir la clase o la regla de la hoja de estilos que introduce la URL, a menudo cerca del viewport, pero deben probarse el JavaScript adicional y los estados de fallo. Usa una imagen semántica cuando sea importante el comportamiento nativo de carga de imágenes.
¿Qué debe mostrarse mientras se descarga un fondo?
Establece un color de fondo sólido que mantenga el contraste del texto y se aproxime al tono visual previsto. El componente completo, incluidos el contenido y los controles, debe seguir siendo utilizable solo con ese color.