Sull’uso delle PNG
Giovedì 8 Maggio 2008 - 08:20
di Riccardo Degni
La grande potenza del formato .png è data dal supporto della trasparenza, un fatto che permette di creare immagini per il web che si adattano perfettamente a qualsiasi sfondo: che sia formato da gradienti o colori sparsi, che venga modificato tramite Javascript o meno, il risultato è sempre perfetto.
Le immagini png sono infatti la scelta più diffusa per quanto riguarda le rifinuture delle finestre modali, i loghi adattivi, gli sfondi trasparenti e cosi via.
Purtroppo, c’è un ostacolo alquanto fastidioso che frena per certi versi l’adozione di questo formato: il suo nome è Internet Explorer 6. Quest’ultimo infatti, come sapete, non supporta la trasparenza delle png, mostrando come risultato una alone azzurrino davvero orribile, cosa che stravolge completamente il tocco di stile che volevamo dare.
Questa situazione di indecisione mi si è presentata davanti parecchie volte (tutte le volte conclusa sacrificando le png con qualche gif o usando hack CSS appositi per IE6), per cui rivolgo la domanda anche a voi: preferite usare le png nelle vostre applicazioni o le sacrificate per la compatibilità con IE6?
È vero, esistono diversi metodi per aggirare il problema, come quelli che seguono:
- IE PNG Fix
- Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (1/2)
- Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (2/2)
E ci sono ancora molti hacks CSS, ma sono soluzioni spesso sconsigliate per il peso o quant’altro.
Ovviamente la mia domanda è riferita solo nel caso in cui le png siano strettamente necessarie, dato che gif e jpg continuano comunque ad essere ampiamente e giustamente utilizzati in ambito web. Voi che dite?
Commenti
1
Per siti di lavoro è comunque importante tenerne conto, ma per il mio sito personale vado avanti quasi solamente con png.
2
Tento di evitarle se possibile, se servono proprio ricorro a javascript per risolvere il problema e per imagini di sfondo, sempre se possibile, mostro solo a IE6 tramite css e commenti condizionali delle gif
# - postato da Grab - 08 Maggio 2008 - 09:24
3
Anche io sono per le png, anche se ancora troppa gente (e spesso sono quasi sempre e solo i propri clienti..) utilizza ie6. Come Paolo per il mio sito utilizzo le png e chi ha ie6 si arrangia, mentre per i siti dei clienti uso sempre degli hack.. mannaggia a loro!!!!
4
Utilizzo spesso le immagini png con gli appositi hack per IE6. Le trasparenze e i gradienti delle png sono impagabili. Tempo fa (direi molto tempo fa), vi ricordate sicuramente, era spesso utilizzata la frase a fondo pagina: “best view 800×600″, oppure “best view 16m colors”. Ora, dove posso, inserisco il “best view” in questa maniera : “best view browser: FF”
5
per chi usa Prototype:
PngHack# - postato da filippo buratti - 08 Maggio 2008 - 09:31
6
Se posso, evito di usare i PNG, ricorrendo a gradienti si immagini GIF o JPEG, altrimenti uso i png con hack CSS per IE6.
Sono sempre siti per clienti, quindi non posso esimermi da considerare IE6.
# - postato da Luigi - 08 Maggio 2008 - 09:40
7
Mi piace usare png a 24 bit per poter usufruire della trasparenza. Per via del peso delle immagini e del relativo pgnfix cerco di farne un uso parsimonioso.
8
oltre allla gestione della trasparenza bisogna valutare anche il fattore peso, e nella maggior parte dei casi png pesa molto di più. Normalmente cerco di evitare sia hack che png, preferendo un uso accorto di jpg e css. Ammetto che nel mio sito personale uso png, e tra pocodirei che sarà possibile smettere il supporto a IE6, visto che la stessa casa produttrice lo sconsiglia…
9
Va detto che se un sito è fatto bene, una gif/jpg può sempre sostituire una png trasparente, in quanto se tutto si incastra bene, non serve.
Ma esistono ecezioni su siti fluidi o comunque “mobili”. Io ho scoperto una bel JS funzionate con mootools che è perfetto sia sul bg css che su un immagine in html.
10
PNG coe se piovesse ma carico le immagini in modo condizionale lato server così se ho IE6 o peggio faccio caricare delle gif
# - postato da lordmax - 08 Maggio 2008 - 10:02
11
Il png è un bel formato, interessante, ma credo se ne abusi un pò troppo. Ci sono interi templates disegnati esclusivamente con png, anche dove non necessario. Questo rende il sito in media molto più pesante oltre che fastidioso per chi naviga con ie6 (e purtroppo non sono pochi). In genere, dove posso, le sostituisco sempre con jpg e gif.
# - postato da FuturaImmagine - 08 Maggio 2008 - 10:03
12
gif, per il momento
# - postato da Andrea Paiola - 08 Maggio 2008 - 10:07
13
Io sono per le PNG, ma solo dove è davvero necessario. Altrimenti meglio ricorrere a GIF e JPG, che in genere sono più leggere e non hanno problemi di compatibilità crossbrowser.
14
Per il momento continuo a rinunciare alle PNG. Le ho utilizzate qualche volta in alcuni progetti, ma alla fine mi trovo sempre a ripiegare sulle gif o su altre soluzioni.
I javascript e gli hack non sempre funzionano bene, ed a volte ci sono dei ritardi consistenti al caricamento.
Preferisco andare sul sicuro e puntare sulla solidità, anche se le PNG mi semplificherebbero sicuramente la vita.
15
Vorrei solo riportare alcune cose che non ho visto scritte nell’articolo o nei commenti
- E’ possibile utilizzare la trasperenza dei png su IE6 a patto che questa sia applicati a un’immagine con massimo 256 colori (8bit).
Questo rende il png preferibile al gif (migliore compressione) a patto che non si usino le animazioni.- Esistono molti strumenti per ridurre in modo lossless la dimensione dei png come optipng o pngcrush, provateli, spesso fanno la differenza
# - postato da Riot - 08 Maggio 2008 - 11:15
16
Per il sito www.stilisticamente.com (scusate non voglio fare pubblicità, ma…) ho usato una png per la bussola, il motivo è che essendo il file molto complesso una gif proprio non andava e per la posizione non c’era verso di usare un’altro formato, quindi ho usato uno degli hack dal sito di Microsoft proposti per aggirare il problema.
Devo dire che il sito è del 2003 e da allora non ho avuto nessun problema di visualizzazione con IE6, un po’ meno con la versione 5, ma insomma … non si può avere tutto.
Quindi pur amando le png cerco di evitarle per via della complessità degli hack e soprattutto perché non mi va di fare troppi layout da visualizzare in funzione del browser usato.
Insomma, alla fine tutto dipende, ma se posso cerco di evitarle nonostante le ami.M.
# - postato da Marco Grazia - 08 Maggio 2008 - 11:15
17
Beh, personalmente uso questa soluzione, ha il limite di funzionare solo se la png viene usata come sfondo di un elemento html, ma nella maggiorparte dei casi va bene, funziona senza problemi e non c’e’ nessun file da caricare.
Riguardo all’uso delle png, francamente le uso solo quando strettamente necessario, visto che il peso di un’immagine png non e’ indifferente. Le uso invece spessissimo dentro flash, o meglio quando l’immagine e’ inclusa dentro l’swf, poiche’ flash riesce a comprimere le png in modo fantastico, e si risparmia tanto spazio rispetto ad un gif o jpg.# - postato da Alessio Michelini - 08 Maggio 2008 - 11:38
18
concordo con Tom, anch’io tutt’ora continuo a rincunciare alle PNG… ma non sapevo esistessero i punti indicati da Riot, il primo sembra molto interessante, da provare!
# - postato da antenna - 08 Maggio 2008 - 11:54
19
Anch’io sono uno che atualmente continua a rinunciare alle png. Il tip proposto da Riot è corretto, ma non tutte le immagini possono rientrare in una scala di 256 colori.
Sarebbe stata davvero una grande cosa poterle utilizzare liberamente.# - postato da Razr - 08 Maggio 2008 - 11:57
20
concordo con paolo…
la sfiga è che sono sempre e soli i clienti a rimanere con quel catorcio bieno di bug che è IE 6.
io uso le gif ove la qualità lo consente… l’alone intorno alle gif su ie6 è insopportabile.. nn ci si puo passare sopra..
21
Come per altri, solitamente non utilizzo immagini .png, ma gif o jpg.
La qualità ne risentema se si realizza un sito va valutato il target, non il gusto personale.
I professionisti non usano quasi mai IE6, ma non si può certo non pensare che una grandissima parte dell’utenza italiana non sa neppure che IE si chiama “browser” e che ne esistono di migliori.Quando mi è capitato di essere obbligato, ho utilizzato .png in background, con relativo hack per IE6 richiamato con commenti condizionali.
# - postato da PPM - 08 Maggio 2008 - 12:29
22
Adoro le png, io utilizzo questo per ovviare al problema IE6, è semplicissimo da usare però funziona solo per le immagini non per gli sfondi, non si deve far altro che mettere un commento condizionale per IE6 e tutto va a meraviglia.
Non lo uso sempre, ma in base alle esigenze, se devo sostituirlo utilizzo il formato jpg.
23
io sacrifico IE, qualunque versione…
24
Io uso il software TweakPNG, ma va bene solo se il sito ha un colore di bg unico.
25
Scusa simosito, ma cambia solo il colore di sfondo, ma trasparenza 0 :-)
# - postato da Alessio Michelini - 08 Maggio 2008 - 16:54
26
Scusa simosito, ma cambia solo il colore di sfondo, ma trasparenza 0 :-)
Non dà trasparenza ad IE infatti dicevo:
ma va bene solo se il sito ha un colore di bg unico.
Il bello è che la trasparenza resta sui browser diversi da IE.
Prova a vedere il file QUI
Prima con Ie6 e poi con un browser passabile…
27
Tendo a non usare png se non in casi di estrema necessità, e comunque scegliendo di volta in volta l’hack meno intrusivo che trovo.
La semplicità, sopratutto a livello di codice, paga sempre.
# - postato da Francesco Gavello - 08 Maggio 2008 - 21:55
28
Io ho sempre usato solamente le png, qualsiasi cosa, pure le trasparenze, che, ovviamente, cerco di usare con parsimonia.
Ho provato pure a usare le gif trasparenti ma le ho trovate difficili da usare, i bordi non me li fanno bene come le png.
29
ormai ie6 non lo testo neanche, ci sono davvero poche persone che lo utilizzano
30
Purtroppo non sono poche le persone che usano IE6..basta controllare gli accessi ai siti e le statistiche dei browser
# - postato da simone - 09 Maggio 2008 - 09:17
31
Ha ragione simone, le persone che usano ancora ie6 sono parecchie…
e continueranno ad essere parecchie se teniamo in conto della retro-compatibilità come ha affermato qualche commento fa Marco Grazia. Vada per ie6, ma il 4 o il 5 mi sembra davvero esagerato, cosi gli utenti che usano ie6 potrebbero pensare che sia quello più evoluto…# - postato da Razr - 09 Maggio 2008 - 13:40
32
Sempre usato via CSS filter:[…]AlphaImageLoader.
(in uno stylesheet apposito x IE -> Commenti condizionali)# - postato da Andrea (Epper) - 09 Maggio 2008 - 19:16
33
Per i siti commerciali dei clienti le evito purtroppo perchè molti utenti usano ancora explorer 6 …mentre per il mio sito personale che viene visualizzato da agenzie creative ho utilizzato molte png, visto il target evoluto di navigatori…
34
Purtroppo l’ignoranza di molti utenti(ed anche dei creatori di IE) non permette la creazione di bellissimi effetti visivi che ormai caratterizza tutto il web. Per fortuna la concorrenza c’è e si chiama Firefox…speriamo che la Microsoft si decida una buona volta di adeguarsi alle norme.
35
Stapperò la migliore bottiglia di vino quando IE6 sarà morto!
:D
# - postato da Fabio - 14 Marzo 2009 - 11:21