Pubblicato il 07/06/16e aggiornato il

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

tinypng-ottimizzare-immagini  

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
jpg-optimizer-foto 

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.




7 commenti :

  1. Siccome su blogger c'è anche la possibilità di inserire immagini da Url esterni, mi chiedo se queste immagini esterne possono influire sulla velocità di caricamento delle pagine.

    RispondiElimina
    Risposte
    1. Sì, in senso negativo perché ci sono un numero maggiore di richieste HTTP cioè di indirizzi.
      @#

      Elimina
  2. Ma scusa @Ernesto Ho letto il tuo post Ho visto il video a spiegazioni su YouTube e...mi chiedo perché (in qst caso) consigli così fareaginosi per un "rezise" Immagini Da grafica e fotografa senza andare sul sito da te consigliato ,é sufficiente scaricare uno dei tanti programmi in rete free -che servono a questo scopo Uno per tutti (o quasi ) ambienti Windows e Mac #Caesium Un ottimo programmino in cui decidi tu la quota (in percentuale ) circa la qualità della compressione file Fatto qst (in ambiente desktop ) è sufficiente (per pubblicare con basso peso in kb ) un qualunque programma di "visualizzazione immagini per abbassare le misure stesse dello scatto Così facendo si può scendere (senza troppo perdere in risoluzione ) ad un peso al decimo dell'origine Ovviamente parlo di JPG Per qnt riguarda o raw e i riff (da macchine professionali ) tutti sappiamo che per pubblicare in rete occorre fare la conversione del file Da raw convertor a JPG Quindi? Basta scaricare quel semplice programma ed eseguire il tutto in ambiente desktop Da raw originale ,fino a 50MB x singolo file e più si scende -in JPG a circa il 10% da originale -quindi dai 5/ai 10 MB Di seguito (con il programma che ho descritto sopra) si scende ulteriormente a circa pochi kb Fatto salvo gran parte della risoluzione Non ci credi/credete? Basta venire sul mio profilo Magari meglio del blog -il profilo su Gplus Uploado da decenni via Picasa e ora via Google Foto migliaia di scatti e -dopo tt qst anni -su 15 GB di spazio - ho ,occupati - solo 4,5 gb dati (comprese le foto )

    RispondiElimina
    Risposte
    1. Ho scritto che ce ne sono molti di programmi :)
      @#

      Elimina
    2. È mia intenzione di mostrare in un prossimo post un elenco dei programmi gratis più usati per questo scopo, poi ognuno si sceglie quello che gli piace di più
      @#

      Elimina
  3. Ciao, come posso mettere la pubblicità di AdSense dove ci sono le immagini. Guardi questo sito: arzigazu.ro e come posso modificare l'html de blog che ogni volta che clicko su un'immagine mi porta ad un'altra pagine e quel immagine si fa piu grande e poi c'è il pulsate ''la prossima immagine'' come posso fare che mi possa far vedere le immagine aleatorie. Se riesco a superare questi problemi forse copiere queste immagine e gli farò con la descrizione in italiano.

    RispondiElimina
    Risposte
    1. La domanda non è chiara. Adsense su Blogger si inserisce nei post in alto o in basso. Con Wordpress si può mettere anche al centro del post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.