Krypton Solid

¿Imágenes receptivas dirigidas automáticamente por arte? Aqui tienes. – Revista Smashing

¿Imágenes receptivas dirigidas automáticamente por arte? Aqui tienes. – Revista Smashing

En muchos proyectos, las imágenes receptivas no son un problema técnico, sino un preocupación estratégica. La entrega de diferentes imágenes a diferentes pantallas es técnicamente posible con srcset y tamaños y el elemento 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, marcado de imágenes receptivas también debe generarse y agregarse en 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 horizontal / vertical), el marcado debe actualizarse. La cantidad de trabajo adicional requerido a menudo causa problemas, por lo que si tiene una toma de producto perfecta, debe crear manualmente variantes para dispositivos móviles, retrato y paisaje y vistas más grandes, o crear complementos y extensiones para automatizar de alguna manera el proceso.

Técnica de imágenes compresivas: duplicar las dimensiones del archivo, guardar con la peor calidad posible.

A veces, las soluciones alternativas también funcionan bien. Uno de ellos es compresivo imagenes, una técnica inteligente que sugiere que el el nivel de compresión hace una mayor diferencia que sus dimensiones físicas. Entonces, en palabras de Scott Jehl, “dadas dos imágenes idénticas que se muestran con 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. «

Otras lecturas en SmashingMag:

Así que, básicamente, podríamos ampliar una imagen determinada, guardarla en la peor calidad posible en Photoshop y dejar que el navegador haga el cambio de escala; en promedio, la imagen real enviada a la red sería más grande en dimensiones, pero aproximadamente. 50–65% más pequeño en tamaño de archivo. Ahora, esa 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 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, permitiendo 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.

Recortando la entropía con imgix.
Recorte automático de puntos de interés con imgix, utilizando la crop=entropy parámetro para el cultivo automatizado inteligente.

La parte de «recortar» es complicada, 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 considere que encajaría mejor, no será una gran molestia, podría usar 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 ejemplo, API de Mobify.js, imágenes receptivas en el núcleo de WordPress y hay una solución para Drupal, también.

Sin embargo, si la dirección de arte lo hace importa, por ejemplo, si desea enviar tomas de productos muy específicas a diferentes tipos de pantallas, tendrá que buscar opciones más avanzadas. Una foto de paisaje amplio reducido 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 consciente del contenido en Photoshopo usa herramientas como Smartcrop.js, que es una implementación bastante simple de recorte de imágenes consciente del contenido con JavaScript. Potencialmente, incluso podríamos integrar el smartcrop-cli (junto con ImageOptim-CLI) en nuestros procesos de creación de Grunt y Gulp y recorta imágenes sobre la marcha. También podrías usar imgix con su recorte automático de puntos de interés. Eso ya es un gran comienzo, pero tendríamos que escribir el marcado para todas esas variantes manualmente.

Smartcrop.js
Smartcrop.js, una implementación bastante simple de recorte de imágenes consciente del contenido con JavaScript.

Buenas noticias: hay un niño nuevo en la cuadra. Hace solo unos días, escribimos sobre el generador de puntos de interrupción de imágenes receptivas, una pequeña herramienta de código abierto que le permite calcular puntos de interrupción 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 marcado de imágenes receptivas que luego puede copiar / pegar en su HTML. Puedes ir aún más lejos y automáticamente imágenes sensibles al arte directo utilizando la API de la herramienta.

Smartcrop.js
Un Demostración de imágenes receptivas dirigidas por arte por Eric Portis, basado en su artículo en imágenes dirigidas por arte generadas automáticamente.

Como Eric Portis explica en su artículo, al usar la API de Cloudinary, puede especificar un crop_mode que te permite imitar background-size: cover en CSS. Además de proporcionar alturas y anchos, también puede especificar el punto focal utilizando el gravity parámetro, factor de zoom y proporciones de aspecto de suministro, que pueden 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 quieres poder definir puntos focales para imágenes explícitamente, es posible que desee examinar Chisporrino (no es gratis), 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 la escala de cada imagen.

Resumen

Idealmente, nos encantaría tener una herramienta que generara recortes «lo suficientemente inteligentes» y conectara el marcado de imágenes receptivas en la compilación automáticamente, o proporcionara una interfaz para ajustar visualmente el punto focal de las imágenes y la salida «lista para usar». go ”marcado. Aún no hemos llegado a ese punto, pero podríamos estarlo pronto.

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 al arte, ya sea manualmente o mediante la creación de complementos CMS personalizados.

Deja un comentario