Simplificación de imágenes sensibles con un generador de configuración sensible – Eliminar la placa de calderas

Simplifique el proceso de especificar urls de imagen sensibles en sus proyectos javascript de front-end.

Las imágenes sensibles son un elemento crítico de cualquier sitio web moderno y rápido. Abundan las herramientas y servicios para crear imágenes con capacidad de respuesta: scripts npm, plugins webpack y babel, tareas grunt y gulp, y en particular, plataformas como Cloudinary, Imgix y Kraken (por nombrar sólo algunas). Del mismo modo, hay un montón de herramientas y tutoriales para la optimización de imágenes, la generación de marcadores de posición en línea de baja resolución, etc. Y por supuesto, cada CMS o herramienta de generación de sitios estáticos digna de ese nombre no estaría completa sin su propia visión particular de la gestión de imágenes. En medio de esta plétora de soluciones (a menudo llamadas así) me encuentro continuamente chocando con un problema aparentemente trivial, pero en última instancia importante… especificando todas las variantes de imagen requeridas para todas las imágenes de respuesta usadas a lo largo de un sitio web .Tomemos por ejemplo, una imagen de artículo estándar en TheGuardian.com . Esto se representa como un elemento que utiliza 11 variantes de imagen diferentes; y como una miniatura de un artículo utilizando otros siete. NYTimes.com usa una respuesta element for its article images, with four variants across srcand srcset attributes. Taking top place though is Vox.com . La imagen del artículo presentado en su página principal utiliza un elemento con un total de 33 variantes de imagen diferentes. La misma imagen, mostrada en la página del artículo, utiliza otras 17 variantes diferentes (de nuevo, una elemento). Con unas pocas variaciones más para las miniaturas de diferentes tamaños, es decir, más de 50 versiones diferentes de la misma imagen, la especificación de todos estos derivados se convierte rápidamente en un reto, por no decir un dolor de cabeza en la a**. No importa en qué entorno esté trabajando, ya sea en un entorno de renderizado de servidor más tradicional utilizando un entorno de plantillas como Twig o Nunjucks, o en marcos de trabajo de javascript modernos como React o Vue, el problema sigue existiendo y es esencialmente el mismo: ¿Cómo especificar el enorme número de variantes de imagen necesarias para que un sitio web sea receptivo, de forma sucinta, repetible e idealmente reusable? Responsive Configuration Builder (RCB) es el resultado de mi experiencia y frustración con esta situación. Y espero, al menos, que sea el comienzo de una respuesta.

¿Para quién es?

RCB está diseñado como una biblioteca de utilidades para desarrolladores de front-end que utilizan javascript. Así que debería funcionar en casi cualquier entorno – Nunjucks, Handlebars, Angular, Vue, React, etc. Personalmente, lo he aplicado a proyectos que utilizan Nunjucks para el renderizado en el lado del servidor, y para proyectos basados en React- utilizando Next.js y Gatsby En el caso de Gatsby, React Configuration Builder ayudó a combinar datos extraídos a través de GraphQL desde un CMS sin cabeza, con imágenes alojadas en Cloudinary, para el renderizado utilizando React.

¿Cómo funciona el sistema?

Como su nombre indica, RCB es un constructor de configuraciones. En los términos más simples, toma una especificación y algunos datos de imagen, y los combina para construir un objeto de configuración que puede ser consumido por casi cualquier entorno de plantillas o componentes. Para el lector de mente reactiva, el objeto de configuración resultante se puede pasar directamente como

props

a un componente, aquí hay un ejemplo rápido: ¿Qué está pasando aquí? en este ejemplo muy simple, importamos e inicializamos una instancia

TokenBuilder

, usando una cadena de plantillas. A continuación, configure un objeto de especificación y algunos datos de imagen y páselos al constructor para que los procese, quien a su vez realiza dos tareas clave:

  1. expande el formato abreviado de objetos spec; y
  2. resuelve el objeto spec en una cadena de url final, o conjunto de pares url/descriptor.

En el ejemplo anterior, el campo

srcset

utiliza una abreviatura de objeto spec – los anchos deseados se especifican utilizando una matriz. Finalmente, el constructor resuelve la especificación expandida, combinándola con los datos de imagen proporcionados y la cadena de plantilla previamente configurada para generar los tres pares url/descriptor requeridos. El resultado completo se devuelve como un simple objeto javascript antiguo (con todas las direcciones URL resueltas como valores de cadena) listo para ser emitido utilizando cualquier plantilla o vista de renderizado que desee. El beneficio real – IMO – viene cuando este enfoque se aplica a estructuras más complejas, como por ejemplo esta caja de arena ,. (¡Adelante, esperaré!) Aquí estamos usando el

CloudinaryBuilder

incorporado para procesar un objeto de especificación más complejo, para un elemento completo Note que el RCB pasará a través de cualquier valor de especificación que no reconozca. Así que cualquier medio, tamaño, alt o atributos de título pueden ser incluidos en la especificación.
El objeto spec también puede incluir un objeto de opciones de nivel superior Cualquier par clave/valor especificado aquí se fusiona con las especificaciones individuales. Esto sólo ayuda a reducir la placa de caldera y los datos redundantes, es decir, mantener las especificaciones SECAS. El objeto imagen también funciona un poco como un objeto de opciones; cualquier par clave/valor que se suministre aquí, también se fusionará con las especificaciones individuales, antes de resolver la salida final.finalmente, vale la pena señalar que RCB procesará – es decir, expandirá y resolverá – cualquier valor de atributo que identifique como una especificación. No importa si la clave de especificación es

src

,

srcset

,

data-srcset

,

placeholder

,

lqip

o cualquier otra cosa. Si el constructor reconoce la especificación, la procesará. De esta manera, los objetos de especificaciones RCB pueden ser usados para generar configuración (o accesorios) para casi cualquier tipo de imagen, incluyendo la mayoría de las técnicas de carga perezosa.

Motivación

La motivación principal detrás de Responsive Configuration Builder era proporcionar un método sucinto, componible y reutilizable para generar imágenes con capacidad de respuesta. Después de todo, RCB consume y produce objetos javascript sencillos y antiguos, y por lo tanto puede ser fácilmente incorporado en casi cualquier entorno, tubería o estructura de javascript. sin embargo, lo más importante es la separación arquitectónica que RCB promueve. la especificación real de tamaños y variantes requeridas para un elemento en particular ( imagen o imagen ) es, con razón, una preocupación del front-end. La especificación debería estar ubicada junto con la capa de visualización o las plantillas responsables de renderizar el marcado de la imagen La fuente de cualquier imagen, ya sea un sistema de archivos local o un servicio de imágenes externo, es específica del entorno y normalmente variará de un sitio a otro, así como entre el desarrollo, la puesta en escena y la producción locales. Así que el dominio, nombre de host, puerto, clave de API y secreto, etc., deben ser configurables externamente (a partir de variables de entorno). Por supuesto, todos seguimos los principios de los 12 factores, ¿cierto? finalmente, la imagen específica que se renderizará es la preocupación de la gestión de contenidos o de la capa de datos. Esta capa debe ser en gran medida ignorante del servicio de imagen en uso y de las preocupaciones de presentación. Hay excepciones, por supuesto, pero en la mayoría de los casos sólo se deben mantener datos de imagen mínimos dentro de la capa de contenido. Suficiente para identificar la imagen de forma única y proporcionar metadatos adicionales, como texto alternativo, título, subtítulos e información de derechos de autor. En algunos casos puede ser apropiado incluir algunos consejos adicionales de renderizado, como el punto focal, para ayudar al recorte automático, mientras que en casos extremos puede ser necesario incluir datos de renderizado bastante explícitos, como el tamaño de los cultivos, el escalado y las coordenadas de los recuadros delimitadores. Imágenes de héroes altamente dirigidas por el arte, por ejemplo. Hasta ahora, en mi uso de RCB, he encontrado que ayuda a mantener la separación de las preocupaciones descritas anteriormente. Además, ayuda a prevenir problemas que he encontrado con demasiada frecuencia – donde el conocimiento del dominio se filtra, se adentra en jerarquías de componentes, contamina componentes y hace casi imposible la reutilización y el mantenimiento.

Inspiración

Habiendo usado Craft CMS como mi plataforma preferida para una serie de sitios web diferentes – grandes y pequeños – he apreciado y dependido de tres excelentes plugins de terceros. Tanto ImageOptimize como Imager simplifican la creación de variantes de imagen. Y lo más importante, crearlos a partir de objetos de configuración. Pero sobre todo, el excelente plugin Picture de Marion Newlevant capturó la esencia de un formato de especificación para imágenes sensibles. El plugin de Marion cristalizó un enfoque que había estado buscando a tientas anteriormente, y posteriormente ha proporcionado la base para Responsive Configuration Builder.

Conclusión

Si está construyendo sitios que utilizan imágenes con capacidad de respuesta -especialmente elements-, le animaría a probar Responsive Configuration Builder. Como mínimo, debería ayudar a facilitar la especificación de todas esas resoluciones srcset. Incluso podría ayudar a simplificar los árboles de composición de componentes, proporcionando una separación más limpia del código de manejo de la imagen.

Próximos pasos

En un artículo futuro, detallaré los diferentes formatos de especificación y las funciones de expansión asociadas. Además de demostrar cómo usar RCB para implementar un constructor personalizado.

Referencias

  • Imágenes con capacidad de respuesta en la práctica – Una lista aparte
  • Srcset y tallas – ericportis.com

Etiquetas

CodificaciónJavascriptImágenes receptivasReaccionarDesarrollo frontalDesarrollo frontalProgramación receptivaHistorias técnicas más recientes

Comentarios

Continúe la discusión