3. 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.
4. 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.
5. 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.
6. 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.
8. 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.
9. Per scaricare ImageOptim ci basta andare sul
sito ufficiale all’indirizzo:
imageoptim.com/mac
e selezionare la voce Download for Free
10.
11. A questo punto possiamo spostare l’ App nella
sezione Applicazioni del nostro computer.
12. 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
14. 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.
15. 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.
16. Se avessimo ottimizzato un PNG e non un JPG
avremmo avuto un risparmio anche da 1,2 MB
a 500KB
17. 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.
18. Altro accorgimento importante: ImageOptim
sovrascrive il file originale quindi attenzione a
farne sempre una copia di back-up prima di
ottimizzarlo.
20. 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
21.
22. 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.
23. 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.
24. 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.
25. 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.