¿Imágenes receptivas dirigidas automáticamente por el arte? Aqui tienes.

En muchos proyectos, las imágenes receptivas no son un problema técnico sino una preocupación estratégica . Entregar diferentes imágenes a diferentes pantallas es técnicamente posible con srcset y tamaños y el elemento <picture> y Picturefill (o similar) polyfill; pero todas esas variantes de imágenes deben crearse, ajustarse y integrarse en la lógica del CMS existente. Y eso no es fácil.

Además de eso, el marcado de imágenes receptivas también debe generarse y agregarse a HTML, y si una nueva variante de imagen entra en juego en algún momento (por ejemplo, un formato de archivo como WebP o una variante grande de paisaje/retrato), el marcado tiene Para actualizarse. La cantidad de trabajo adicional requerido a menudo causa problemas, por lo que si tiene una imagen perfecta del producto, debe crear manualmente variantes para dispositivos móviles, verticales, horizontales y vistas más grandes, o crear complementos y extensiones para automatizar el proceso de alguna manera.

A veces, las soluciones también funcionan bien. Uno de ellos son las imágenes comprimidas, una técnica inteligente que sugiere que el nivel de compresión hace más diferencia que sus dimensiones físicas. Entonces, en palabras de Scott Jehl, “dadas dos imágenes idénticas que se muestran en el mismo tamaño en un sitio web, una puede ser dramáticamente más pequeña que la otra en tamaño de archivo si está altamente comprimida y dramáticamente más grande en dimensiones de lo que se muestra. ”

Lectura adicional en SmashingMag:

• Imágenes receptivas simples con imágenes de fondo CSS
• Automatice sus imágenes receptivas con Mobify.js
• Cómo resolver imágenes adaptativas en diseño web receptivo
• Imágenes responsivas en WordPress con dirección de arte
  

Básicamente, podríamos ampliar una imagen dada, guardarla en la peor calidad posible en Photoshop y dejar que el navegador haga el cambio de escala: en promedio, la imagen real enviada por la red sería más grande en dimensiones pero aproximadamente un 50-65 % más pequeña en tamaño. tamaño del archivo. Ahora, eso es una gran diferencia. Y funciona en proyectos reales.

La desventaja: descargamos el trabajo al cliente y si el usuario elige guardar la imagen, obtendrá una versión bastante subóptima. Y tampoco nos ayuda con las imágenes dirigidas por arte. Esa no es una solución limpia que estamos buscando.

El diablo está en el ... ¡Back-End!

Un escenario común sería integrar algún tipo de lógica de back-end en el CMS, lo que permitiría a los administradores de contenido cargar imágenes, definir puntos focales para cada imagen dada y generar todas esas variantes recortadas de cada imagen sobre la marcha.

El bit de "recorte" es complicado, y si está perfectamente bien cambiando el tamaño de las imágenes sin dirección de arte y permitiendo que el navegador seleccione una imagen que se sienta mejor, no será una gran molestia, podría use ImageMagick o cualquier otra herramienta de edición de imágenes para cambiar la escala, o los complementos de CMS podrían encargarse de ello por usted: por ejemplo, la API de Mobify.js, las imágenes receptivas en el núcleo de WordPress y también hay una solución para Drupal.

Sin embargo, si la dirección de arte importa , por ejemplo, si desea enviar imágenes de productos muy específicos a diferentes tipos de pantallas, tendrá que buscar opciones más avanzadas. Una foto panorámica amplia reducida para la ventana de visualización estrecha no será particularmente útil, y tampoco lo sería una imagen estrecha ampliada para llenar toda la ventana de visualización en una pantalla ancha. Ahí es donde necesitamos soluciones mejores y más inteligentes.

¿Así que cuales son las opciones?

Bueno, podríamos ejecutar el procesamiento por lotes a través del relleno con reconocimiento de contenido en Photoshop, o usar herramientas como Smartcrop.js, que es una implementación bastante simple de recorte de imágenes con reconocimiento de contenido con JavaScript. Potencialmente, incluso podríamos integrar smartcrop-cli (junto con ImageOptim-CLI) en nuestros procesos de creación de Grunt y Gulp y recortar imágenes sobre la marcha. También puede usar imgix con su recorte automático de puntos de interés. Eso ya es un gran comienzo, pero necesitaríamos escribir el marcado para todas esas variantes manualmente.

Buenas noticias: hay un chico nuevo a la vuelta de la esquina. Hace apenas unos días escribimos sobre el Generador de puntos de ruptura de imágenes receptivas, una pequeña herramienta de código abierto que le permite calcular puntos de ruptura para sus imágenes de forma interactiva. Básicamente, puede cargar una imagen y la herramienta detectará los puntos de interrupción apropiados, cambiará la escala de las imágenes y generará marcas de imágenes receptivas que luego podrá copiar/pegar en su HTML. Puede ir aún más lejos y diseñar automáticamente imágenes receptivas directas utilizando la API de la herramienta.

Como explica Eric Portis en su artículo, al usar la API de Cloudinary, puede especificar un crop_mode que le permite imitar background-size: cover en CSS. Además de proporcionar alturas y anchuras, también puede especificar el punto focal utilizando el parámetro de gravity , el factor de zoom y las proporciones de aspecto, lo que puede hacer que las URL sean un poco más fáciles de leer. De hecho, la API admite la detección de rostros, por lo que si sus imágenes contienen rostros humanos, la dirección de arte se puede automatizar con una mayor probabilidad de un recorte bastante decente.

Si desea poder definir puntos focales para las imágenes de forma explícita , puede consultar Sizzlepig (no gratuito), una herramienta de procesamiento por lotes de imágenes en el navegador que se puede integrar con Google Drive y Dropbox, y le permite cambiar el recorte. y escalado para cada imagen.

Resumen

Idealmente, nos encantaría tener una herramienta que generaría recortes "suficientemente inteligentes" y conectaría automáticamente el marcado de imágenes receptivas en la compilación, o proporcionaría una interfaz para ajustar visualmente el punto focal de las imágenes y producir resultados "listos para usar". ir "marcado. Todavía no hemos llegado a ese punto, pero es posible que pronto lo estemos.

Mientras tanto, las herramientas enumeradas anteriormente podrían ser opciones lo suficientemente buenas para considerar al abordar una tarea bastante desalentadora de producir variantes de imágenes dirigidas por el arte, ya sea manualmente o mediante la creación de complementos CMS personalizados.