Come ottimizzare al meglio le immagini in PNG.

Nell'articolo precedente abbiamo fatto dei test tra i vari strumenti per l'ottimizzazione delle immagini in JPEG che è il formato più utilizzato per le foto pubblicate nel web. In generale dovremo utilizzare sempre tale formato escluso alcuni casi particolari. Il formato GIF è utile quando si voglia pubblicare immagini animate che esse stesse possono essere ottimizzate.

Le foto in formato PNG invece debbono essere usate solo quando si sia in presenza di trasparenza ovvero di immagini che abbiano anche il Canale Alfa come potrebbe essere una foto con lo sfondo trasparente. Abbiamo visto alcuni metodi di ottimizzazione di immagini che possono servire anche per il formato PNG. L'obiettivo di questo post è quello di comparare i risultati e la qualità della foto risultante per trovare quella che è la procedura migliore.

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

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.

Optimizilla per rendere meno pesanti le immagini JPEG e PNG e velocizzare il blog.

Come certo saprete la velocità di caricamento di una pagina è uno dei parametri che determinano il suo posizionamento nei risultati di ricerca. Gli webmaster dilettanti e professionisti debbono quindi cercare un compromesso tra la qualità delle immagini e la loro pesantezza che rallenta il download della pagina. È dimostrato che le foto rappresentano un ingrediente importante per un sito e che non è conveniente eliminarle del tutto non solo perché questo comporterebbe una minore interazione da parte dei lettori ma anche per effettive esigenze SEO.

Conviene quindi postare immagini in formati già compressi come JPEG e PNG e evitare il più possibile animazioni in GIF anche se quest'ultime sono molto efficaci graficamente e personalmente a me piacciono moltissimo. Ho già presentato un paio di tool per comprimere ulteriormente le immagini. La compressione di icone presenti nel modello è ovviamente molto più importante di quella delle foto di un singolo post. Gli strumenti di cui ho già parlato sono JPEG Optimizer che serve per le immagini in formato JPG mentre TinyPNG per quelle in PNG.

Eliminare lo sfondo da una immagine con Easily Remove Image Backgrounds.

Cancellare il background da una immagine è uno di quei lavori di grafica che possiamo definire basilari e che dovrebbero essere facilmente alla portata di chi usa internet abitualmente. I più esperti possono togliere lo sfondo da una foto con Photoshop oppure usare GIMP per rendere lo sfondo trasparente.

Se abbiamo un computer senza programmi di grafica oppure se stiamo usando un PC di altri si può ottenere lo stesso risultato con Pixlr che un tool online veramente dalle mille funzioni. Tutte queste operazioni hanno però bisogno di un minimo di conoscenza grafica. Se siamo proprio digiuni di tool di questo tipo possiamo usare lo strumento online Instant Mask con cui è possibile rimuovere il background di una foto in modo semplicissimo e intuitivo.

Come ridurre le dimensioni del file delle immagini con CompressPNG.

Le immagini sono la componente più importante nel rallentamento dell'apertura di un sito insieme ai file javascript. Per mantenere una buona qualità è opportuno usare delle immagini in PNG piuttosto che in JPG. Le immagini in formato PNG sono però piuttosto pesanti e quindi necessitano di essere ottimizzate per trovare un buon compromesso tra qualità e pesantezza. Le immagini caricate su Picasa sono automaticamente ottimizzate da Google che ne riduce il peso ma, se si usa Windows Live Writer per pubblicare i post, è utile anche il plugin Sharper Photo.

Il formato PNG viene usato anche per le icone e per le immagini che servono per il template. In questo caso può essere utile una ulteriore ottimizzazione per ridurre il peso visto che tali immagini vengono caricate in tutte le pagine e in tutti i post del blog.

Come rendere trasparente lo sfondo di una immagine con GIMP.

Le immagini in formato JPG non supportano la trasparenza e non possono essere utilizzate se si vogliono inserire in un contesto in cui non deve essere visibile il loro sfondo. Una foto in formato JPG avrà quindi una forma rettangolare e lo sfondo, spesso bianco, sarà sempre visibile. Questo fatto pone dei problemi quando dobbiamo utilizzare tali immagini in effetti, menù o semplici realizzazioni grafiche.

Vediamo come si possa facilmente rendere trasparente uno sfondo dello stesso colore da una immagine con Gimp, programma di grafica open source e multipiattaforma che può essere scaricato gratuitamente da questa pagina. Si apre la foto andando su File > Apri e si clicca sullo Strumento Selezione Fuzzy

Come addobbare il blog con effetti speciali per le feste di Natale.

Dopo aver presentato l'effetto della neve che cade basato su immagini di fiocchi o cristalli di neve in caduta oscillante e dopo aver proposto l'effetto tempesta di neve con la possibilità di personalizzarne il colore, ho pensato di racchiudere in un unico script alcuni abbellimenti per il blog da utilizzare durante le feste natalizie.

Si tratta di unire insieme la tempesta di neve a delle campane da visualizzare nella parta alta del blog. Ne propongo di tre tipi ma si possono facilmente inserire le immagini che più ci piacciono. Per l'installazione dell'effetto basta andare su Design > Aggiungi un gadget > HTML/Javascript e aggiungere il seguente codice in Sezioni del sito senza immettere il titolo

<!--Widget Natale Inizio-->
<script type="text/javascript" src=" ... jquery-snowfalls.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpw5Zmq2vzZeJisbgXTXG0QrSqHsAca2Zn3F_WCDsV1cWAnT5Lph_0ZF2m8T8Wqy-DhyphenhyphenwZBbNr7DC5XGpYmB-1PfNtrH7O9EQkmoC1_d2PRBsxg3ho0lfmJzdhiq1TOGB3VxQIwIWK6pes/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dX4rMdueNNVAxJ-4Vj_ryBjxM5ZkzZdR3hlsBqc3_KV1X2uPDSMIAJ7h-jHdKF8SGKbXE3HfCk7qFvbT_XoAiqvnkoxGdJ1NtEGrBbEJJgSfo4lH16Vpqwn37yGGSg_SOxdYFmDTR-rM/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script> <script src=' .... cascata-di-neve.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

I due file javascript il cui URL deve essere incollato al posto di  ... jquery-snowfalls.min.js e  .... cascata-di-neve.js possono essere scaricati da questo archivio e caricati su DropBox.
Dopo aver salvato il widget e averlo posizionato in qualsiasi punto del blog, il vostro sito prenderà questo aspetto

Gif2Apng per convertire immagini animate in GIF nel formato meno pesante APNG.

Il formato APNG è stato introdotto come nuovo standard delle immagini animate al posto dell'usatissimo GIF. Ho già illustrato molti tool in grado di creare delle immagini in APNG a partire da singoli fotogrammi. Tra i più decisi nell'applicazione di questo standard pare esserci la fondazione Mozilla che ha sviluppato un APNG Editor veramente interessante e che ho usato per fare dei test di realizzazione.

Il problema non indifferente di questo formato è che ancora non è stato accettato da tutti i browser e le animazioni si vedono solo su Firefox. Il vantaggio rispetto alle immagini animate in GIF risiede in una minore pesantezza e quindi in una maggiore velocità di caricamento.

Come creare immagini animate in formato APNG con APNG editor che è un add-on di Firefox.

Ho già parlato delle immagini animate in formato GIF adesso è stato fatto un passo avanti e si è passati alle immagini animate in formato APNG che è la sintesi di Animate PNG. Le immagini animate in GIF hanno infatti dei problemi per quanto riguarda i pixel trasparenti che invece sono stati risolti con questo nuovo formato.

Per visualizzare immagini di questo tipo occorre almeno la versione 3 di Firefox, ma chi non ce l’ha tra i blogger?

Se invece si vuole editare quel tipo di immagini è stata messa a disposizione un’estensione dello stesso Firefox che è un vero e proprio editor di APNG (immagini PNG animate). Se volete saperne di più su questo formato leggetevi, e guardatevi, questa pagina di Mozilla Labs.

APNG Edit 1.5 si aggiunge a Firefox cliccando su Add to Firefox e riavviando il browser. Per iniziare la realizzazione dell’animazione andate su Strumenti > APNG Editor

Si aprirà l’editor e si potranno caricare i singoli fotogrammi delle immagini, basta che siano in formato PNG. Possono essere caricate dal computer cliccando su Open File o dal web inserendone l’URL. Poi si va in alto e si clicca su Save Animation

 

Si ha subito l’anteprima della nostra realizzazione che possiamo personalizzare per quanto riguarda la dimensione e altro nella colonna di destra. Invece che con delle immagini è anche possibile operare con degli script.

Photo credit – La Repubblica

 

Da notare che questo tipo di immagini sono molto pesanti. Se siete interessati a vedere qualche realizzazione di Mozilla con questo formato eccovi accontentati

Notevole soprattutto il logo di Firefox

Ovviamente con browser diversi di Firefox 3 verranno viste solo immagini statiche.