Formati immagine Web site: La scelta del formato giusto per il compito giusto

Question

Quando si progetta un sito web, che cosa si considera il miglior formato di immagine da utilizzare per un particolare compito?

Ho sempre mi trovo in un dilemma quando si cerca di capire quale formato da utilizzare per un compito specifico ... come per esempio, Dovrei usare .jpg tutto? o quando e perché dovrei usare un .png?

Ad esempio, prendendo Amazon sito web 's, che usano . jpg per le immagini dei prodotti ( Esempio ), < strong> .gif per questo pixel trasparenti ( Esempio ) e .png per le loro Sprites CSS ( Esempio )

D'altra parte, Play.com utilizzare un .gif per la loro sito web logo ( Esempio ), ma utilizzare .jpg per i loro prodotti di siti web (come Amazon) ( Esempio ) e come quanto loro pagina principale va, essi non hanno alcun .png s su di esso.

Che cosa formati dovrei usare per i miei siti web? e perché dovrei usarli?

[UPDATE]

cruello per questo link per spiegare le differenze, e anche Dustin per dare motivi su cosa utilizzare <. / p>

Answer 1

JPEG sono per le foto. Vedo JPEG con il testo in loro di tanto in tanto e hanno appena un aspetto orribile. Il testo è migliore per il testo, altrimenti utilizzare PNG.

Se non è una foto, ma si desidera una grafica di esso, utilizzare un PNG. Un PNG è quasi sempre più piccolo del GIF equivalente e non perderà di qualità come un file JPEG. Un PNG equivalente di un JPEG sarà tipicamente molto più grande (supponendo che è fotorealistico). Ci possono essere momenti in cui questo è ancora desiderabile.

PNG non permettono di avere 8-bit di trasparenza, ma se si deve supportare IE, troverete che essi continuamente si rifiutano di sostenere che in modo corretto. Essi do supportano un singolo bit di trasparenza un'immagine a 8 bit (essenzialmente la stessa GIF) in quanto ne so. Ci sono anche numerosi hack per ottenere la trasparenza a 8 bit per lavorare in IE. Non ho mai preso la briga, me stesso.

In sintesi:

• Foto → jpg
• ! Foto → png

Answer 2

È necessario essere consapevoli di alcuni fattori chiave ...

In primo luogo, ci sono due tipi di compressione: Lossless e Lossy .

Lossless significa che l'immagine è fatto più piccolo, ma in nessun danno per la qualità. Lossy significa che l'immagine è fatta (anche) più piccolo, ma ad un danno per la qualità. Se avete salvato l'immagine in un formato lossy più e più volte, la qualità dell'immagine otterrebbe progressivamente sempre peggio.

Ci sono anche diverse profondità di colore (palette): Scala di colore e colore diretto .

Scala significa che l'immagine può memorizzare solo un numero limitato di colori (di solito 256) che vengono scelti dall'autore dell'immagine, con diretto che significa che in grado di memorizzare molte migliaia di colori che non sono stati scelti dall'autore.

---

BMP - Lossless / indicizzato e Direct

Questo è un vecchio formato. E 'Lossless (senza dati di immagine si perde sul risparmio), ma c'è anche poca o nessuna compressione a tutti, il che significa risparmio di risultati BMP in grandi dimensioni dei file. Può avere tavolozze sia indicizzato e diretto, ma questa è una piccola consolazione. Le dimensioni dei file sono così inutilmente grandi che nessuno usa mai veramente questo formato.

Per: Niente di veramente. Non c'è niente BMP eccelle, o non è fatto meglio da altri formati.

---

GIF - Lossless / indicizzato solo

GIF utilizza la compressione senza perdita di dati, il che significa che è possibile salvare l'immagine più e più volte e mai perdere tutti i dati. Le dimensioni dei file sono molto più piccoli di BMP, perché il buon compressione viene effettivamente utilizzato, ma può memorizzare solo una tavolozza indicizzata. Ciò significa che ci può essere solo un massimo di 256 diversi colori nel file. Che suona come una piccola quantità del tutto, e lo è.

Le immagini GIF possono essere animati e hanno la trasparenza.

Per: Logos, disegni al tratto, e altre immagini semplici che devono essere di piccole dimensioni. Solo in realtà utilizzato per i siti web.

---

JPEG - Lossy / Direct

immagini JPEG sono stati progettati per rendere le immagini fotografiche dettagliate il più piccolo possibile, eliminando le informazioni che l'occhio umano non noterà. Di conseguenza si tratta di un formato lossy, e salvare lo stesso file più e più volte si tradurrà in maggiore quantità di dati che sono perse nel tempo. Ha una tavolozza di migliaia di colori e così è grande per le fotografie, ma la compressione lossy significa che è un male per loghi e disegni al tratto: Non solo si guarda confusa, ma tali immagini avranno anche una più ampia dimensione dei file rispetto a GIF!

Per: Photographs. Inoltre, gradienti.

---

PNG-8 - Lossless / indicizzato

PNG è un formato più recente, e PNG-8 (la versione indicizzata di PNG) è davvero un buon sostituto per GIF. Purtroppo, però, ha alcuni svantaggi: in primo luogo non può sostenere l'animazione come GIF può (o meglio si può, ma solo Firefox sembra sostenere che, a differenza di animazione GIF che è supportato da tutti i browser). In secondo luogo ha alcuni problemi di supporto con i vecchi browser come IE6. In terzo luogo, il software importanti come Photoshop hanno molto scarsa applicazione del formato. (Accidenti a te, Adobe!) PNG-8 può memorizzare solo 256 colori, come GIF.

Per:. La cosa principale che PNG-8 fa meglio di GIF sta avendo il supporto per Alpha Trasparenza

Nota importante: Photoshop non supporta Alpha Trasparenza per PNG-8 file. (Accidenti, Photoshop!) Ci sono modi per convertire Photoshop PNG-24 in PNG-8 file, pur mantenendo la loro trasparenza, però. Un metodo è pngquant , un altro è quello di salvare i file con Fireworks .

---

PNG-24 - Lossless / Direct

PNG-24 è un grande formato che combina la codifica lossless con il colore diretto (migliaia di colori, proprio come JPEG). E 'molto simile a BMP a questo proposito, se non che in realtà PNG comprime le immagini, in modo che si traduce in file molto più piccoli. Purtroppo file PNG-24 sarà ancora molto più grande di JPEG, GIF e PNG-8, quindi è ancora necessario prendere in considerazione se si vuole veramente usare uno.

Anche se PNG-24 permettono di migliaia di colori, pur avendo la compressione, non sono destinati a sostituire le immagini JPEG. Una fotografia salvata come PNG-24 sarà probabilmente almeno 5 volte più grande l'immagine JPEG equivalente che, con pochissima miglioramento della qualità visibile. (Naturalmente, questo può essere un risultato desiderabile se non siete preoccupati per le dimensioni del file, e vuole ottenere la migliore qualità di immagine possibile.)

Proprio come PNG-8, PNG-24 supporta la trasparenza alfa, anche.

Mi auguro che aiuta!

Answer 3

PNG deve essere utilizzato quando:

• È necessario trasparenza (sia 1-bit o trasparenza alfa)
• compressione senza perdita funzionerà bene (ad esempio per un grafico o un logo o immagine generato dal computer)

JPEG devono essere usati quando:

• compressione senza perdita non funziona bene (come una fotografia)
• è necessaria a pieni colori

GIF dovrebbe essere quando:

• PNG non è disponibile, ad esempio su molto vecchio software o browser
• Animazione è necessario

Nonostante miti in senso contrario, PNG sorpassa GIF in molti aspetti. PNG è capace di ogni modalità immagine di GIF parte di animazione, e quando si utilizza la stessa modalità immagine, PNG avrà una migliore compressione dovuta al suo algoritmo DEFLATE superiore rispetto a LZW. PNG è anche in grado di modalità aggiuntive che GIF non può fare, come il colore a 24 bit, e la trasparenza alpha, ma è qui che si può incorrere in problemi sul web. La trasparenza alfa ha problemi di compatibilità con IE6 che sono ben documentate (anche se esistono hack per aggirare).

modalità PNG includono (questo è solo un piccolo sottoinsieme)

• Color Palette da 2 a 256 colori (come GIF)
• colore tavolozza da 2 a 256 colori, con colore trasparente (come GIF)
• True color (colore a 24 bit)
• True Color con canale alfa (colore + 8 bit trasparenza alfa 24 bit)

Per una migliore compressione in formato PNG per il web, utilizzare sempre una modalità di palette. Se trovate i file PNG sono più grandi rispetto ai file GIF equivalenti, allora si sta salvando il PNG a colori a 24 bit e il GIF in modalità palette (perché un GIF è sempre in modalità palette). Provare la conversione in modalità tavolozza prima.

Se si scopre che i file PNG con trasparenza non funzionano correttamente in IE6, mentre i file GIF sono, quindi si utilizza 24 bit di colore + trasparenza alfa in PNG e modalità tavolozza con un colore trasparente con GIF. Si dovrà fare in modo che si converte il PNG in una modalità colore tavolozza con un colore trasparente.

PNG ha anche altri modi, come tavolozza dei colori con trasparenza alfa nella palette. Modalità di questo tipo non possono essere utilizzate in Photoshop.

Answer 4

Prova a guardare a questo sito http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Si cerca di spiegare cosa usare quando

Answer 5

Se si memorizza o la presentazione di un gran numero di immagini della nuova formato WebP Google potrebbe essere opportuno prendere in considerazione in quanto è il 25% più piccolo di PNG / JPG. Nota: questo non è supportato da tutti i browser in questo momento. NB. Questo è uscito nel 2010 dopo questa domanda è stata pubblicata.

Answer 6

JPEG FORMATO FILE

1. Grande per le immagini quando si ha bisogno per mantenere la piccola dimensione
2. Una buona alternativa per le fotografie
3. Bad per i loghi, disegni al tratto, e le ampie aree di colore piatto

GIF FORMATO FILE

1. Grande per gli effetti animati
2. bella opzione per clip art, grafica piatta, e le immagini che utilizzano i colori minimal e linee precise
3. Una buona alternativa per semplici loghi con blocchi di colori

PNG FORMATO FILE

1. Lossless
2. Ottima scelta quando la trasparenza è un must
3. Una buona alternativa per i loghi e disegni al tratto
4. Non supportato in tutto il mondo

Si può vedere questo infografica per informazioni più dettagliate, Immagine Tipi di file: Quando usare JPEG, GIF e PNG