Imágenes HTML frente a imágenes de fondo CSS: cuándo usar cada una | We.Inc
Elige entre <img> y background-image, escribe texto alt, evita los saltos de diseño, crea srcset y sizes, aplica carga diferida y sirve WebP o AVIF con <picture>.
Imágenes HTML e imágenes de fondo con CSS
Usa un <img> cuando la imagen es contenido: una foto de producto, un gráfico, un retrato. Dale texto alt, width y height. Usa un background-image de CSS cuando la imagen es decoración detrás del texto. Añade srcset y sizes para que los teléfonos descarguen archivos más pequeños, y loading="lazy" en las imágenes por debajo de la primera pantalla, nunca en la imagen de portada.
¿<img> o background-image?
Pregunta
<img>
¿La imagen tiene significado?
Sí, con texto alt
No, solo es decoración
¿Deben indexarla los buscadores?
Sí
Rara vez se detecta
Archivos adaptables
srcset y sizes
image-set() o media queries
Carga diferida
loading="lazy"
Necesita un script
Recortar para llenar una caja
object-fit: cover
background-size: cover
Se imprime por defecto
Sí
Normalmente no
Una tabla de decisión, un generador de srcset que muestra qué archivo descargaría un teléfono o un portátil, y ejemplos editables de cada patrón: texto alt, dimensiones fijas, carga diferida, una imagen de portada rápida, recorte con object-fit junto a background-size, formatos modernos con <picture> y fondos adaptables con image-set().
Empieza por la tabla de decisión para elegir entre un <img> y un fondo CSS.
Si usas <img>, introduce los anchos de tus imágenes en el generador de srcset y elige la disposición. Copia la etiqueta generada.
Mueve los controles de ancho de pantalla y densidad de píxeles para ver qué archivo elegiría el navegador en cada dispositivo.
Copia de los ejemplos cualquier otro patrón que necesites; todos se muestran en vivo junto a su código.
Pon siempre los atributos width y height con el tamaño real en píxeles de la imagen. CSS puede seguir redimensionándola; los atributos permiten al navegador reservar el espacio correcto antes de que llegue el archivo.
Marca la imagen más grande de la primera pantalla con fetchpriority="high" y déjala con carga inmediata. Aplicar carga diferida a esa imagen retrasa el mayor pintado de la página.
Deja alt vacío (alt="") en las imágenes puramente decorativas para que los lectores de pantalla las salten, en lugar de omitir alt, lo que hace que algunos lectores anuncien el nombre del archivo.
Exporta las fotos en dos o tres anchos, por ejemplo 480, 960 y 1600 píxeles. Más tamaños rara vez ayudan y hacen más lentas las compilaciones.
Preguntas frecuentes
¿background-image es malo para el SEO?
Los buscadores indexan las imágenes de los elementos <img> de forma mucho más fiable que las definidas en CSS. Si quieres que una imagen aparezca en la búsqueda de imágenes o que describa tu contenido, ponla en un <img> con un buen texto alt. Los fondos decorativos no pierden nada por estar en CSS.
¿Qué debe decir el texto alt?
Lo que muestra la imagen que importa en ese contexto, en una frase corta. En una foto de producto puede ser el producto y su color; en un gráfico, la conclusión principal. Evita expresiones como imagen de. Si la imagen es un enlace, describe adónde lleva.
¿Qué diferencia hay entre srcset con w y con x?
Los descriptores de ancho (480w, 960w) indican el ancho real de cada archivo y dejan que el navegador elija según el atributo sizes y la densidad de píxeles de la pantalla. Los descriptores de densidad (1x, 2x) sirven para imágenes que siempre se muestran a un tamaño fijo, como un logo.
¿Sigo usando loading="lazy" si uso un framework?
La carga diferida nativa funciona en todos los navegadores principales actuales, así que un simple atributo basta para la mayoría de las imágenes. Los componentes de imagen de los frameworks suelen añadirlo por ti; comprueba que no apliquen también carga diferida a la imagen de portada.
¿Necesito WebP y AVIF a la vez?
No siempre. Los dos formatos son compatibles con los navegadores principales actuales. AVIF suele pesar menos en fotos, pero tarda más en codificarse. Un elemento <picture> con una fuente AVIF, una fuente WebP y un JPEG de respaldo cubre a todo el mundo, pero solo WebP con un JPEG de respaldo es una opción más sencilla y razonable.
Contenido o decoración
La pregunta que resuelve la mayoría de las decisiones sobre imágenes es si un visitante perdería información si la imagen no cargara. Una foto del equipo en la página Sobre nosotros, una captura de pantalla en un tutorial y una foto de producto en una tienda tienen significado, así que van en el HTML con texto alt.
Una textura desenfocada detrás de un título, un patrón en el pie de página o una foto que solo crea ambiente pueden ir en CSS. Así el HTML queda limpio y puedes cambiar la imagen según el tamaño de pantalla sin tocar el marcado. Si hay texto encima, asegúrate de que se siga leyendo cuando falte la imagen definiendo también un color de fondo.
Cómo elige el navegador en srcset
Con descriptores de ancho, el navegador lee primero sizes para saber a qué ancho se dibujará la imagen, por ejemplo 100vw en teléfonos y 50vw en pantallas más anchas. Multiplica ese valor por la proporción de píxeles del dispositivo y elige el archivo más pequeño que tenga al menos ese ancho. Los navegadores también pueden elegir un archivo menor con una conexión lenta o uno mayor que ya tengan en caché.
Acertar con sizes importa más que añadir más anchos. Si sizes dice 100vw pero la imagen solo ocupa un tercio de la pantalla en escritorio, el navegador descarga un archivo tres veces más ancho de lo necesario.
Saltos de diseño y la imagen de portada
Cuando se carga una imagen sin dimensiones, todo lo que hay debajo salta hacia abajo. Los atributos width y height permiten al navegador calcular la proporción de antemano, lo que elimina ese salto y mejora el Cumulative Layout Shift.
La imagen de portada suele ser el elemento del Largest Contentful Paint. Mantenla con carga inmediata, dale fetchpriority="high", sírvela desde tu propio dominio o desde un servicio de imágenes rápido y no la escondas tras un script que la añada más tarde.
Un <img> completo
alt, width, height y carga diferida
Los atributos indican el tamaño real; CSS lo hace fluido. Gracias a width y height, la caja queda reservada antes de que cargue el archivo. Las imágenes de la demo son pequeños SVG en línea.
La imagen de portada: carga inmediata y prioridad alta
Usa esto en la única imagen grande de la parte superior de la página. Todo lo que está por debajo de la primera pantalla lleva loading="lazy".
Reglas del texto alt
Texto alt según el tipo de imagen
Imagen
Foto de producto
Describe el artículo y el detalle que importa: Mesita auxiliar de roble con dos cajones
Gráfico o diagrama
Indica la conclusión: Las ventas se duplicaron entre marzo y junio
Imagen que es un enlace
Nombra el destino: Inicio
Patrón o separador decorativo
Vacío: alt=""
Foto con el mismo pie de foto al lado
Vacío, o una etiqueta corta, para que no se lea dos veces
Texto dentro de una imagen
El mismo texto
object-fit: cover junto a background-size: cover
Ambos recortan una imagen para llenar una caja sin estirarla. object-position y background-position eligen qué parte queda a la vista.
El mismo recorte, de dos formas
A la izquierda, un <img> con object-fit; a la derecha, un div con fondo. Se ven iguales; solo el de la izquierda tiene texto alt y carga diferida.
Imágenes de fondo con CSS
Un fondo detrás de texto, con color de respaldo
El degradado oscuro superpuesto mantiene legible el texto blanco sobre cualquier foto, y el color de fondo aparece si la imagen falla.
Fondos adaptables con image-set()
image-set() deja que el navegador elija por densidad de píxeles o por tipo de archivo. Pon primero una línea con url() simple para los navegadores antiguos.
WebP y AVIF con <picture>
Formatos modernos con un JPEG de respaldo
El navegador usa el primer <source> cuyo tipo admite. El <img> de dentro lleva el texto alt, el tamaño y el archivo de respaldo, y es el elemento al que das estilo.
Ancho completo en todas las pantallas
Ancho completo en teléfonos, la mitad desde 768px
Cuadrícula de tarjetas: 1, 2 o 3 columnas
Columna de contenido limitada a 720px
Generador de srcset y sizes
Anchos que exportas (px)
Ruta del archivo sin el ancho
Extensión
¿A qué ancho se dibuja la imagen?
Introduce al menos un ancho.
Copiar
¿Qué archivo descargaría un dispositivo?
Teléfono pequeño
Teléfono grande
Tableta
Portátil
Portátil Retina
Ancho de pantalla: {vw}px
Densidad de píxeles: {dpr}x
La imagen se dibuja a {slot}px de ancho, así que el navegador necesita unos {px} píxeles del dispositivo y normalmente descargaría
nada todavía
(el archivo más grande, que es menor de lo ideal: plantéate exportar uno más ancho)
Los navegadores pueden elegir un archivo menor con una conexión lenta o uno mayor que ya tengan en caché; esto muestra la elección habitual.