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

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

15 Jul 2020 in

Tabla de contenido

El uso de recortes de imagen ( cropsen inglés) es unaen Drupal. Deja utilizar un recorte de una imagen, es decir, una selecciónde una área con forma rectangulardentro de la imagen. Por norma general son los propios editores quienes pueden escoger la parte de la imagen original a usar, de manera 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 utilizar derivados de ella de forma automática (o semi-automática, en tanto que solo se debe escoger la parte a usar de la imagen) manteniendo la parte interesante de la imagen siempre y en toda circunstancia visible.

Seleccionado 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 suele 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 web. Los estilos de imagen comúnmente proporcionan miniaturasy recortesde imágenes, pero también se pueden agregar otros efectoscomo pasar a blanco y negro, viñetear o bien virar cara un color. Para ello, 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 a fin de 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 esencial tener en consideración que Drupal produce un nuevo archivo desde la imagen original, dejando la original sin modificar. Esta nueva imagen se considera regenerable, esto es, 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 una parte de la transformación de la imagen. Por poner un ejemplo, si tenemos un tipo de contenido con una imagen, y sabemos que la foto siempre y en todo momento se mostrará cuadrada, lo normal es emplear un estilo de imagen que use un recorte de imagen cuadrado para cuando se muestre la imagen.

Cómo es frecuente en Drupal, esta funcionalidad es muy flexible, mas una gran flexibilidad también conlleva una enorme posibilidad de usarla de forma poco eficaz o bien difícil de mantener. Si nos descuidamos, podemos terminar teniendo que mantener una lista larguísima de recortes ( crops) y estilos de imagen, lo que hará más ardua la tarea 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. Es decir, crear un croppor cada estilo de imagen para asegurar que la imagen no se deforma o bien se recorta de forma automática mostrando una parte poco interesante de la imagen original.

Por ejemplo, pongamos 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 enseñar 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 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 efectuar recortes prácticamente iguales (por poner un ejemplo, product_thumbnaily product_cart, de 200x180 y 180x180). Esto resulta tedioso y reduce la productividad del editor.
  • Complica la aplicación en el backendya que para atenuar los inconvenientes 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 añadir un nuevo estilo de imagen? ¡Tenemos que recortar todo el contenido existente para este nuevo crop!
  • La simplificación precedente no es posible cuando no empleamos las imágenes de forma directa asociadas a un campo si no que deseamos utilizar una librería tipo Media, en tanto que entonces los recortes pertenecen a la imagen que está totalmente disociada del contenido donde se utiliza (como debería de ser).

Un caso práctico con este ejemplo: pongamos que se quiere añadir una funcionalidad de producto señalado, mostrando su imagen a digamos 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, pero con unas dimensiones superiores(600x600 en lugar de 400x400), por lo que sería necesario dar de alta un nuevo recorte(y recortar los contenidos nuevamente).

Back to top

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

El inconveniente esencial de la aproximación anterior es que se asocia cada cropcon el estilo de imagen donde se emplea dicho recorte. De esa relación directa es de donde brotan todos y cada uno de 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 utilizamos un recorte para señalar qué una parte de la imagen es la interesante para ese ratio específico. Mas esto no tiene nada que ver con su tamaño, solo con el ratio (la relación entre alto y ancho).

Es decir, por una parte 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 generar hay que obviar las dimensiones finales de donde desee que se pretenda utilizar, solo hay que tomar en consideración el ratio. De este modo 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 usar el mismo recorte para el producto en el carrito y para las miniaturas si ambas se acercan a 1:1? Aquí es importante cuestionar los diseños que recibamosy no complicar el backendcon infinitos presetscon variaciones leves de pocos píxeles. ¡Utilicemos ratios de imagen!

Por otro están los estilosde imágenes que sí se producen pensando directamente 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 usado, que marcará el ratio de visualización, y por otro unas dimensiones finales (ya sea señalando ambas, que deberán ser coherentes 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 uso de un mismo recorte en distintos 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 y cuando mantengan el mismo ratio).
  5. Fuerzael empleo de imágenes basadas en ratios reutilizables, algo que evita una complejidad en muchas ocasiones innecesaria.
  6. Los recortesquedan asociadosa la entidad Media(no al contenido como versiones anteriores de Drupal) con lo que al reusarla, también se reutilizan los recortes ya efectuados, evitando tener que volver a efectuar otro recorte para el nuevo empleo.
  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 necesitamos actualizar el preset en tanto que los recortes ya existirán y no implicará acción alguna por la parte de los editores (toda vez que ese ratio estuviera dado de alta previamente).

Un sitio web apropiadamente estructurado en general no debería de emplear más de 3-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, foto 3:2, etc). En el caso de que se necesite para una misma fotografía emplear un recorte distinto siempre es posible subir la foto de nuevo a la librería de imágenes con un nombre diferente que meridianamente indique que esa foto tiene otro encuadre.

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

2.1) Tamaño de recorte mínimo

Podemos tener un inconveniente 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 escoge una área de menor tamaño, o hard limitsi deseamos impedir que se escoge 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 página web, los editores tienen la capacidad de previsualizar el resultado de un nodo antes de publicarlo, de forma que en caso de que usen imágenes de baja resolución pueden caer en la cuenta y emplear un recurso de mejor resolución.

Back to top

3) ¿Cómo incorporamos 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, junto con Entity Browser, Media Entity Browser y Inline Entity Form. Esto nos deja 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 manera que siempre y cuando se use una imagen de la biblioteca tendrá los mismos recortes asociados: basta con elegir una sola vez el recorte por cada imagen.

Para que los editores puedan elegir á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 detallar 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 2 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 esto 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 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 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 pero en este caso se escala a otras dimensiones.

En 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 alterando el escalado al doble del precedente (mas lógicamente el recorte seguiría siendo el mismo). Por servirnos de un ejemplo, el producto en el carro 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, apreciar que cuando se añade el efecto de escalado y recortado podemos señalar como es la zona por defecto a recortar. En caso de que no se realice recorte manual, al aplicar el estilo de imagen Drupal Trademark emplea esta información para hacer el recorte automático.

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

Esto es especialmente útil para imágenes con personas puesto que evitaremos cortar las cabezas si dejamos el recorte a Drupal Trademark 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 normalizar 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 de manera directa los recortes con estilos de imagen. Es decir, aparta los recortes que utilices de las visualizaciones del sitio.
  • 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
Share icon

Solicita información sin compromiso

Políticas de privacidad

De conformidad con lo dispuesto en la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal (LOPD) y su normativa de desarrollo, el responsable del sitio web, CITIFACE MANAGEMENT, S.L., en cumplimiento de lo dispuesto en el art. 5 y 6 de la LOPD, informa a todos los usuarios del sitio web www.citiface.com que faciliten, o vayan a facilitar sus datos personales, que estos serán incorporados a un fichero que se encuentra debidamente inscrito en la Agencia Española de Protección de Datos.

Consentimiento del usuario:
Mediante la marcación de las correspondientes casillas, en los formularios dispuestos en el sitio web para la recogida de datos, los usuarios aceptan expresamente y de forma libre e inequívoca que sus datos personales sean tratados con las finalidades y destinos que se detallarán a continuación.

Finalidad
Los datos que se faciliten a través del portal, se destinarán a la finalidad de responder a su solicitud de información, así como a remitirle información que consideremos que pueda ser de su interés. Incluyendo para ello medios electrónicos (email, sms, etc..). Asimismo, y si usted nos lo indica, le remitiremos a su correo electrónico nuestro boletín electrónico SEO/SEM en el que le trasladaremos recomendaciones y herramientas para la mejora de sus campañas de posicionamiento y pago por clic. Los envíos serán con carácter mensual y podrá dejar de recibirlos en cualquier momento a través del mecanismo establecido en el propio email.

Calidad de datos
Los datos marcados como obligatorios en el formulario que usted cumplimente, son necesarios para la prestación de un servicio óptimo al usuario y dar respuesta a sus requerimientos. En caso de que no sean facilitados todos los datos obligatorios, el prestador no garantiza la prestación de los servicios solicitados.
El usuario será el único responsable, respecto a la veracidad y actualización de los datos aportados a través de los distintos formularios del sitio web

Comunicación de datos a terceros
Sus datos personales no serán cedidos, en ningún caso, a terceras compañías, y que siempre que fuera a realizarse algún tipo de cesión de datos personales, de forma previa, se solicitaría el consentimiento expreso, informado, e inequívoco por parte de los titulares. Ejercicio de derechos ARCO
El prestador garantiza en todo caso al usuario el ejercicio de los derechos de acceso, rectificación, cancelación, información y oposición, en los términos dispuestos en la legislación vigente. Por ello, de conformidad con lo dispuesto en la LOPD, podrá ejercer sus derechos remitiendo una solicitud expresa, junto a una copia de su DNI, a través del correo electrónico: info[at]citiface.com o Calle Farell 3, 1-1. 08014 Barcelona .

Medidas de seguridad
Del mismo modo, el prestador, conforme a lo establecido en el Real Decreto 1720/2007, de 21 de diciembre, por el que se aprueba el Reglamento de desarrollo de la L.O. 15/1999, indica que ha adoptado todas las medidas técnicas y organizativas necesarias para garantizar la seguridad e integridad de los datos de carácter personal que trate, así como para evitar su pérdida, alteración y/o acceso por parte de terceros no autorizados.

Menores de edad
Se prohíbe, expresamente, a los menores de 14 años, facilitar ningún dato a través del presente sitio web, sin contar con el consentimiento y supervisión de sus padres o tutores legales.
Si el prestador tuviera noticia acerca de la infracción de la referida prohibición, procederá a la eliminación de cualquier dato asociado al usuario en cuestión.

Uso de cookies y del fichero de actividad
El prestador por su propia cuenta o la de un tercero contratado para la prestación de servicios de medición, pueden utilizar cookies cuando un usuario navega por el sitio web. Las cookies son ficheros enviados al navegador por medio de un servidor web con la finalidad de registrar las actividades del usuario durante su tiempo de navegación.
Las cookies utilizadas por el sitio web se asocian únicamente con un usuario anónimo y su ordenador, y no proporcionan por sí mismas los datos personales del usuario.
Mediante el uso de las cookies resulta posible que el servidor donde se encuentra la web, reconozca el navegador web utilizado por el usuario con la finalidad de que la navegación sea más sencilla, permitiendo, por ejemplo, el acceso a los usuarios que se hayan registrado previamente, acceder a las áreas, servicios, promociones o concursos reservados exclusivamente a ellos sin tener que registrarse en cada visita. Se utilizan también para medir la audiencia y parámetros del tráfico, controlar el progreso y número de entradas.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionabilidad de este website.
Este sitio web utiliza Google Analytics, un servicio analítico de web prestado por Google, Inc., una compañía de Delaware cuya oficina principal está en 1600 Amphitheatre Parkway, Mountain View (California), CA 94043, Estados Unidos («Google»). Google Analytics utiliza «cookies», que son archivos de texto ubicados en su ordenador, para ayudar al website a analizar el uso que hacen los usuarios del sitio web. La información que genera la cookie acerca de su uso del website (incluyendo su dirección IP) será directamente transmitida y archivada por Google en los servidores de Estados Unidos. Google usará esta información, por cuenta nuestra, con el propósito de seguir la pista de su uso del website, recopilando informes de la actividad del website y prestando otros servicios relacionados con la actividad del website y el uso de Internet.
Google podrá transmitir dicha información a terceros cuando así se lo requiera la legislación, o cuando dichos terceros procesen la información por cuenta de Google. Google no asociará su dirección IP con ningún otro dato del que disponga Google.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionalidad de este website. Al utilizar este website Usted consiente el tratamiento de información acerca de Usted por Google en la forma y para los fines arriba indicados. En todo caso, le informamos que para instar a la cancelación de los posibles tratamientos de datos llevados a cabo por Google, deberá dirigirse a esa compañía, a tal efecto. El prestador no tiene la capacidad técnica ni legal, para proceder al cese en el tratamiento de datos fuera del ámbito delimitado por los ficheros y medios técnicos de su titularidad. Y no se le podrán exigir responsabilidades en este sentido. Para conocer más acerca de las cookies es.wikipedia.org/wiki/Cookie_(informática)

SEMrush

SEMrush

SEMrush

ESTOS EXCLUSIVOS INFORMES GRATUITO REVELAN

7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1#
7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1# EN GOOGLE PARA GANAR 10.000s DE TRÁFICO DE CALIDAD GRATUITO - EN SÓLO 2 MESES
 

Los 7 pasos más poderosos para disparar tu ranking orgánico para ALCANZAR Y MANTENER un impresionante tráfico orgánico es TUYO.

Consigue gratis lo que el 1% de los expertos en SEO venden por miles de euros... y el otro 99% ni siquiera sabe que existe.


OBTEN MI INFORME GRATUITO
5 errores que debes evitar en tu sitio web de Drupal
Ebook - 5 errores que debes evitar en tu sitio web de Drupal (¡podrían costarte miles de euros!)
 

Este Ebook cubre 5 terribles errores que probablemente estés cometiendo ahora mismo con tu sitio web de Drupal.

¡Nº3 TE SORPRENDERÁ! Esta lectura de 10 minutos te ahorrará miles de euros.



OBTEN MI INFORME GRATUITO