In diversi precedenti articoli ho parlato degli innumerevoli vantaggi che consistono nello sviluppare un sito web responsive. Di contro quei pochi svantaggi sono rappresentati dal caricamento di immagini ottimizzate per desktop anche in versione mobile poiché il design reattivo si limita semplicemente a restringerle senza logicamente variare le proprietà di peso; questo rappresenta sicuramente un limite, e chi sviluppa responsive è costretto di volta in volta a cercare un giusto compromesso tra qualità e peso delle immagini.
Qualcuno ha deciso di non prendere sotto gamba questa problematica e di conseguenza ha realizzato Mobify, un progetto open source dedito a migliorare le prestazione dei responsive web sites.
Come funziona Mobify?
Questa libreria agisce attraverso il DOM, anticipando il caricamento delle risorse riesce ad effettuare un caricamento condizionale delle immagini garantendo maggiore flessibilità e velocità soprattutto sulla parte mobile; non a caso Mobify è particolarmente indicato per chi ottimizza i contenuti su un target prevalentemente mobile:
Small images downloaded
Big images downloaded
in questo esempio abbiamo 2 div (big e small) che verranno visualizzati rispettivamente in versione desktop e mobile, risparmiando a quest’ultima l’arduo compito di dover caricare un’immagine full-size.
Esempi e Link ufficiali
Potete approfondire il discorso sul sito ufficiale mobify.com dove è presente una documentazione abbastanza esaustiva.
Per quanto riguarda, invece, gli esempi concreti:
Questi ultimi files vanno scaricati insieme poiché il primo è l’esempio ed il secondo la libreria che consente il funzionamento degli scripts.
