Give PNG a chance!

É da un po' di tempo che voglio aggiornare il sito con un nuovo articolo, diciamo che ne ho tipo 3 in preparazione, ma ci sto mettendo una vita. Così, in maniera quasi sincronica, mi è capitato di leggerne uno particolarmente interessante, considerato anche il precedente articolo da me realizzato sull'argomento, ho quindi chiesto il permesso di tradurlo ed eccovelo in italiano (sperando di non deludervi per la mia scarsa conoscenza della lingua - italiana, chiaramente).

Date a PNG una speranza!

La maggior parte delle persone sono generalmente intimorite dall'uso del formato PNG, in quanto pensano che:

1. non funzioni su tutti i browser, o
2. la dimensione del file sia maggiore delle GIF

Nonostante ci sia un po' di verità in queste affermazioni, queste sono generalmente false. Ma prima di parlarne, una piccola introduzione su cos'è PNG8 e perché è figo.

PNG8

Ci sono diversi tipologie di PNG, che possono essere riassunti in tre gruppi principali:

• PNG truecolor con o senza trasparenza alpha, anche conosciuto come PNG24 e/o PNG32 (la versione con alpha)
• PNG a scale di grigi con o senza alpha
• PNG indicizzata o PNG con tavolozza (palette), o PNG8

Le PNG8 sono come le GIF: hanno una palette di 256 colori e supportano la trasparenza. Mentre le GIF supportano soltanto una trasparenza netta presente/assente (un pixel è trasparente o non lo è), le PNG8 supportano trasparenze alpha variabili. Quindi vedete da subito che le PNG8 possono fare quello che facevano le GIF e qualcosa di più.

C'è un piccolo problema su IE6 dove i pixel semi-trasparenti delle PNG8 sono trattati come nelle GIF e visti come completamente trasparenti. Per questo è un opzione per migliorare progressivamente: usando la stessa immagine con IE6 sia ha una visualizzazione che si avrebbe con una GIF, mentre i browser moderni riescono a godere appieno dell'esperienza.

Ecco un esempio, preso da un eccellente articolo: i browser moderni vedono la lampadina con l'alone:

IE6 e precedenti si godono una scarsa esperienza senza alone:

Un altro pessimo problema è che Photoshop non produce PNG8 semi-trasparenti (sebbene vengano chiamate proprio PNG8 al posto di usare PNG con palette o indicizzate). Solo Fireworks esporta PNG8 con trasparenza alpha il che rende il tutto un po' una scommessa. Avete quindi bisogno di un buon designer che si prenda questo delicato incarico di verificare che l'immagine sia OK con tutti i browser. Un metodo è quello di immaginare di lavorare con GIF e quindi selettivamente aggiornare selezionando attentamente le aree da rendere semi-trasparenti. Potrebbe anche essere una soluzione mantenere le immagini GIF su un livello del programma di grafica che state usando e usare gli altri livelli per aggiungere gli effetti di semi-trasparenza, così saprete subito come si vedrà l'immagine in IE6.

In ogni caso la cosa importante da ricordare è che nel caso peggiore (IE6), PNG8 si comporta analogamente alle GIF.

Le PNG non funzionano nei browser?

Le PNG funzionano nei browser da sempre, eccetto per due casi estremi:

• Il problema sopraccitato dove la semi-trasparenza delle PNG8 non viene interpretata su IE6, e comunque le GIF non vi aiuterebbero ugualmente
• La trasparenza nelle PNG truecolor è visualizzata come un colore pieno (normalmente grigio) su IE6. Ma, di nuovo, qui le GIF non potrebbero aiutarvi comunque in quanto non supportano la trasparenza (variabile). Normalmente le GIF vengono impiegate per "risolvere" questo problema (usare GIF significa potenzialmente perdere profondità colore), ma quando si può risolvere con GIF, si può risolvere ancora meglio (e con una dimensione ancora minore) con le PNG8.

Un'altra soluzione al secondo problema è usare il filtro CSS AlphaImageLoader di IE (e ci sono una serie di script automatici in giro), ma questo filtro ha seri problemi prestazionali e dovrebbe essere usato solo come ultima spiaggia. Le tre cose da fare prima di arrivare ad AlphaImageLoader sono:

1. Provate ad usare PNG8 come soluzione transitoria
2. Provate senza trasparenza: se il background è un colore solido potete convertire l'immagine per usare questo colore. Con Imagemagick potete usare -flatten per questo scopo:
   $ convert source.png -flatten -background yellow result.png
3. Ignorate IE6

Se finite per usare AlphaImageLoader siate certi che venga usato questo trucco in modo che siano solo gli utenti di IE6 a sperimentare i rallentamenti:

#some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

Le PNG sono più grandi delle GIF?

Questa leggenda deriva dal fatto che la maggior parte delle persone paragonano le PNG truecolor con le GIF il che non è esattamente un paragone corretto, in quanto vengono paragonate immagini con centinaia di colori (le PNG24) con immagini con 256 colori al massimo (GIF). Alcuni lavorano in Photoshop, decidono di "esportare per il web", provano PNG24, scoprono che la grandezza dell'immagine è più grande e passano a GIF. Ma in questo passaggio potrebbero venir rimossi molti colori. Se avete preventivato di usare meno colori, PNG8 fa lo stesso lavoro ma risparmiando in spazio. (Un altra cosa è che a volte Photoshop tende a fare un pessimo lavoro nell'esportare le PNG8. Se l'immagine esportata in questo formato è oscena, ma la GIF è OK, allora una soluzione potrebbe essere esportare in GIF e poi convertire esternamente con un altro programma tipo optipng).

Di nuovo, il file con cui mettere a paragone le GIF è PNG8, che è pure quasi sempre più piccolo in dimensione.

GIF vs. PNG: paragonare la dimensione

(PS: questo e il prossimo esperimento sono stati realizzati più di un anno fa... [cut])

Usando il servizio di ricerca immagini di Yahoo! ho downloadato alcune GIF (usando come chiavi parole tipo "logo", "mail" e "graph") trovandomi alla fine con tipo 1700 immagini. Quindi ho usato optipng per convertirle tutte in PNG e trarre qualche risultato.

Ho usato OptiPNG senza alcuna particolare opzione:

$ optipng *.gif

Come metterà in evidenza il prossimo esperimento, optipng potrebbe portare a risultati migliori, così come pngout. Quindi considerate questi risultati come il minimo che potete fare per rendere le GIF più piccole (convertendole in PNG).

Alcune statistiche dall'esperimento:

• le immagini GIF sul web (almeno giudicando da questo piccolo campione) sono in media grandi
  525x388 e hanno 139 colori (adoro queste statistiche semi-inutili :) )
• la dimensione media delle GIF è di 24K
• dopo averle convertite in PNG la dimensione media è scesa a 18K
• lo spazio risparmiato nella conversione da GIF a PNG è di circa 23%

Sufficientemente interessante è il fatto che solo il 4% delle immagini convertite erano grandi quanto le GIF - grande disappunto (e non ditelo a nessuno!). Quindi ho provato un po' ad andarci un po' più pesante. Invece di lanciare OptiPNG con l'opzione -o7, ho preferit ousare PNGOut. Il risultato è stato che solo 4 delle 1706 immagini convertite era uguale alla dimensione delle GIF. Sicuramente provando ancora (usando PNGSlim ad esempio) avrei probabilmente risolto, ma 4 su 1700 è una frazione con cui posso convivere. Comunque, le immagini che OptiPNG aveva fallito nel rimpicciolire, PNGout ha ottenuto un rapporto di compressione medio del 21%. Non male per addomesticare delle piccole stupide GIF.

Comunque, alcune GIF hanno perso dai 100K fino ai 600K! Quindi, non si può mai dire.

Se vi piacciono i numeri, qui c'è un fantastico CSV - i risultati di OptiPNG e quelli rimanenti che sono passati attraverso PNGout.

Quindi, messaggio finale: convertite le vostre GIF in PNG e vincete un 20% Byte in meno sulla rete.

Paragonare gli ottimizzatori PNG

Per questo esperimento ho scaricato circa 12000 immagini (sempre tramite Yahoo!) e le ho fatte passare attraverso una serie di ottimizzatori, a volte con diverse opzioni. Col senno di poi, forse non è stato un grande esperimento, in quanto i differenti ottimizzatori sono specializzati in diverse aree: compressione, filtraggio in pre-compressione, rimozione di parti, ecc, e la migliore soluzione è usarne più di uno. Ma quantomeno sono alcuni dati (di nuovo, qui potete trovare il file CSV).

Le immagini erano 1000 risultati per ciascuna delle chiavi di ricerca: "baby", background", "bkg", "flower", "graph", "graphic", "icon", "illustration", "kittens" (per forza), "logo", "monkeys", "png", "transparency". Dopo aver rimosso un po' di 4xx e 5xx ed altri errori e ripulendo po', mi sono trovato con 10000 immgini. Le ho fatte passare attraverso:

• pngcrush: pngcrush -rem alla -reduce before.png after.png
• pngcrush-none: pngcrush -rem alla -brute -reduce before.png after.png
• pngcrush-brute: altri tentativi di filtri - pngcrush -rem alla -brute -reduce before.png after.png
• pngout: pngout /q /y /force before.png after.png. Il livello di compressione di default di pngout è "extreme" quindi ho provato altri due settaggi meno estremi.
• pngout-match: pngout /s2 /q /y /force before.png after.png
• pngout-intense: pngout /s1 /q /y /force before.png after.png
• pngrewrite: pngrewrite before.png after.png. PNGRewrite funziona solo con le PNG8, inoltre converte le immagini truecolor in PNG8 ogni qual volta le treuecolor abbiano meno di 256 colori.
• optipng: optipng before.png -force -out after.png Il livello di default di OptiPNG è 2 (di 7) quindi ho provato sia al di sopra che al di sotto di tale livello di default
• optipng1: optipng before.png -o1 -force -out after.png
• optipng3: optipng before.png -o3 -force -out after.png
• optipng7: optipng before.png -o7 -force -out after.png
• advpng: cp before.png after.png; advpng -z -f -q after.png
• advpng-insane, con l'allucinante 4° livello di compressione: cp before.png after.png; advpng -z4 -f -q after.png
• deflopt: cp before.png after.png; deflopt -s -f after.png
• pngoptimizercl: cp before.png after.png; pngoptimizercl -file:"after.png"

E i risultati:

Il "livello di successo" è il numero di volte in percentuale che lo strumento è riuscito ad ottenere risultati più piccoli dell'originale. Per esempio, il livello di PNGrewrite è abbastanza basso, perché funziona solo con 256 colori. Il tempo medio d'esecuzione, è il tempo medio che ci mette lo strumento ad ottimizzare l'immagine.

E ora, madames et monsieurs, ecco a voi...

Give PNG a chance (.com)

Spero la troviate divertente come me, almeno.. penso sia abbastanza divertente, almeno nella mia testa :D

Il mio scopo segreto è quello di far si che chiunque ascolti la canzone o veda il video, sia portato a pensarci due volte prima di fare "Salva per il Web..." in Photoshop.

Enjoy!

Musica: batteria da GarageBand, I suono due chitarre e il basso (una chitarra con effetto a dir la verità) e voce. Se pensate di aver sentito una voce femminile, in effetti sono sempre io, con l'effetto "Helium". L'MP3 è qui. Se volete sperimentare qualcosa con la canzone, qui trovate lo zip di ciascun canale come MP3.

Video: è un po' scarsetto, ma è tutta roba web :) È solo JavaScript e CSS. Il video è in effetti uno screen capture dalla finestra di Safari. Inoltre non ci sono immagini, solo entità HTML. Uso pesante di animazioni e transizioni -webkit-*. I sorgenti e la versione live che potete vedere con Safari (o altro browser webkit - NDT) sono qui. L'effetto simil-StarWars è stato preso in prestito da qui.

Il sito http://givepngachance.com è al momento abbastanza spoglio, ma conto di aggiungerci altro materiale riguardante i PNG. Oh, dimenticavo il testo della canzone.

Aggiungo altri due programmi che sono venuti fuori nei commenti dei lettori dell'articolo originale:

• imagealpha: dello stesso autore di ImageOptim, al momento disponibile solo per mac
• punypng: sembra ottenere risultati leggermente migliori di pngrewrite

Spero l'articolo vi sia piaciuto, i vostri commenti sono sempre ben accetti ;)