Quale formato per le immagini di piccoli siti Web? GIF o PNG? [chiuso]

StackOverflow https://stackoverflow.com/questions/115818

  •  02-07-2019
  •  | 
  •  

Domanda

Quando si eseguono icone piccole, grafica dell'intestazione e simili per i siti Web, è meglio usare GIF o PNG?

Ovviamente se sono richiesti effetti di trasparenza, i PNG sono sicuramente la strada da percorrere, e per immagini più grandi e più fotografiche userei i JPEG - ma per il normale web " mobili " ;, che sarebbe mi consigliate e perché? Potrebbero essere solo gli strumenti che sto usando, ma i file GIF di solito sembrano essere un po 'più piccoli di un PNG comparabile, ma usarli sembra proprio così nel 1987.

È stato utile?

Soluzione

Come regola generale, il PNG non è mai peggio, e spesso meglio del GIF a causa della compressione superiore. Potrebbero esserci alcuni casi limite in cui GIF è leggermente migliore (perché il formato PNG potrebbe avere un overhead leggermente più grande dai metadati) ma in realtà non vale la pena preoccuparsi.

  

Potrebbero essere solo gli strumenti che sto usando, ma i file GIF di solito sembrano essere un po 'più piccoli di un PNG comparabile

Ciò potrebbe essere dovuto allo strumento di codifica che usi.

/ EDIT: Wow, sembrano esserci molte idee sbagliate sulla dimensione del file PNG. Per citare Matt:

  

Non c'è niente di sbagliato nelle GIF per le immagini con pochi colori e, come hai notato, tendono ad essere più piccole.

Questo è un tipico errore di codifica e non inerente al formato. Puoi controllare l'intensità del colore e rendere il file PNG più piccolo. Fare riferimento alla sezione pertinente nell'articolo di Wikipedia.

Inoltre, la mancanza di supporto in MSIE6 è sproporzionata da Chrono:

  

Se hai bisogno di trasparenza e riesci a cavartela con le GIF, le consiglierei perché IE6 le supporta. IE6 non funziona bene con PNG trasparenti.

È sbagliato. MSIE6 supporta la trasparenza PNG. Non supporta il canale alfa (senza alcuni hack), ma questa è una questione diversa poiché le GIF non ce l'hanno affatto.

Il unico motivo tecnico per utilizzare le GIF anziché i PNG è quando l'uso necessita di animazione e non vuole fare affidamento su altri formati.

Altri suggerimenti

Il W3C menziona 3 vantaggi del PNG rispetto al GIF.

&

# 8226; Canali alfa (variabile trasparenza),

&

# 8226; Correzione gamma multipiattaforma (controllo della luminosità dell'immagine) e correzione del colore

&

# 8226; Intreccio bidimensionale (a metodo di visualizzazione progressiva).

Inoltre, dai un'occhiata a queste risorse come guida:

Wow, sono davvero sorpreso con tutte le risposte sbagliate qui. PNG-8 sarà sempre più piccolo di GIF se ottimizzato correttamente. Esegui semplicemente i tuoi file PNG-8 attraverso PngCrush o uno qualsiasi degli altri Routine di ottimizzazione PNG.

Le cose chiave da capire:

  • PNG8 e GIF sono senza perdita < = 256 colori
  • PNG8 può sempre essere più piccolo di GIF
  • GIF non dovrebbe mai essere usato a meno che non sia necessaria l'animazione

e ovviamente

  • Usa JPG per amp & nero; immagini fotografiche bianche o a colori
  • Usa PNG per immagini a basso colore, disegni al tratto, immagini di tipo screenshot

Il motivo principale per utilizzare PNG su GIF da un punto di vista legale è trattato qui:

http://www.cloanto.com/users/mcb/19950127giflzw.html

Apparentemente i brevetti sono scaduti dal 2004, ma l'idea che si possa usare PNG come open-source su GIF è interessante per molte persone.

(riferimento open source png: http: //www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS )

Fai attenzione ai cambiamenti di colore quando usi PNG. Questo link fornisce un esempio e contiene molti più link con ulteriori spiegazioni:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillxooHard.asp

Le immagini GIF non sono soggette a questo problema.

Non penso che faccia molta differenza (ai clienti non importa). Personalmente sceglierei i PNG perché sono uno standard W3C.

Sii cauto con gli effetti di trasparenza PNG: non funzionano con IE6.

Per le immagini sul Web, ogni formato ha i suoi pro e contro. Per le immagini di tipo fotografico (ad es. Un sacco di colori, senza bordi rigidi) utilizzare un JPEG.

Per icone e simili, puoi scegliere tra PNG e GIF. Le GIF sono limitate a 256 colori. I PNG possono essere formattati come GIF (ovvero 256 colori, con trasparenza a 1 bit che funzionerà in IE6), ma per le immagini piccole sono leggermente più grandi delle GIF. I PNG a 24 bit supportano sia una vasta gamma che una trasparenza alfa (sebbene sia problematica in IE6).

I PNGS sono la tua unica scelta davvero sensata per cose come gli screenshot (cioè entrambi i colori con e bordi duri), e personalmente, questo è ciò a cui mi attengo la maggior parte del tempo, a meno che non abbia qualcosa per cui JPEG è più adatto (come una foto).

Il PNG indicizzato (meno di 256 colori) è in realtà sempre più piccolo di GIF, quindi lo uso quasi sempre.

Per la grafica generata da computer (ovvero disegnata da te stesso in Photoshop, Gimp, ecc.) JPG è fuori discussione, perché è in perdita, ovvero ottieni pixel grigi casuali. Per le immagini statiche, PNG è migliore in ogni modo: più colori, trasparenza scalabile (diciamo, trasparente al 10%, .gif supporta solo 0% e 100%), ma c'è un problema che alcune versioni di Internet Explorer non fanno PNG trasparenza correttamente, in modo da ottenere uno sfondo piatto non trasparente che sembra brutto. Se non ti interessano quegli utenti di IE, scegli PNG.

A proposito, se vuoi animazioni, scegli GIF.

PNG è un sostituto del 100% per i file GIF ed è supportato da tutti i browser web che potresti incontrare.

Ci sono pochissime situazioni in cui la GIF sarebbe preferibile. La più importante è l'animazione - lo standard GIF89a supporta l'animazione e praticamente tutti i browser la supportano, ma il semplice vecchio formato PNG non lo fa - dovresti usare MNG per questo, che ha un supporto limitato per il browser.

Praticamente tutti i browser supportano la trasparenza a bit singolo nei file PNG (il tipo di trasparenza offerto dal formato GIF). C'è una mancanza di supporto in IE6 per la piena trasparenza a 8 bit di PNG, ma questo può essere corretto per la maggior parte delle situazioni da un po 'di magia CSS.

Se i tuoi file PNG stanno uscendo più grandi di equivalenti file GIF, è quasi certamente perché l'immagine di origine ha più di 256 colori. I file GIF sono indicizzati su una tavolozza massima di 256 colori, mentre i file PNG nella maggior parte dei programmi di grafica vengono salvati per impostazione predefinita in un formato lossless a 24 bit. Se la dimensione del file è più importante dei colori precisi, salvalo come PNG indicizzato a 8 bit e dovrebbe essere equivalente a GIF o superiore.

È possibile " hack " un file GIF per avere più di 256 colori usando una combinazione di fotogrammi di animazione con flag da non sostituire e tavolozze multiple, ma questo approccio è stato praticamente dimenticato dall'avvento di PNG.

Un grave problema con le GIF è che si tratta di un formato gravoso di brevetti (EDIT: apparentemente non è più vero). Se non ti interessa, sentiti libero di usare le GIF. I PNG hanno molta più flessibilità rispetto ai GIF, in particolare nell'area dello spazio colore, ma questa flessibilità spesso significa che vorrai & Quot; ottimizzare & Quot; i PNG prima di pubblicarli. Una ricerca web dovrebbe scoprire strumenti per la tua piattaforma per questo.

Ovviamente, se si desidera l'animazione, la GIF è l'unica strada da percorrere, dal momento che MNG era sostanzialmente un antipasto per qualche motivo.

Personalmente uso gif per le mie immagini, dato che funzionano ovunque, ovviamente la tua limitazione di trasparenza è un elemento chiave che indirizzerebbe qualcuno verso un formato specifico.

Non vedo alcun difetto nell'uso di gif.

Se diventano più piccoli e non hai nulla da guadagnare dall'uso delle funzionalità offerte da PNG (che è la trasparenza del canale alfa e più di 256 colori), non vedo alcun motivo per cui dovresti usare PNG.

I file gif tenderanno ad essere un po 'più piccoli poiché non supportano un canale alfa trasparenza (e forse per altri motivi). Personalmente, non credo che valga la pena preoccuparsi della differenza di dimensioni quasi quanto una volta. La maggior parte delle persone utilizza il Web con una sorta di banda larga ora, quindi dubito che noteranno una differenza.

Probabilmente è più importante usare il tipo di immagini con cui i tuoi strumenti di manipolazione funzionano meglio.

Inoltre, mi piace la possibilità di mettere un'immagine su qualsiasi sfondo e fare in modo che l'ombreggiatura lavori, il che mi punta maggiormente verso il formato png.

Di solito uso le gif per via delle dimensioni, ma c'è anche png-8 che ha anche 256 colori.

Se hai bisogno di cose semi-trasparenti fantasiose, usa png-24.

Di solito uso la funzione 'Salva per Web' in Photoshop, che ti permette di giocherellare con il tipo di file, il numero di colori ecc. e vedere il risultato prima di salvare. Ovviamente userei il minimo possibile che mi sembra ancora bello agli occhi.

Uso jpg per tutte le immagini non trasparenti. Puoi controllare la compressione, che mi piace. Ho trovato questo sito web che confronta i due. jpg è più piccolo e ha un aspetto migliore.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top