Il web odierno non può prescindere dall’uso di immagini di elevata qualità, se il sito è la vetrina della nostra attività allora proprio non ci possiamo permettere di mettere in mostra delle foto scadenti; oltre a questo subentrano anche una serie di fattori tecnici dipesi dalla tipologia stessa di siti e dispositivi di cui usufruiamo ai giorni nostri e, solamente, rispetto a 3-4 anni fa.
Il primo tra tutti è il concetto di sito web responsive, ovvero il sito che si adatta alla risoluzione del display dal dispositivo da cui lo stiamo visualizzando; le immagini, per mantenere buona qualità in tutte le risoluzioni, molto spesso vengono caricate decisamente più grandi di quanto non appaiano e, di conseguenza, vanno ottimizzate.
In secondo luogo i display retina di casa Apple che vogliono che le immagini caricate siano ben al doppio della risoluzione con cui verranno visualizzate; esistono dei plug-in jQuery che permettono di intercettare i display e caricare l’immagine ottimizzata per retina oppure no a seconda del caso, ma di questo parleremo in un prossimo articolo.
Attenzione che ottimizzare un’immagine non vuol dire perdere qualità ma comprimere al massimo (difficilmente si riesce ad andare oltre il 70-80%) tutti quei fattori/proprietà che la rendono pesante. I software a disposizione cambiano a seconda che si usi Mac o PC Windows, vediamo le due casistiche separatamente.
Comprimere le immagini con Mac
ImageOptim è quasi certamente il miglior software gratuito attualmente a disposizione degli sviluppatori che utilizzano device della casa di Cupertino e permette il supporto a tutti i file siano questi JPG, PNG o GIF.
Per scaricare ImageOptim ci basta andare sul sito ufficiale all’indirizzo:
imageoptim.com/mace selezionare la voce Download for Free
A questo punto possiamo spostare l’ App nella sezione Applicazioni del nostro computer.
Una volta lanciata l’app ci viene proposto di default di mantenere la compressione al 100%, situazione che possiamo mantenere in caso decidessimo di non forzare troppo l’ottimizzazione
oppure possiamo scegliere di apportare una maggiore compressione ai nostri file
Per fare una prova andiamo ora a scaricare da Google immagini il poster di un film che, come vediamo in figura, ha una dimensione di 2000×1000 pixel per un peso di oltre 500KB.
Trasciniamo il file con il drag&drop all’interno di ImageOptim e in un batter d’occhio il gioco è fatto.
Vediamo infatti come in pochissimi istanti e mantenendo la sua qualità visiva il file sia stato compresso ottimizzandone ben un 15% rispetto al peso originale.
Se avessimo ottimizzato un PNG e non un JPG avremmo avuto un risparmio anche da 1,2 MB a 500KB
A onor di cronaca va detto che, se le immagini JPG vengono gestite in maniera piuttosto rapida e indolore senza particolari problematiche anche in numero elevato contemporaneamente, ben diversa è la questione PNG; questi file infatti hanno molte più proprietà rispetto al JPG e di conseguenza consiglio caldamente di gestirne poche alla volta a meno che non vogliate sentire la ventola del vostro Mac girare come se stesse correndo a Indianapolis con possibilità di surriscaldamenti pericolosi per il dispositivo stesso.
Altro accorgimento importante: ImageOptim sovrascrive il file originale quindi attenzione a farne sempre una copia di back-up prima di ottimizzarlo.
Comprimere le immagini con Windows
La prima alternativa consigliata per chi invece utilizza un PC Windows risponde al nome di Caesium e possiamo scaricarla gratuitamente all’indirizzo saerasoft.com/caesium/#five
Clicchiamo quindi sulla voce download dal menù principale e verremo ancorati al punto della pagina dove possiamo scegliere la versione che desideriamo.
Scaricato l’archivio zip andiamo a decomprimerlo e lanciamo il programma di installazione Caesium.exe.
Anche questo software supporta e gestisce i maggiori formati grafici come JPG, PNG e BMP e ha un opzione molto vantaggiosa che permette di utilizzarlo anche in versione portatile da qualsiasi Hard Disk o chiavetta USB che sia, senza doverlo per forza installare in ogni computer.
Per gestire le immagini ci basta quindi selezionare dal pulsante aggiungi del programma tutte quelle che dobbiamo modificare. Prima di comprimere è possibile impostare il livello di qualità e definire il formato dell’input in uscita oppure lasciare abbia lo stesso formato del file originale.
Esistono, ovviamente, anche una miriade di soluzioni di compressione direttamente online.
Adesso siete pronti a sfidare la compressione delle immagini che vi chiede pageSpeed insights di Google.
Per scaricare le slide segui questo link.
Ancora nessun commento