Uso de recortes de imágenes en Drupal 8 de forma óptima

El uso de recortes de imagen (crops en inglés) es una funcionalidad muy extendida en Drupal. Permite utilizar un recorte de una imagen, es decir, una selección de una área con forma rectangular dentro de la imagen. Normalmente son los propios editores quienes pueden seleccionar la parte de la imagen original a usar, de forma que sea un humano, y no una máquina, quien decida cuál es la parte interesante de la imagen. De esta forma, es posible subir una imagen una sola vez y usar derivados de ella de forma automática (o semi-automática, ya que solo se tiene que seleccionar la parte a usar de la imagen) manteniendo la parte interesante de la imagen siempre visible.

^{Seleccionado una parte de la imagen, es decir, haciendo un crop manual.}

Los crops o recortes no generan una nueva imagen por sí mismos y ni alteran de ninguna forma la imagen original. Drupal los suele llamar manual crops, por ser recortes realizados manualmente por un usuario.

Por otro lado, Drupal permite definir estilos de imagen, que se pueden aplicar a las imágenes mostradas en el sitio web. Los estilos de imagen comúnmente proporcionan miniaturas y recortes de imágenes, pero también se pueden agregar otros efectos como pasar a blanco y negro, viñetear o virar hacia un color. Para ello, se crea un estilo de imagen con los efectos deseados, y luego se aplica dicho estilo a las imágenes que se quiera. Por ejemplo, se puede configurar Drupal para que use un estilo de imagen para las imágenes de un campo determinado de un nodo. Así, subamos como subamos la imagen, Drupal se encarga de formatearla según se haya configurado. Es importante tener en cuenta que Drupal genera un nuevo fichero a partir de la imagen original, dejando la original sin modificar. Esta nueva imagen se considera regenerable, es decir, puede ser borrada y Drupal automáticamente la volverá a crear si la necesita.

^{Ejemplo de un estilo de imagen que redimensiona a 50x50.}

Ambas funcionalidades se combinan, de forma que se pueden definir estilos de imágenes que usen los recortes del usuario como parte de la transformación de la imagen. Por ejemplo, si tenemos un tipo de contenido con una imagen, y sabemos que la foto siempre se mostrará cuadrada, lo normal es usar un estilo de imagen que use un recorte de imagen cuadrado para cuando se muestre la imagen.

Cómo es habitual en Drupal, esta funcionalidad es muy flexible, pero una gran flexibilidad también conlleva una gran posibilidad de usarla de forma poco eficiente o difícil de mantener. Si nos descuidamos, podemos acabar  teniendo que mantener una lista muy larga de recortes (crops) y estilos de imagen, lo que hará más ardua la tarea de edición. 

Crops basados en la visualización, una mala idea

Una de las prácticas típicas consiste en crear recortes recortes directamente basados en la visualización. Es decir, crear un crop por cada estilo de imagen para asegurar que la imagen no se deforma o se recorta de forma automática mostrando una parte poco interesante de la imagen original.

Por ejemplo, supongamos que tenemos una web de una tienda. Podríamos definir los siguientes estilos de imagen:

• product_full: para la paǵina de visualización de un producto, se usará para las imágenes del producto mostradas en carrusel, 800x600 píxeles.
• product_thumbnail: también en la paǵina de visualización de un producto, para las miniaturas de las imágenes del producto en el carrusel, 200x180 píxeles.
• product_teaser: para las páginas de listados de productos, búsquedas, etc. 400x400 píxeles.
• product_cart: para mostrar el producto en el carrito. 180x180 píxeles.

Si seguimos esta estrategia, se crearían crops por cada estilo de imagen con el tamaño de cada estilo. Esto nos llevaría a los siguientes problemas:

• El número de crops crece a medida que aparecen nuevos estilos de imagen. Si queremos un nuevo estilo necesitamos un nuevo estilo y un nuevo crop.
• El editor puede verse obligado a realizar recortes prácticamente iguales (por ejemplo, product_thumbnail y product_cart, de 200x180 y 180x180). Esto resulta tedioso y reduce la productividad del editor.
• Complica la aplicación en el backend ya que para mitigar los problemas que pueden surgir se debe prever en qué estilos de imagen se va a utilizar cada imagen y configurarlo a nivel de campo basado en el contenido. ¿Qué pasa cuando a mitad de proyecto queremos agregar un nuevo estilo de imagen? ¡Tenemos que recortar todo el contenido existente para este nuevo crop! 
• La simplificación anterior no es posible cuando no utilizamos las imágenes directamente asociadas a un campo si no que queremos usar una librería tipo Media, ya que entonces los recortes pertenecen a la imagen que está completamente disociada del contenido donde se usa (como debería de ser).

Un caso práctico con este ejemplo: imaginemos que se quiere añadir una funcionalidad de producto destacado, mostrando su imagen a digamos 600x600 píxeles. Ante este escenario necesitamos un estilo de imagen nuevo, product_featured. Este estilo tendría las mismas proporciones que el producto en listados, pero con unas dimensiones superiores (600x600 en vez de 400x400), por lo que sería necesario dar de alta un nuevo recorte (y recortar los contenidos de nuevo).

Separar el recorte de los estilos dónde se usa, una buena idea

El problema esencial de la aproximación previa es que se asocia cada crop con el estilo de imagen donde se utiliza dicho recorte. De esa relación directa es de donde surgen todos los problemas. La solución es separarlos. ¿Cómo? Muy fácil, usando crops genéricos basados en el ratio y no en las dimensiones. Una imagen original puede tener cualquier ratio (puede ser más bien cuadrada, o apaisada, vertical, etc), pero cuando queremos mostrarla en un hueco con un ratio determinado usamos un recorte para indicar qué parte de la imagen es la interesante para ese ratio concreto. Pero esto no tiene nada que ver con su tamaño, solo con el ratio (la relación entre alto y ancho).

Es decir, por un lado tenemos los recortes de imágenes basados en ratios de alto por ancho (cuanto más estándares mejor, 16:9, 1:1, 2:1, etc). Para generar hay que obviar las dimensiones finales de donde quiera que se pretenda usar, solo hay que tener en cuenta el ratio. De esta forma si mantenemos el número de ratios posibles al mínimo, el número de recortes que tendrá que seleccionar un editor será menor y más fácilmente reutilizable en otras áreas de la web. ¿Por qué no utilizar el mismo recorte para el producto en el carrito y para las miniaturas si ambas se aproximan a 1:1? Aquí es importante cuestionar los diseños que recibamos y no complicar el backend con infinitos presets con variaciones leves de pocos píxeles. ¡Utilicemos ratios de imagen!

Por otro están los estilos de imágenes que sí se generan pensando de forma directa y completa en la visualización. Su objetivo no es la selección del área sino optimizar la imagen al formato que se va a visualizar, ahorrando ancho de banda y mejorando por tanto la sensación del usuario (debido a una mejor velocidad de descarga y menor consumo de datos), así como su adaptación a dispositivos con doble densidad de pantalla. Estos estilos tendrán en cuenta el ratio de visualización (16:9, 3:2, 1:1) y las dimensiones finales. Para ello, al configurar el estilo de imagen, se incluye por un lado el crop o recorte usado, que marcará el ratio de visualización, y por otro unas dimensiones finales (ya sea indicando ambas, que deberán ser coherentes con el ratio, o marcando solo una de las dimensiones y dejando que la otra se calcule automáticamente en función del ratio).

¿Por qué es una estrategia flexible y escalable?

1. Permite el uso de un mismo recorte en distintos estilos de imagen (teaser, contenido completo, miniatura, etc).
2. No condiciona el recorte según dónde se utiliza.
3. Permite el ajuste de las dimensiones finales del estilo sin tener que rehacer el recorte, lo que implica un reajuste manual (siempre que mantengan el mismo ratio).
4. Evita la pérdida de recortes en contenido existente tras el ajuste o refactorización del diseño (siempre que mantengan el mismo ratio).
5. Fuerza el uso de imágenes basadas en ratios reutilizables, algo que evita una complejidad muchas veces innecesaria.
6. Los recortes quedan asociados a la entidad Media (no al contenido como versiones anteriores de Drupal) por lo que al reutilizarla, también se reutilizan los recortes ya realizados, evitando tener que volver a realizar otro recorte para el nuevo uso.
7. Se evita tener un listado infinito de recortes.
8. Si en un evolutivo se decide que el listado de productos (estilo product_teaser) ya no usa el ratio 1:1 si no el 3:2, tan sólo necesitamos actualizar el preset ya que los recortes ya existirán y no implicará acción alguna por parte de los editores (siempre que ese ratio estuviera dado de alta previamente). 

Un sitio web adecuadamente estructurado normalmente no debería de utilizar más de 3-5 ratios distintos. Ejemplos:

• 1:1 (cuadrado)
• 3:2 (foto)
• 16:9 (video)
• Otros: Cabecera panorámica, verticales, etc.

Es importante reforzar que un recorte de una imagen es el mejor encuadre para un ratio determinado (cuadrado 1:1, vídeo 16:9, foto 3:2, etc). En el caso de que se necesite para una misma foto usar un recorte distinto siempre es posible subir la foto de nuevo a la librería de imágenes con un nombre diferente que claramente indique que esa foto tiene otro encuadre.

Media Library está pensado para reutilizar, reutilicemos los recursos: imagen, título, propiedades y recortes.

Tamaño de recorte mínimo

Podemos tener un problema con esta estrategia. Al no fijar mínimo en el recorte, los editores pueden seleccionar un área demasiado pequeña dentro de la imagen. Lo que provocaría que la imagen resultante en la visualización aparezca aumentada y pixelada. Esto se puede solucionar fácilmente de las siguientes maneras:

1. Fijando unas dimensiones mínimas en el recorte (soft limit en la configuración del efecto del recorte para simplemente dar un aviso si se selecciona una área de menor tamaño, o hard limit si queremos impedir que se selecciona un área demasiado pequeña).

   

2. Estableciendo la resolución mínima de imagen en la configuración del campo de la entidad media.
3. Añadiendo una descripción en los campos de tipo referencia a media o en el campo imagen en la entidad media con las resoluciones de los recortes recomendadas.

Al igual que otros campos de la web, los editores tienen la capacidad de previsualizar el resultado de un nodo antes de publicarlo, de forma que en el caso de que utilicen imágenes de baja resolución pueden darse cuenta y utilizar un recurso de mejor resolución.

¿Cómo implementamos la solución de recortes basados en ratio?

Lo primero es tener instalados los módulos que vamos a necesitar:

• Media (core)
• Breakpoint (core)
• Responsive Image (core, para dispositivos de doble densidad)
• Media Entity Browser
• Entity Browser
• Inline Entity Form
• Image Widget Crop

Usaremos el módulo Media para las imágenes, junto con Entity Browser, Media Entity Browser y Inline Entity Form. Esto nos permite tener una biblioteca de imágenes, pero sobre todo asociar los recortes a entidades de tipo Media (que serán en este caso imágenes), de forma que siempre que se use una imagen de la biblioteca tendrá los mismos recortes asociados: basta con seleccionar una sola vez el recorte por cada imagen.

Para que los editores puedan seleccionar áreas para los recortes usaremos Image Widget Crop (junto con Crop API, claro). Por último, los módulos Breakpoint y  Responsive Image nos servirán para especificar diferentes estilos de imagen en función de la densidad de pantalla del usuario.

Siguiendo con el ejemplo anterior de la tienda, supongamos que queremos usar esta estrategia para imágenes con ratio 1:1. Hay dos imágenes que se visualizan con este ratio: el producto en el carrito, y el teaser del producto.

Lo primero sería crear un recorte de ratio 1:1. Para ello vamos a /admin/config/media/crop y añadimos un nuevo crop con el nombre «1:1» y el  campo «Aspect Ratio» a 1:1.

A continuación, desde /admin/config/media/image-styles, crearíamos dos estilos de imagen, uno para cada visualización. Primero el producto en el carrito, con el estilo product_cart. Basta con añadir como efectos el recorte manual que hemos creado previamente y un escalado para adaptarlo al tamaño exacto de visualización:

Y después añadimos el estilo de imagen para el producto en cuando se visualiza en teasers. El estilo de imagen es igual pero en este caso se escala a otras dimensiones.

En caso de que se quieran optimizar los estilos para pantallas de doble densidad, se tendría que dar de alta otro estilo por cada visualización modificando el escalado al doble del anterior (pero lógicamente el recorte seguiría siendo el mismo). Por ejemplo, el producto en el carrito pasaría de un escalado a 180x180 a un escalado de 360x360. Además, en el formateador se deberá hacer uso del proporcionado por el módulo Breakpoint «Imagen adaptable». El estilo de imagen adaptable se daría de alta desde /admin/config/media/responsive-image-style (esto lo provee el módulo Responsive Image).

Por último, notar que cuando se añade el efecto de escalado y recortado podemos indicar cual es la zona por defecto a recortar. En caso de que no se realice recorte manual, al aplicar el estilo de imagen Drupal utiliza esta información para hacer el recorte automático.

^{Configuración del efecto de escalado y recorte de un estilo de imagen, seleccionando la parte superior como la parte a conservar durante el recorte automático.}

Esto es especialmente útil para imágenes con personas ya que evitaremos cortar las cabezas si dejamos el recorte a Drupal de forma automática.

Conclusión

Nuestra recomendación para los recortes manuales y los estilos de imagen se puede resumir en:

• Trata de estandarizar los tamaños de visualización de las imágenes a un conjunto reducido de ratios.
• Configura recortes manuales para cada ratio usado sin asociar directamente los recortes con estilos de imagen. Es decir, separa los recortes que uses de las visualizaciones del sitio.
• Configura los estilos de imagen para usar los ratios que has creado, usando el efecto de manual crop y el escalado y recortado.