Imágenes adaptables en Drupal: qué hacer después de activar el módulo

Activas el módulo Responsive Image de Drupal, abres su página de configuración y te encuentras con dos estilos llamados Narrow y Wide, una lista de puntos de ruptura y un campo que pide un estilo de imagen para cada uno. La documentación oficial se queda más o menos ahí. Esta guía empieza donde ella termina, con la configuración que usamos en cinco sitios en marcha.

Una nota sobre los nombres: damos los menús como aparecen en la administración en español, con el nombre en inglés entre paréntesis por si la tuya está en inglés. Según la versión de la traducción, alguna etiqueta puede variar ligeramente.

El problema que resuelven las imágenes adaptables

En un móvil, una tarjeta de una cuadrícula mide unos 340 píxeles de ancho. Sin imágenes adaptables, Drupal envía el mismo archivo de 900 píxeles que manda a un ordenador, y el navegador lo encoge. La página se ve bien, pero el móvil ha descargado dos o tres veces más de lo que necesitaba, y ese archivo suele ser el que decide el Largest Contentful Paint (LCP), la medida de velocidad que más le importa a Google.

Con CSS solo (max-width: 100%) conseguimos que la imagen quepa, no que pese menos. Para eso el navegador necesita poder elegir entre varios archivos y una pista de lo grande que va a verse la imagen en pantalla. Eso es exactamente lo que produce el módulo: una etiqueta <img> con un srcset (los archivos) y un atributo sizes (la pista).

Cuando pasamos nuestros sitios de cocina a esta configuración, la nota de PageSpeed en móvil subió de 74 a 100. Las imágenes no fueron el único cambio, pero sí el más grande.

Cómo encajan las piezas

Son cuatro piezas, y el orden importa, porque cada una usa la anterior:

1. Los estilos de imagen (Image styles) crean los archivos: la misma foto recortada a una proporción y guardada en unos pocos anchos, por ejemplo 360 y 720 píxeles, en WebP.
2. Un estilo de imagen adaptable (Responsive image style) agrupa esos estilos y dice cómo ofrecérselos al navegador.
3. Un modo de visualización de Media (view mode; al nuestro lo llamamos Card) muestra la imagen con ese estilo adaptable.
4. Las presentaciones del contenido y las vistas usan ese modo de visualización allí donde aparece la imagen de una tarjeta.

Casi toda la confusión viene del paso 3. Desde que Drupal guarda las imágenes como Media, rara vez se aplica un estilo adaptable directamente a un campo del contenido: se aplica a un modo de visualización de Media, y todo lo demás apunta a ese modo.

Primero, decide: sizes o dirección de arte

El módulo ofrece dos formas de trabajar, y elegir bien ahorra casi todos los quebraderos de cabeza.

• Varios estilos de imagen más sizes. La imagen mantiene el mismo recorte en todos los tamaños; solo cambia su resolución, y el navegador elige el archivo. Es lo que queremos para tarjetas, resúmenes, imágenes de artículos y la mayoría de las portadas.
• Un estilo de imagen por punto de ruptura (dirección de arte). La imagen cambia de recorte: una panórmica en el ordenador, un cuadrado en el móvil. Drupal genera un elemento <picture> y tú asignas un estilo a cada punto de ruptura.

Empieza por la primera. La dirección de arte, solo cuando el recorte tenga que cambiar de verdad, y cuando la configuración sencilla ya funcione.

Paso 1: crea los estilos de imagen

Ve a Configuración → Multimedia → Estilos de imagen (Configuration → Media → Image styles) y añade un estilo por cada tamaño de archivo que quieras ofrecer. Para una tarjeta que nunca se ve a más de 360 píxeles, bastan dos:

• Card 360: efecto Escalar y recortar (Scale and crop), 360 × 240; efecto Convertir (Convert), WebP.
• Card 720: efecto Escalar y recortar, 720 × 480; efecto Convertir, WebP.

Tres reglas hacen que funcione:

1. Una sola proporción por grupo. Los dos estilos son 3:2. Si cambian los anchos pero no la proporción, el navegador puede cambiar de archivo sin que el diseño salte.
2. El ancho máximo en pantalla, a 1x y a 2x. 360 sirve para pantallas normales; 720, para móviles y portátiles con pantalla de alta densidad (las «retina»), que muestran dos píxeles por cada píxel CSS.
3. WebP. Suele pesar entre un 25 y un 35 % menos que un JPEG de la misma calidad, y todos los navegadores actuales lo entienden.

Las imágenes que ocupan todo el ancho de la página, como una portada, necesitan más escalones: por ejemplo 640, 960, 1280 y 1920. No hace falta tener veinte tamaños; con un puñado bien elegido se consigue casi todo el beneficio.

Paso 2: crea el estilo de imagen adaptable

Ve a Configuración → Multimedia → Estilos de imagen adaptables → Añadir estilo de imagen adaptable(Configuration → Media → Responsive image styles → Add responsive image style) y rellénalo así:

• Etiqueta (Label): Card.
• Grupo de puntos de ruptura (Breakpoint group): Responsive image. Este grupo tiene un único punto de ruptura y está pensado justo para esta configuración.
• En ese punto de ruptura, elige Seleccionar varios estilos de imagen y usar el atributo sizes (Select multiple image styles and use the sizes attribute).
• Marca Card 360 y Card 720.
• Sizes: déjalo un momento; es el paso 3.
• Estilo de imagen de respaldo (Fallback image style): Card 360. Es el que reciben los navegadores muy antiguos, y Drupal también toma de él los atributos width y height, así que elige el tamaño al que se ve la imagen en una pantalla normal.

Paso 3: escribe el atributo sizes

sizes es la parte en la que casi todos nos equivocamos, porque parece que pregunta por las pantallas. No es así. Le dice al navegador lo ancha que va a ser la imagen en la página con cada ancho de pantalla, antes de que haya cargado el CSS. Con ese dato, y con la densidad de píxeles de la pantalla, el navegador elige el archivo más pequeño que se vea nítido.

Mide la tarjeta en tres anchos (con las herramientas de desarrollo del navegador, o con una regla sobre una captura):

Y ahora escríbelo en ese orden, de la pantalla más ancha a la más estrecha. Gana la primera condición que se cumple, y el último valor no lleva condición:

(min-width: 1200px) 360px, (min-width: 768px) 50vw, 100vw

vw significa un porcentaje del ancho de la pantalla: 50vw es la mitad y 100vw, toda. Quedarse un poco largo no hace daño; quedarse corto da imágenes borrosas. Pega la línea en el campo Sizes del estilo adaptable y guarda.

Para comprobar qué ha elegido el navegador, abre las herramientas de desarrollo, selecciona la imagen y mira currentSrc en el panel de propiedades, o simplemente pasa el ratón por la etiqueta <img> en el panel de elementos. En un portátil normal deberías ver el archivo de 360; en un móvil o una pantalla de alta densidad, el de 720.

Si más adelante cambias la cuadrícula (cuatro tarjetas por fila en lugar de tres, por ejemplo), vuelve aquí y actualiza sizes. Es el único ajuste que tiene que seguir al diseño.

Paso 4: crea un modo de visualización de Media

Este es el paso que la documentación oficial se salta, y es donde de verdad se usa el estilo adaptable.

1. Ve a Estructura → Modos de visualización → Modos de vista → Añadir modo de vista (Structure → Display modes → View modes → Add view mode), elige Multimedia (Media) y llámalo Card.
2. Ve a Estructura → Tipos de medios → Imagen → Administrar presentación (Structure → Media types → Image → Manage display). Abajo, en Configuración de presentación personalizada (Custom display settings), marca Card y guarda.
3. Abre la pestaña Card nueva. Pon el formato del campo de imagen en Imagen adaptable (Responsive image), pulsa la rueda dentada y elige el estilo adaptable Card.
4. En los mismos ajustes, pon Enlazar imagen a: Nada (Link image to: Nothing). El enlace al artículo vendrá del sitio donde se use la imagen, no del elemento de Media.
5. Oculta la etiqueta del campo y cualquier otro campo (nombre, autor). Guarda.

A partir de ahora, en todo el sitio, «mostrar esta imagen como Card» significa «usar el estilo adaptable Card». Si más adelante cambias los estilos o sizes, todas las tarjetas del sitio lo siguen.

Paso 5: úsalo

En las presentaciones del contenido

En Estructura → Tipos de contenido → Artículo → Administrar presentación (Structure → Content types → Article → Manage display), abre la presentación que quieras, por ejemplo Resumen (Teaser). Pon el formato del campo de Media en Entidad renderizada (Rendered entity) y el modo de visualización en Card. Todos los resúmenes usan ya imágenes adaptables.

La presentación completa del artículo suele necesitar una imagen más grande. Crea un segundo juego de la misma manera (un modo Article con estilos de, pongamos, 800 y 1600 píxeles) en lugar de estirar el de las tarjetas.

En las vistas

Añade el campo de Media y elige Entidad renderizada → Card (Rendered entity). Con eso basta, hasta que quieres que la imagen enlace al artículo, que es justo donde se equivocan la mayoría de los sitios.

La tentación es usar Reescribir resultados (Rewrite results) y escribir nuestro propio HTML con un enlace alrededor de {{ field_image }}. No lo hagas. Views pasa la salida reescrita por un filtro de seguridad que limpia el HTML, y por el camino puede estropear los atributos de la imagen. Nosotros vimos llegar sizes como " 768px) 50vw, 100vw": el navegador ya no lo entiende y descarga siempre el archivo más grande.

Para enlazar la imagen sin reescribirla:

1. Añade el campo Contenido: Enlace al contenido (Content: Link to Content). Marca Excluir de la presentación(Exclude from display) y Mostrar la URL como texto (Output the URL as text). Arrástralo encima del campo de imagen, para que su valor esté disponible.
2. Edita el campo de imagen. En Reescribir resultados (Rewrite results), deja sin marcar «Reemplazar la salida de este campo» (Override the output of this field). Marca Mostrar este campo como un enlace personalizado(Output this field as a custom link) y escribe {{ view_node }} como ruta del enlace.
3. Guarda la vista.

La imagen enlaza ahora al artículo y sus atributos srcset y sizes quedan intactos.

En el texto

Las imágenes que se colocan en el texto con CKEditor 5 son otro caso. Si se insertan como Media, usan el modo de visualización elegido en los ajustes de Media del editor, así que puedes apuntarlo a uno adaptable. Las que se insertan como archivo suelto no reciben srcset; para esas, súbelas a un tamaño razonable (no más anchas que la columna de texto a 2x) y en WebP.

Carga y LCP

Para todas las imágenes que quedan por debajo de la primera pantalla, loading="lazy" es lo correcto: el navegador las pide solo cuando el lector se acerca a ellas. Drupal lo añade por defecto a los campos de imagen, y el formato Imagen adaptable tiene un ajuste Carga de la imagen (Image loading) donde puedes comprobarlo.

La excepción es la imagen principal de arriba de la página, que suele ser el elemento LCP. Esa tiene que cargar enseguida:

• Ponla en eager (inmediata) en el ajuste Carga de la imagen de su formato.
• Si está en el texto o en un bloque personalizado, ten en cuenta que el filtro de texto Carga diferida de imágenes(Lazy load images) del núcleo añade loading="lazy" a todas las imágenes que encuentra. Escribe tú loading="eager" en la imagen de portada; el filtro respeta las que ya llevan el atributo.
• Añade fetchpriority="high" a esa imagen para que el navegador la pida antes que todo lo demás. El núcleo todavía no tiene un ajuste para esto; en un campo de texto se escribe en el HTML, y para los campos hay formatos contribuidos.

Arreglar una sola portada con carga diferida nos dio más LCP que cualquier otro cambio por separado.

¿Merece la pena crear estilos propios?

Sí. Los estilos Narrow y Wide que trae el núcleo son ejemplos pensados para los anchos y proporciones de Olivero, no para tu cuadrícula. Sirven para ver cómo funciona el módulo, no como configuración en la que apoyarse.

Ponles nombre según su uso (Card, Hero, Article), no según su tamaño. Cuando cambie el diseño y las tarjetas crezcan a 400 píxeles, editas Card 360 y Card 720 en un solo sitio, y nada de lo que usa «Card» tiene que cambiar.

Los problemas con los que nos encontramos

• Reescribir en Views. Ya lo hemos visto: nunca envuelvas una imagen adaptable en HTML reescrito.
• Ancho y alto tomados del respaldo. Drupal escribe en la etiqueta <img> las medidas del estilo de respaldo. Eso reserva el hueco correcto mientras carga la página, pero en algunos diseños puede hacer que la imagen se vea al tamaño equivocado. Elige como respaldo el tamaño normal de la imagen en pantalla. Hay incidencias abiertas en el núcleo sobre esto (#3516726, #3523451).
• Los optimizadores del alojamiento. Algunos proveedores reescriben imágenes y CSS sobre la marcha (mod_pagespeed y similares): vuelven a comprimir archivos que Drupal ya ha optimizado, les cambian el nombre y guardan su propia caché. Desactívalos y deja el trabajo a Drupal.
• Creerse PageSpeed al pie de la letra. PageSpeed puede avisar de que un archivo de 720 píxeles es «más grande de lo que se muestra» en una tarjeta de 340. En un móvil con pantalla 2x, el de 720 es justo el que la hace nítida.

Lista de comprobación

• Estilos de imagen: una proporción, el ancho máximo en pantalla a 1x y 2x, WebP.
• Estilo de imagen adaptable: grupo Responsive image, opción sizes, los dos estilos marcados, un respaldo con sentido.
• sizes escrito a partir del diseño real, de la pantalla más ancha a la más estrecha.
• Modo de visualización de Multimedia con el formato Imagen adaptable, sin enlace.
• Presentaciones y vistas con Entidad renderizada → ese modo.
• Enlaces de imagen en Views con un campo Enlace al contenido oculto, sin reescribir resultados.
• Carga diferida por debajo de la primera pantalla; la portada inmediata (eager), con fetchpriority="high".
• Comprobar currentSrc en las herramientas de desarrollo y pasar PageSpeed antes y después.

Dónde aprender más

Casi todo lo que hay está en inglés:

• Responsive images, la página oficial en drupal.org.
• Working with breakpoints in Drupal, sobre los grupos de puntos de ruptura y el archivo del tema.
• Responsive image best practices for Drupal, de Four Kitchens, con más detalle sobre cómo elegir los anchos.
• Mastering Responsive Images: A Drupal Guide, en The DropTimes, un resumen de la serie de Mario Hernández.
• Responsive image styles in Drupal, un curso en vídeo de Drupalize.Me.