Uso de recortes de imagen

El empleo de recortes de imagen ( cropsen inglés) es unaen Drupal. Deja usar un recorte de una imagen, es decir, una selecciónde una área con forma rectangulardentro de la imagen. Normalmente son los propios editores quienes pueden escoger la parte de la imagen original a utilizar, de manera que sea un humano, y no una máquina, quien decida cuál es la parte interesante de la imagen. Así, es posible subir una imagen una sola vez y usar derivados de ella de forma automática (o bien semi-automática, ya que solo se tiene que escoger la parte a emplear de la imagen) manteniendo la parte interesante de la imagen siempre y en toda circunstancia visible.

^{Seleccionado una parte de la imagen, o sea, haciendo un cropmanual.}

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

Por otro lado, Drupal Trademark permite definir estilos de imagen, que se pueden aplicar a las imágenes mostradas en el sitio. Los estilos de imagen comúnmente proporcionan miniaturasy recortesde imágenes, pero también se pueden añadir otros efectoscomo pasar a blanco y negro, viñetear o virar cara un color. Para esto, se crea un estilo de imagen con los efectos deseados, y después se aplica dicho estilo a las imágenes que se quiera. Por ejemplo, se puede configurar Drupal Trademark 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 Trademark se encarga de formatearla según se haya configurado. Es importante tomar en consideración que Drupal Trademark produce un nuevo archivo desde la imagen original, dejando la original sin alterar. Esta nueva imagen se considera regenerable, es decir, puede ser borrada y Drupal Trademark 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 género de contenido con una imagen, y sabemos que la fotografía siempre y en toda circunstancia se mostrará cuadrada, lo normal es utilizar un estilo de imagen que use un recorte de imagen cuadrado para cuando se muestre la imagen.

Cómo es frecuente en Drupal Trademark, esta funcionalidad es muy flexible, mas una gran flexibilidad también acarrea una gran posibilidad de usarla de forma poco eficaz o bien difícil de mantener. Si nos desatendemos, podemos acabar debiendo sostener una lista muy larga de recortes ( crops) y estilos de imagen, lo que hará más dura la labor de edición.

Back to top

1) Crops basados en la visualización, una mala idea

Una de las prácticas típicas consiste en crear recortes recortes directamente basadosen la visualización. Esto es, crear un croppor cada estilo de imagen para asegurar que la imagen no se desfigura o bien se recorta de forma automática mostrando una parte poco interesante de la imagen original.

Por ejemplo, imaginemos que tenemos una web de una tienda. Podríamos delimitar 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 proseguimos esta estrategia, se crearían cropspor cada estilo de imagen con el tamaño de cada estilo. Esto nos llevaría a los siguientes problemas:

• El número de cropscrece conforme aparecen nuevos estilos de imagen. Si queremos un nuevo estilo necesitamos un nuevo estilo y un nuevo crop.
• El editor puede verse obligado a efectuar recortes prácticamente iguales (por servirnos de un ejemplo, product_thumbnaily product_cart, de 200x180 y 180x180). Esto resulta aburrido y reduce la productividad del editor.
• Complica la aplicación en el backendya que para atenuar los problemas que pueden surgir se debe prever en qué estilos de imagen se marcha a emplear cada imagen y configurarlo a nivel de campo basado en el contenido. ¿Qué pasa cuando a mitad de proyecto deseamos añadir 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 usamos las imágenes de manera directa asociadas a un campo si no que deseamos emplear una librería tipo Media, puesto que entonces los recortes pertenecen a la imagen que está totalmente disociada del contenido donde se emplea (como debería de ser).

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

Back to top

2) Separar el recorte de los estilos dónde se emplea, una buena idea

El problema esencial de la aproximación previa es que se asocia cada cropcon 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 cropsgené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étera, mas cuando deseamos mostrarla en un hueco con un ratio determinado usamos un recorte para apuntar qué una parte de la imagen es la interesante para ese ratio concreto. Pero esto no guarda relación con su tamaño, solo con el ratio (la relación entre alto y ancho).

Es decir, por un lado tenemos los recortesde imágenes basados en ratios de alto por ancho (cuanto más estándares mejor, 16:9, 1:1, 2:1, etc.. Para producir hay que obviar las dimensiones finales de donde quiera que se pretenda utilizar, solo hay que tomar en consideración el ratio. De esta manera si sostenemos el número de ratios posibles al mínimo, el número de recortes que tendrá que escoger un editor será menor y más fácilmente reutilizable en otras áreas de la página web. ¿Por qué no emplear exactamente el mismo recorte para el producto en el carrito y para las miniaturas si ambas se acercan a 1:1? Aquí es esencial cuestionar los diseños que recibamosy no complicar el backendcon infinitos presetscon alteraciones leves de pocos píxeles. ¡Utilicemos ratios de imagen!

Por otro están los estilosde 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 más bien 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 ratiode visualización (16:9, 3:2, 1:1)y las dimensiones finales. Para esto, al configurar el estilo de imagen, se incluye por una parte el cropo recorte utilizado, que marcará el ratio de visualización, y por otro unas dimensiones finales (ya sea indicando las dos, que deberán ser congruentes con el ratio, o bien 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 empleo de un mismo recorte en diferentes estilosde imagen ( teaser, contenido completo, miniatura, etcétera.
2. No condiciona el recorte según dónde se usa.
3. Permite el ajustede las dimensiones finalesdel estilo sin tener que rehacer el recorte, lo que implica un reajuste manual (toda vez que sostengan exactamente el mismo ratio).
4. Evita la pérdida de recortes en contenido existentetras el ajuste o refactorización del diseño (siempre que sostengan el mismo ratio).
5. Fuerzael empleo de imágenes basadas en ratios reutilizables, algo que evita una dificultad en muchas ocasiones superflua.
6. Los recortesquedan asociadosa la entidad Media(no al contenido como versiones anteriores de Drupal Trademark) 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 evitatener un listado infinito de recortes.
8. Si en un evolutivo se decide que el listado de productos (estilo product_teaser) ya no utiliza el ratio 1:1 si no el 3:2, tan sólo precisamos actualizar el preset puesto que los recortes ya existirán y no implicará acción alguna por la parte de los editores (siempre y cuando ese ratio estuviera dado de alta previamente).

Un sitio web adecuadamente estructurado por norma general no debería de utilizar más de tres-cinco ratios diferentes. Ejemplos:

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

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

Media Library está concebido para reutilizar, volvamos a utilizar los recursos: imagen, título, propiedades y recortes.

2.1) Tamaño de recorte mínimo

Podemos tener un problema con esta estrategia. Al no fijar mínimo en el recorte, los editores pueden seleccionarun áreademasiado pequeñadentro de la imagen. Lo que provocaría que la imagen resultante en la visualizaciónaparezca aumentaday pixelada. Esto se puede solucionar fácilmente de las siguientes maneras:

1. Fijando unas dimensiones mínimasen el recorte ( soft limiten la configuración del efecto del recorte para simplemente dar un aviso si se elige una área de menor tamaño, o bien hard limitsi deseamos impedir que se selecciona un área demasiado pequeña).
2. Estableciendo la resolución mínima de imagenen la configuración del campode la entidad media.
3. Añadiendo una descripciónen los campos de tipo referencia a media o bien en el campo imagen en la entidad media con las resolucionesde los recortes recomendadas.

Al igual que otros campos de la web, los editores tienen la capacidad de previsualizar el resultado de un nodo ya antes de publicarlo, de manera que caso de que usen imágenes de baja resolución pueden percatarse y utilizar un recurso de mejor resolución.

Back to top

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

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

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

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

Siguiendo con el ejemplo precedente de la tienda, pongamos que deseamos utilizar 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 teaserdel producto.

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

A continuación, desde /admin/config/media/image-styles,crearíamos 2 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 anteriormente y un escalado para amoldarlo 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 mas en este caso se escala a otras dimensiones.

En en caso de que se quieran optimar los estilos para pantallas de doble densidad, se tendría que dar de alta otro estilo por cada visualización alterando el escalado al doble del anterior (pero lógicamente el recorte seguiría siendo exactamente 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 señalar 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 preservar durante el recorte automático.}

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

Back to top

4) 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 utilizado sin asociar directamente los recortes con estilos de imagen. Es decir, separa los recortes que uses de las visualizaciones del lugar.
• Configura los estilos de imagen para utilizar los ratios que has creado, usando el efecto de manual cropy el escalado y recortado.

Back to top