Un Breakpoints Generator per immagini responsive

Responsive Image Breakpoints Generator è una Web application utilizzabile direttamente online che permetterà di affrontare le problematiche connesse alla definizione delle immagini per i diversi device di riferimento; si tratta sostanzialmente di uno strumento per l'ottimizzazione delle componenti grafiche, concepito a partire dalla constatazione che un tool basato sull'automatizzazione potrebbe rappresentare una soluzione più pratica rispetto all'utilizzare una sola immagine per più risoluzioni o più immagini per prevedere tutte le possibili variabili.

Spesso i siti Web progettati seguendo i dettami del Responsive Design devono fare i conti con il supporto offerto dai client, ne consegue che non sempre in fase di rendering vengono selezionate le risoluzioni più corrette per l'area di visualizzazione del browser adottato sul dispositivo corrente; Breakpoints Generator cerca quindi di supplire a questa lacuna con un approccio di tipo matematico che consenta di definire il giusto numero di immagini in grado di prevedere le casistiche più frequenti.

In sostanza, anche utilizzando delle soluzioni per la responsività come per esempio librerie JavaScript, l'elemento picture di HTML5 o l'attributo srcset, queste non sempre offriranno un numero di soluzioni adeguato a stabilire quale risoluzione selezionare e quante differenti versioni di un'immagine dovranno essere associate alla pagina di un sito Web. Questo generatore permetterà invece di individuare i responsive breakpoins desiderati tramite un processo automatico in quanto non agisce tramite un set di risoluzioni stabilito a priori.

Gli output ottimizzati verranno generati tramite algoritmo Cloudinary che si occuperà della produzione dei breakpoins secondo un criterio variabile di corrispondenza con le immagini caricate che terrà conto anche del formato di compressione utilizzato (JPEG, PNG, WebP..). Si avranno così a disposizione degli image-specific breakpoints sulla base dei quali definire elementi img e picture riferiti ai valori calcolati.

Il Breakpoints Generator è uno strumento Open Source, chi lo desiderà potrà sfruttare l'API fornita dal servizio per l'upload delle immagini nel Cloud e la generazione in tempo reale dei breakpoints per il proprio progetto. L'interfaccia di programmazione disponibile supporta diversi linguaggi per lo sviluppo tra cui PHP e Python, framework come Rails e ambianti come NodeJS.

Via Responsive Image Breakpoints Generator