Utilizzo di immagini PNG nei siti Web

Question

Va bene utilizzare le immagini PNG in un sito Web? Non li ho davvero visti molto usati, quindi mi chiedevo quali fossero gli svantaggi. Ci deve essere qualche come sicuramente tutti sarebbero loro utilizzo? ...

sono, per esempio, MSIE e Chrome compatibile ecc ...

Answer 1

Possono essere usati bene in questi giorni. Le versioni precedenti di IE (6.0 e precedenti) non supportavano tutte le modalità di trasparenza, il che era il motivo principale per cui le persone evitavano il formato. Altri browser come Firefox, Chrome, Opera, Konqueror o Links non presentavano tali problemi.

Answer 2

IE 6 renderà la trasparenza GIF solo nelle immagini PNG a meno che non si utilizzino i filtri.
Per ulteriori dettagli, vedere here

A parte questo, funzionano perfettamente e stanno diventando più popolari ora.

Answer 3

I file PNG tendono a diventare lo standard oggi, in particolare perché PNG è un formato aperto progettato appositamente per il web. Il W3C raccomanda l'uso di PNG per i siti Web, poiché l'uso di PNG produrrà file più compatti quando si gestiscono grafica, loghi, ecc. PNG è un formato di compressione senza perdita di dati.

Mentre PNG è l'unico formato che consente di utilizzare la trasparenza, è possibile utilizzare JPG (che è principalmente un formato di compressione con perdita) per immagini più grandi.

E indovina cosa? Anche Google sta usando un'immagine png per il suo logo olimpico.

Answer 4

Ecco un paio di Fortune 500 siti web aziendali PNG sulla loro pagina di attuazione:

• microsoft.com
• apple.com
• google.com (google logo è un PNG)
• hp.com (in realtà utilizzano IEPNGFIX e PNG trasparenti di twinhelix)

in realtà l'unico che ho trovato che non ha (ho visto solo circa 10) era Siemens.com

Answer 5

I PNG sono in realtà MOLTO spesso usati oggi. Pochi sono i siti senza almeno alcuni PNG. E nemmeno loro devono essere temuti. L'unico problema che si verifica è con IE6 e che ha due possibili soluzioni:

• Il filtro DirectX. Basta google, la rete è piena di questo. Funziona senza alcuna modifica al file PNG, ma ci sono alcuni GOTCHA - come le aree trasparenti saranno anche trasparenti all'input dell'utente (facendo clic) e non è possibile combinarlo con un'altra immagine di sfondo.
• Impostazione del colore di sfondo per il PNG. Questo non richiede alcuna codifica speciale nella pagina Web, ma non è sempre appropriato. L'idea è che un file PNG può specificare un colore di "sfondo" predefinito e IE6 lo onora. Poiché molto spesso i PNG sono visualizzati su uno sfondo solido o quasi solido, questo funziona incredibilmente bene. Utilizzare l'utilità TweakPNG per impostare lo sfondo.

Answer 6

E non dimenticare che il logo Stack Overflow è un PNG, un altro motivo per usarlo!

Answer 7

I PNG sono un formato grafico più versatile per il Web, con un'eccellente trasparenza alfa, nonché una buona compressione e nessuna restrizione proprietaria (GIF era una volta oggetto di un caso di diritti IP protratto quando Compuserve rivendicava la proprietà del formato di compressione utilizzato) .

Tuttavia, la giuria è ancora fuori sul loro uso in generale. Sembrano essere particolarmente buoni per i loghi e le icone di piccole dimensioni, ma per immagini dettagliate di grandi dimensioni, GIF è in gran parte confrontabile nelle dimensioni del file e JPEG ha ancora il miglior rapporto qualità/qualità complessivo (e questo può fare una grande differenza per il tempo di caricamento di un sito web).

PNG sta guadagnando trazione come formato e si può prevedere di vederlo utilizzato sempre più ovunque si guardi. Le caratteristiche di trasparenza alfa rendono PNG un formato utile per elementi di interfaccia interessanti, come sovrapposizioni e spaccati.

Answer 8

Sì, è corretto usare i PNG, ma ci sono alcune cose che vale la pena sottolineare.

• Internet Explorer 6 non supporta la trasparenza. Come hanno sottolineato diversi commenti, puoi utilizzare i filtri per risolvere questo problema. Tuttavia, ci sono alcuni problemi che possono essere visualizzati quando lo si utilizza su un contenitore relativo, o se si usa la ripetizione dello sfondo. Personalmente uso uno vml implementation che non ha questi problemi.

• Di solito non è una buona idea mescolare (come in sovrapposizione) png con altri tipi di immagine come jpeg. Anche se hanno lo stesso colore di sfondo, IE potrebbe mostrarli leggermente diversi, quindi non si fondono bene.

• Mac OS X esegue il rendering dei png con la correzione gamma memorizzata. Potrebbe essere necessario rimuoverlo. Io uso pngcrush.

• Le superfici semitrasparenti nidificate possono essere molto lente su alcuni browser.