Por qué enviamos imágenes más pequeñas al móvil

Una fotografía que ocupa todo un monitor grande y la misma fotografía en una tarjeta del móvil no deberían ser el mismo archivo. Cuando lo son, el móvil descarga píxeles que nunca mostrará y el visitante espera.

El 24 de septiembre de 2026 añadimos a la gestión de medios de CMS4 las dimensiones de las imágenes y una oferta de tamaños para el navegador. El visitante no lo ve como una opción nueva en el menú. Lo nota en cuanto se muestra la página y nada salta. En octubre llegaron más pasos, que explicamos abajo.

Tres datos sin los que el navegador adivina

El navegador elige el archivo adecuado por sí mismo según la pantalla y la densidad de píxeles. Para ello necesita:

• Una oferta de tamaños (srcset). A partir de la foto subida, CMS4 prepara variantes de 160 a 3840 píxeles de ancho, nunca más anchas que el original.

• El espacio en la página (sizes). Cuánto ocupa la imagen con un ancho de ventana determinado. Eso solo lo sabe el componente que dibuja la imagen, así que lo aporta él.

• Las dimensiones (width y height). Con ellas el navegador conoce la proporción antes de que llegue el archivo.

Solo funcionan juntos. Preparar varios archivos no basta si el navegador no sabe cuánto espacio ocupará de verdad la imagen.

Espacio reservado de antemano

El ancho y el alto permiten al navegador reservar el espacio antes de cargar la imagen. Así, textos y botones no saltan cuando llega la fotografía. En una galería o en un listado de proyectos es una diferencia que se nota al navegar.

En la web de P+P en CMS4, logotipos e iconos tienen así dimensiones exactas: 302 imágenes en total. Todas las imágenes de las 48 páginas tienen sus dimensiones, sin ningún cambio visible en el diseño.

Recorte, formato y densidad

El recorte cambia las cuentas

Una foto horizontal dentro de una tarjeta alta se recorta, así que el navegador necesita un archivo mayor de lo que sugiere el ancho de la tarjeta. Para una imagen 3:2 en un mosaico 4:5 es unas 1,875 veces más. Por eso los componentes de CMS4 pueden calcular el tamaño a partir de la forma del marco en el que se dibuja la imagen. El punto focal no se graba en el archivo: solo decide qué parte queda visible al recortar.

Formato según el navegador, densidad con criterio

El mismo ancho puede llegar en distintos formatos: AVIF, WebP, o JPEG o PNG para navegadores que no aceptan los formatos modernos. CMS4 busca la calidad de compresión de cada imagen por separado según una medida de similitud visual, en lugar de un único ajuste para todas. Además, las variantes servidas no llevan metadatos EXIF, XMP ni ICC, así que no viajan con ellas los datos que la cámara escribió en el archivo.

Los móviles con pantallas muy finas descargarían si no imágenes para el triple de densidad de píxeles. Eso son unas 2,25 veces más píxeles que con densidad doble, y a simple vista no se nota. Por eso las páginas publicadas limitan la densidad a aproximadamente el doble.

Qué cargar ya y qué puede esperar

La imagen principal visible al abrir la página tiene que llegar a tiempo; una galería mucho más abajo puede esperar a que el visitante se acerque. CMS4 distingue tres casos: la imagen principal de la página se carga con prioridad, las demás imágenes de la primera pantalla se cargan enseguida y todas las demás, de forma diferida.

La vista previa de la página en CMS4 también vigila estos detalles. Si a la imagen principal se le indicara a la vez «carga diferida» y «carga prioritaria», la vista previa avisaría al autor de la contradicción, igual que de una imagen sin dimensiones o sin texto alternativo.

Una imagen bien preparada conserva lo esencial de la fotografía sin hacer esperar al visitante sin necesidad.

Revisión antes de publicar

La revisión se hace en la página concreta y con distintos anchos, no mirando el peso del archivo. Antes de publicar, comprueba:

• ¿La imagen principal está marcada como prioritaria, y solo esa?

• ¿El recorte conserva lo esencial en el móvil y en un monitor ancho?

• ¿Cada imagen tiene descripción en todos los idiomas de la web?

• ¿La vista previa avisa de alguna imagen sin dimensiones?

• ¿Cómo se ve y se carga la página con varios anchos de ventana?

Cómo trabaja CMS4 con la biblioteca de medios y el rendimiento lo resumimos en la página Medios y rendimiento.