PNG-8 contro PNG-24

il PNG trasparente è troppo pesante!

I PNG trasparenti sono molto belli ma pesano troppo!

Riprendendo il discorso dell’ottimizzazione del sito web, che già in altri articoli ho discusso, volevo considerare l’uso dei file PNG…

Se come me ogni tanto fate qualche sito web, avrete scoperto l’utilità di usare i PNG trasparenti, quel bellissimo formato di file che usa 32 bit per salvare immagini a colore, con una compressione senza perdita di qualità, assieme ad un canale alpha a 8 bit.

I PNG con trasparenza possono essere usati con successo sulle pagine web fin dai tempi di Explorer 7; Photoshop li salva tramite la finestra ‘salva per web’…
Insomma… sembra tutto bello e senza problemi.

In realtà il supporto di Photoshop verso il formato PNG è relativamente carente!
Infatti credo che chiunque di voi usi solo Photoshop per salvare le immagini da usare nel web – come me – mai abbia immaginato che esistesse un altro PNG oltre al PNG-24.!

Vi siete mai fermati a vedere quanto pesa un PNG trasparente?
Se lo avete fatto avrete notato quanto pesanti sono i file PNG trasparenti!

Molti preferiscono non fermarsi più a pensare a questi problemi, in un’era di banda (relativamente) larga, ma un KB qua e un KB là, ottimizzando le immagini di un sito web possiamo risparmiare molta banda, e far avere un’esperienza più piacevole all’utente che capita sul nostro sito.

Passiamo ai fatti…

Salvando per web un PNG trasparente da Photoshop, questo esce in formato RGBa, usando 24 bit per i colori + 8 bit per il canale alpha, e pesa solitamente un sacco.

L’immagine che vedete all’inizio dell’articolo è un esempio di file PNG 24 su sfondo pattern.

Esiste però una versione a scala di colori di PNG che si chiama PNG 8, dove i colori sono appunto salvati entro una range massimo di 256 tonalità (come avviene nei GIF), ma che supporta il canale alpha a 8 bit.

Esempio (PNG 8 su sfondo pattern):

PNG8 pesa meno di PNG24

Non trovate anche voi che sia pochissima differenza tra la prima immagine e la seconda salvato come PNG 8?
La grande differenza sta nel peso in kb: 49 kb contro 16 kb. Un risparmio del 68%!

Inoltre il formato PNG 8 è meglio supportato da Explorer 6 (…ancora lui?!) poiché, invece di mostrare uno sfondo grigio al posto della trasparenza come avviene nei PNG 24, mostra il pixel totalmente trasparente quando ne incontra uno che subisce l’influenza del canale alpha, senza la necessità di aggiungere script degni di un alchimista 😉 Vedete il seguente esempio:

Ma come si fa a salvare un file in formato PNG 8?

Photoshop permette di salvare in PNG 8, ma il risultato, se ci proviamo, è pressoché identico a un GIF: la trasparenza è netta (o c’è o non c’è), mentre noi vogliamo avere una trasparenza graduale.
E allora?

Se avete Fireworks potete aprire il PNG da lì e risalvarlo come PNG 8; ma pochi fra noi usano Fireworks, vero?
Allora basta sfruttare uno di due programmi gratuiti, molto semplici ed intuitivi, che permettono di convertire il PNG 24 – che salviamo da Photoshop – in PNG 8!

Per Macintosh esiste ImageAlpha
Per Windows c’è Manfred, a Pngquant GUI

TinyPNG

Se non volete – o non potete – scaricarvi ed installarvi un nuovo programma nel computer – e non avete nemmeno Photoshop – ma avete comunque bisogno di ridurre al volo la dimensione di un file PNG – a prescindere dal sistema operativo che usate – potete ricorrere ad un servizio online gratis come TinyPNG.

TinyPNG lavora nella stessa maniera spiegata finora, cioè riducendo il numero di colori del file, e creando un PNG a 8bit con canale alpha.

link: TinyPNG.

CompressPNG

Anche CompressPNG è un servizio online con un interfaccia real-time che consente di caricare sul server remoto più d’una immagine in formato PNG RGBA per poterla convertire in PNG a scala di colori con supporto del canale alpha.

CompressPNG mette a disposizione uno slider con cui modificare il numero dei colori che andranno a comporre la nuova immagine generata, permettendo così un controllo sulla dimensione del file in uscita. Peccato solamente per il fatto che si perda l’immediatezza offerta da programmi desktop come ImageAlpha.

link: CompressPNG

Altri sono arrivati qui cercando:
logo png, photoshop logo png, quando salvare con png 8 e png 24.

2 pensieri su “PNG-8 contro PNG-24”

Rispondi a Pol Annulla risposta

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.