Come ottimizzare le immagini con TinyPNG e JPG Optimizer per aumentare la velocità di caricamento.

Come ottimizzare le immagini JPG e PNG ridimensionandole in larghezza e riducendole in peso con i tool PNG e JPG Optimizer.

Nel post precedente abbiamo visto come monitorare la velocità di caricamento di un sito con il tool Pingdom che si basa sui risultati dello strumento di Google  Page Speed Insights. Le differenze di valutazione tra questi due strumenti sono dovute a un diverso approccio. Pingdom predilige i risultati assoluti mentre Page Speed rileva le manchevolezze nei processi di ottimizzazione. In sostanza un sito che sia perfettamente ottimizzato ma lento sarà valutato positivamente da Page Speed mentre un sito comunque veloce sarà sempre valutato positivamente da Pingdom anche se non perfettamente ottimizzato.

Questo concetto è particolarmente importante per gli webmaster che abbiano dei siti su Blogger visto che molte delle ottimizzazioni richieste da Page Speed sono impossibili da effettuarsi. In questo articolo vedremo come ottimizzare le immagini per renderle il più leggere possibili mantenendone la stessa qualità. Le immagini infatti sono gli oggetti HTML che più incidono nel peso della pagina.

Innanzitutto bisogna optare per i formati JPG, PNG o GIF scegliendo questo ultimo formato solo nel caso in cui volessimo postare delle immagini animate. Le immagini JPG sono le più compresse ma non hanno la trasparenza quindi possono essere usate solo quando questa non si richieda. Un'altra importante considerazione è quella che riguarda la dimensione in pixel delle foto da postare, segnatamente della loro larghezza. Se l'area del layout del nostro blog misura all'incirca 700 pixel al massimo potremo pubblicare immagini larghe 650 pixel e quindi dobbiamo scalare quelle di larghezza superiore. Questa operazione può essere fatta con qualsiasi programma di grafica quale Photoshop, Gimp, Paint.NET, ecc. In questo blog uso molto gli screenshot e utilizzo a questo scopo il software Snagit 12 che uso anche per il ridimensionamento ma si tratta solo di una scelta personale. Ho pubblicato sul mio canale Youtube un video tutorial su quali tool di ottimizzazione usare, ce ne sono però molti altri altrettanto validi

Dopo aver misurato la larghezza del layout del nostro sito si ridimensiona l'immagine con uno dei programmi già citati per rendere la larghezza compatibile con quella del layout.  In pratica se abbiamo una immagine larga 1200 pixel e una larghezza di layout di 700 pixel allora tanto vale ridimensionare la foto da 1200 a 600 o 650 pixel per farla entrare precisa nel layout e per non dover far caricare al browser dei pixel aggiuntivi inutili per la qualità della foto.

L'ottimizzazione delle immagini sia in PNG sia in JPG può essere fatta con il tool TinyPNG in modo molto semplice. Le immagini possono essere trascinate con il drag & drop nel tool oppure selezionate nella cartella del computer. Inizierà prima l'upload e poi la compressione della foto

  

Accanto a ciascun file verrà mostrato il peso iniziale e quello finale con il guadagno ottenuto. Per le immagini in PNG si ottiene una riduzione del peso intorno al 70-75% mentre per quelle in JPG la riduzione è intorno al 35-40%. Si va su Download accanto al file per scaricare l'immagine e pubblicarla in un post direttamente dall'Editor di Blogger o usando Open Live Writer.

JPG Optimizer invece funziona solo con immagini in formato JPG ma ha altri vantaggi. Si può settare la quantità di compressione da 0 a 100 e si può anche ridimensionare la larghezza

 

Andando su Optimize Photo visualizzeremo l'immagine ottimizzata. Ci dovremo cliccare sopra con il destro del mouse per poi andare su Scarica Immagine. I guadagni ottenuti con JPG Optimizer sono anche superiori a quelli avuti con TinyPNG e la qualità è più o meno la stessa.