Quali formati di grafica web usare?

I siti Web possono contenere grafica in formato JPEG, GIF, PNG, SVG. Quali dovrebbero essere usati e quando?

Quando usare JPG

• immagini fotografiche
• quando la compressione non ha importanza

Quando usare PNG

• quando hai bisogno di trasparenza
• quando si dispone di motivi (sfondi)

Quando utilizzare GIF

• quando è necessaria un'animazione compatibile con le versioni precedenti *
• quando un'immagine è composta principalmente da una manciata di colori (2-16) **
• quando non hai bisogno di trasparenza e hai motivi (anche se png è preferito)

_{* Con l'ascesa dell'animazione CSS come opzione praticabile per quasi tutti i browser, l'uso del formato .GIF è sempre meno il formato di riferimento per l'animazione web. .jpg, .pnge .gifpuò essere impostato per avere una funzione "animata" con l'uso di CSS. Sebbene le gif animate possano essere utilizzate in modo attraente nel web design in determinati casi, le eccezioni sono rare, quindi tende ad essere meglio evitarle.}

_{** (le .gifimmagini sono limitate a soli 256 colori nella loro tavolozza.)}

(migrato da una domanda duplicata)

Questo dipende totalmente dal tipo di immagine che si desidera memorizzare.

• PNG è un formato di compressione senza perdita di dati adatto alla grafica bitmap "vettoriale" (ovvero grafica con aree ampie e regolari con lo stesso colore e bordi chiaramente definiti; grafica contenente testo in chiaro).

• SVG è un formato vettoriale , più adatto a contenere grafica vettoriale (in breve, raccolte di elementi geometrici anziché raccolte di pixel). SVG è scalabile senza limiti, mentre la grafica bitmap perde qualità quando viene ingrandita.

• JPG è un formato di compressione con perdita di dati (tra le altre cose, rimuove le sfumature dell'immagine invisibili all'occhio umano per risparmiare spazio di archiviazione). È più adatto per le fotografie; a causa del suo metodo di compressione, non è adatto per illustrazioni vettoriali o testo.

Compatibilità del browser:

• La grafica PNG è supportata su tutti i browser, ad eccezione di IE 6 se il PNG contiene trasparenza alfa (le parti trasparenti verranno visualizzate in grigio) e tutte le versioni di IE se il PNG si trova all'interno di un elemento HTML con opacità inferiore a 100 % (ma questo è un caso limite).

• SVG non è sempre un'opzione perché il supporto del browser non è al 100% al momento . Potrebbero esserci anche altre differenze comportamentali in un normale <img>tag. Usa questo solo se sai cosa stai facendo.

• JPG standard è supportato su tutti i browser purché sia ​​salvato in modalità RGB anziché CMYK (se il tuo programma non fa la differenza, probabilmente è quello predefinito).

Dovresti essere consapevole di alcuni fattori chiave ...

Innanzitutto, esistono due tipi di compressione: Lossless e Lossy .

• Senza perdita di dati significa che l'immagine viene ridotta, ma senza compromettere la qualità.
• Perdita significa che l'immagine viene resa (anche) più piccola, ma a scapito della qualità. Se si salvasse ripetutamente un'immagine in un formato Lossy, la qualità dell'immagine peggiorerebbe progressivamente.

Esistono anche diverse profondità di colore (palette): Colore indicizzato e Colore diretto .

• Indicizzato significa che l'immagine può memorizzare solo un numero limitato di colori (di solito 256), controllato dall'autore, in qualcosa chiamato Mappa dei colori
• Diretto significa che è possibile memorizzare molte migliaia di colori che non sono stati scelti direttamente dall'autore

BMP : senza perdita / indicizzato e diretto

Questo è un vecchio formato. È senza perdita di dati (al momento del salvataggio non vengono persi dati sulle immagini), ma la compressione è minima o nulla, il che significa salvare poiché BMP comporta file di dimensioni MOLTO grandi. Può avere tavolozze sia indicizzate che dirette, ma questa è una piccola consolazione. Le dimensioni dei file sono così inutilmente grandi che nessuno usa mai questo formato.

Buono per: niente di veramente. Non c'è nulla che ecceda BMP o che non sia migliorato da altri formati.

GIF - Solo senza perdita / indicizzato

GIF utilizza la compressione senza perdita di dati, il che significa che è possibile salvare l'immagine più e più volte e non perdere mai alcun dato. Le dimensioni del file sono molto più piccole di BMP, poiché in realtà viene utilizzata una buona compressione, ma può solo memorizzare una tavolozza indicizzata. Ciò significa che per la maggior parte dei casi d'uso , nel file possono essere presenti al massimo 256 colori diversi. Sembra una piccola quantità, e lo è.

Le immagini GIF possono anche essere animate e avere trasparenza.

Buono per: loghi, disegni al tratto e altre immagini semplici che devono essere di piccole dimensioni. Utilizzato davvero solo per i siti Web.

JPEG - Perdita / diretta

Le immagini JPEG sono state progettate per ridurre al minimo le immagini fotografiche dettagliate rimuovendo le informazioni che l'occhio umano non noterà. Di conseguenza è un formato Lossy e il salvataggio ripetuto dello stesso file comporta la perdita di più dati nel tempo. Ha una tavolozza di migliaia di colori ed è quindi ottimo per le fotografie, ma la compressione con perdita di dati significa che è dannosa per i loghi e i disegni a tratteggio: non solo appariranno sfocati, ma tali immagini avranno anche una dimensione del file più grande rispetto alle GIF!

Consigliato per: fotografie. Inoltre, gradienti.

PNG-8 - Senza perdita / indicizzato

PNG è un formato più recente e PNG-8 (la versione indicizzata di PNG) è davvero un buon sostituto delle GIF. Purtroppo, ha alcuni inconvenienti: in primo luogo non può supportare l'animazione come GIF può (beh può, ma solo Firefox sembra supportarla, a differenza dell'animazione GIF che è supportata da ogni browser). In secondo luogo, presenta alcuni problemi di supporto con browser meno recenti come IE6. In terzo luogo, software importanti come Photoshop hanno un'implementazione molto scarsa del formato. (Accidenti a te, Adobe!) PNG-8 può memorizzare solo 256 colori, come le GIF.

Buono per: la cosa principale che PNG-8 fa meglio delle GIF è avere il supporto per Alpha Transparency.

Nota importante: Photoshop ha finalmente aggiunto il supporto per la trasparenza alfa nelle ultime versioni. Se ne hai uno più vecchio, ci sono modi per convertire Photoshop PNG-24 in file PNG-8 mantenendo comunque la loro trasparenza. Un metodo è PNGQuant , un altro è quello di salvare i file con Fireworks .

PNG-24 - Senza perdita / diretto

PNG-24 è un formato eccezionale che combina la codifica Lossless con il colore diretto (migliaia di colori, proprio come JPEG). È molto simile a BMP a questo proposito, tranne per il fatto che PNG comprime effettivamente le immagini, quindi risulta in file molto più piccoli. Sfortunatamente i file PNG-24 saranno ancora molto più grandi di JPEG, GIF e PNG-8, quindi devi ancora considerare se vuoi davvero usarne uno.

Anche se i PNG-24 consentono migliaia di colori pur avendo compressione, non sono destinati a sostituire le immagini JPEG. Una foto salvata come PNG-24 sarà probabilmente almeno 5 volte più grande di un'immagine JPEG equivalente, con un miglioramento molto piccolo della qualità visibile. (Naturalmente, questo potrebbe essere un risultato desiderabile se non sei preoccupato per le dimensioni del file e vuoi ottenere la migliore qualità dell'immagine che puoi.)

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

SVG - Lossless / Vector

Un tipo di file che sta attualmente crescendo in popolarità è SVG, che è diverso da tutto quanto sopra in quanto è un formato di file vettoriale (i precedenti sono tutti raster ). Ciò significa che in realtà comprende linee e curve anziché pixel. Quando ingrandisci un'immagine vettoriale, vedi ancora una curva o una linea. Quando ingrandisci un'immagine raster, vedrai i pixel.

Per esempio:

Ciò significa che SVG è perfetto per i loghi e le icone che si desidera mantenere la nitidezza sugli schermi Retina o con dimensioni diverse.

Inoltre, i file SVG sono scritti in XML e quindi possono essere aperti e modificati in un editor di testo, che può essere manipolato al volo, se lo si desidera. Ad esempio, è possibile utilizzare JavaScript per modificare il colore di un'icona SVG su un sito Web proprio come si farebbe con un po 'di testo (cioè non è necessaria una seconda immagine).

Spero che aiuti!

JPG:

Vantaggi:

• Sono disponibili molti livelli di compressione diversi
• Facile da manipolare con tutti gli editor di immagini

Inconvenienti:

• Manufatti di compressione

Usi:

• Grandi foto o immagini con molti colori
• Quando è necessaria un'elevata compressione

PNG:

Vantaggi:

• Trasparenza con l'alfa!
• Tanti colori
• Può sostituire jpg

Inconvenienti:

• Meno compressione rispetto a JPG (ma non così tanto)
• Incompatibile con IE6 (e 7 credo) - deve usare patch o hack per questo. Ma a chi importa? A deve usare;)

Usi:

• Foto / immagini piccole o medie con molto colore
• A deve essere utilizzato se si desidera la trasparenza gradiente
• Icone
• Loghi

GIF:

Vantaggi:

• Può essere animato
• Molto leggero se usi solo un po 'di colore (come 8-16 o 32 colori diversi)
• Trasparenza

Inconvenienti:

• Non può avere più di 255 colori.
• Le gif animate possono far fuggire le persone
• Nessuna alfa per la trasparenza (è trasparente o no!)

Usi:

• Gif animate (le uso principalmente nelle newsletter)
• Icone
• Favicon animato \ o /
• Loghi

I siti Web possono contenere grafica in formato JPEG, GIF, PNG, SVG. Quali dovrebbero essere usati e quando?

Per le foto:

JPEG se non è necessaria trasparenza. PNG per la grafica fotografica che necessita di trasparenza.

Sebbene non sia vero al 100%, è una buona regola empirica. Dai un'occhiata alle altre risposte a questa domanda per saperne di più sugli altri formati. Inoltre, controlla quale formato di immagine raster è migliore per la visualizzazione digitale di immagini in assenza di trasparenza; JPEG o PNG? e una selezione dei nostri tag in formato file , come jpeg , png , gif e svg per saperne di più.

Per la grafica:

SVG con fallback PNG / JPEG.

Non c'è assolutamente alcun motivo per non fornire SVG al giorno d'oggi. Sono implementati quasi nello stesso modo di qualsiasi immagine normale e molto più versatili.

Quindi, il flusso di lavoro per qualsiasi moderno designer di siti Web non è stato completamente modificato, è stato aggiornato. Preparate e servite ancora PNG e JPEG per la grafica, ma sono fallback solo quando SVG non funziona.

Che cos'è un SVG?

SVG sta per Scalable Vector Graphic. Senza diventare troppo tecnici, la differenza tra SVG e altri formati basati su pixel è che i dati per la composizione della grafica sono memorizzati come calcoli matematici. Quando un browser apre un file SVG, deve eseguire calcoli per eseguire il rendering del file SVG. I browser più vecchi non hanno la funzionalità per eseguire questi calcoli o gestire SVG, inoltre, i computer più vecchi potrebbero aver faticato a rendere una pagina Web SVG pesante anche se avrebbero potuto essere utilizzati 10 anni fa (cosa che non potevano). I dati per un SVG sono archiviati in formato esadecimale (base-16), consentendone l'ottimizzazione in file di dimensioni molto ridotte rispetto alla memorizzazione binaria di dati pixel.

Ecco alcune risorse per ulteriori informazioni su come ottenere la tecnica di fallback:

1. Padroneggiare l'uso di SVG per un retina web, fallback con script PNG

2. Rivisitare il flusso di lavoro SVG per prestazioni e sviluppo progressivo con URI di dati trasparenti

3. Trucchi CSS - Fallback SVG

Il seguente frammento JavaScript, copiato dal primo collegamento, è tutto ciò che serve per rilevare il supporto SVG nella maggior parte, se non in tutti i browser, e modificare il nome file per fornire fallback PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Quando utilizzare SVG

• Ogni volta che puoi, dato che in genere è la dimensione del file più piccola e indipendente dalla risoluzione, significa che può gestire qualsiasi rapporto pixel del dispositivo (schermi retina, ad esempio)
• Quando la tua arte è adatta per formati di file vettoriali (icone in particolare)
• Quando hai il lusso di dover solo scegliere come target i browser moderni (il supporto SVG è relativamente nuovo per alcuni browser)

Quando utilizzare i caratteri icona

• Quando hai bisogno di un ampio set di icone
• Quando, come SVG, desideri i vantaggi dei formati di file vettoriali
• Quando hai il lusso di dover solo scegliere come target i browser moderni (il supporto dei font web è relativamente nuovo per alcuni browser)

</DA01>

Perché SVG è l'opzione migliore?

• Ridimensiona magnificamente a qualsiasi dimensione da un file (non è necessario servire @2x.jpgper schermi retina o allungare la grafica)

• Molto spesso file di dimensioni inferiori rispetto a JPEG e PNG

• Quasi mai sacrificare la qualità del logo

• Semplifica il design reattivo in molti modi

Gli appunti

• Il supporto è meno comune per gli SVG in linea, quindi per sicurezza al momento è meglio collegarsi ai file tramite i tag immagine. (Se stai per riutilizzare la grafica in qualsiasi altro luogo, ad esempio le icone di navigazione, vuoi collegarti ad essa in modo esterno in modo che il browser lo memorizzi nella cache e risparmi tempo nel caricamento di altre pagine.)

• IE non supporta SVGZ, il formato compresso disponibile per la grafica SVG. Per la massima compatibilità tra i browser e le versioni precedenti recenti, è meglio utilizzarlo SVG 1.0in questo momento.

• Puoi comunque creare fogli di sprite con SVG più o meno come faresti con altri formati di immagine, ma invece di utilizzare i valori di pixel effettivi per definire le coordinate xey di ciascuna immagine, usa valori basati su percentuale.

  Che dire di quei casi in cui i valori percentuali non sono abbastanza precisi?

  Dovresti costruire il foglio sprite con l'obiettivo di poter dividere sia la larghezza che l'altezza per 100 e ottenere numeri interi, o numeri con un massimo di 1 decimale. Ad esempio, se disponi 7 10px x 10pxicone x in un foglio sprite, non creare una tela che sia 70px x 10px.

  Perché? Perché quando dividi 100 per 7, ottieni 14.285714285714285714285714285714, che, come percentuale arrotondata, causerebbe sicuramente qualche matematica imperfetta da qualche parte.

  Invece, crea una 80px x 10pxtela e non preoccuparti per il 12,5% vuoto. Le icone avranno esattamente incrementi del 12,5%, il che, inutile dirlo, è molto più facile da lavorare.

Dovresti usare .jpeg per fotografie o immagini con molti colori. Il tipo di file .gif è utile per le immagini animate o dove è necessaria la trasparenza, ma sta diminuendo nell'uso. Il formato più popolare è .png, che può anche offrire trasparenza alfa e una gamma di colori maggiore rispetto al tipo di file .gif. Per una panoramica più dettagliata, consulta l'articolo di Jonathan Snook, quale formato di immagine è il migliore .

Una buona formula potrebbe essere quella di utilizzare JPEG per le foto e PNG per tutto il resto.

Naturalmente, se hai una grafica che non ha bisogno di trasparenza alfa e hai meno di 256 colori, GIF potrebbe farti risparmiare un po 'di larghezza di banda, ma sicuramente sta per uscire.

Uso PNG per praticamente tutto, poiché non ha gli artefatti di compressione di JEPG ed è quasi universalmente compatibile in questi giorni (ho visto un paio di editor di siti che non si adattano bene ad esso, come la versione desktop del software SiteBuilder di Homestead, ma questo è tutto).

Dovresti scegliere la tua immagine in base al livello di compressione / qualità che desideri ottenere.

Il Web è tutto basato sulla velocità nel download delle informazioni e minore è la dimensione di un'immagine, meglio è per la velocità di caricamento di una pagina.

JPG : per immagini con milioni di colori (fotografia)

PNG e GIF : per trasparenza e pochi colori. Lo uso solo con 64/128 colori diversi, ma generalmente con 256. (icone, immagini vettoriali che devono essere raster, colori ad alto contrasto, sfumature con pochi colori)

Come scegliere tra PNG e GIF?

Prima di tutto controlla l'ottimizzazione della compressione / qualità e scegli chi ti dà risultati migliori per un minor peso. Uso ancora ampiamente GIF, ed a volte è meglio di PNG per lo stesso tipo di immagini. Non discriminare un formato per un altro, controlla semplicemente quello che sembra più adatto alla tua ottimizzazione.

• Scegli GIF: per immagini animate a non più di 256 colori
• Se non hai bisogno di animazioni, potresti scegliere il PNG. Scegli il PNG giusto: ci sono 2 tipi 8 bit e 24 bit. 8 bit tende ad essere una versione migliore della GIF senza animazione per qualità / compressione (ma come ho detto non sempre, dai un'occhiata quando salvi per il Web). 24bit non ha compressione (quindi usalo a malapena per alcuni effetti grafici speciali) e ha il vaule alfa per l'utilizzo della trasparenza del colore (i vecchi browser IE non lo supportano, se non applichi un filtro speciale o un comportamento .htc alla pagina ).

Da vari articoli posso vedere che il 90% dei web designer pensa ancora che PNG sia solo in formato lossless . Molti professionisti non sanno nemmeno dell'esistenza di PNG-8.

Ma ovviamente PNG-8 è quello che dovrebbero usare per il web, invece di PNG-32. Perché fornisce file di dimensioni 2x-5x più piccole con una qualità accettabile.

A volte è difficile decidere quale compressione è migliore per un'immagine. Ad esempio, se non è una foto, ma ha molti colori e sfumature. Questo strumento consente di confrontare visivamente entrambi i formati con perdita e di scegliere la variante migliore.

Ecco uno strumento utile per confrontare i formati PNG e JPEG con perdita di dati: PNG vs JPEG

I principali formati di grafica Web sono GIF, JPG e PNG. È importante conoscere le differenze e scegliere il formato migliore per ogni immagine, in modo che le immagini abbiano un bell'aspetto e siano più compatte che possono apparire in modo che appaiano rapidamente sullo schermo del visitatore del tuo sito.

GIF - Formato di informazioni grafiche

Il formato grafico GIF è il migliore per le immagini con pochi colori: grafici, grafici o testo impostato come grafica. Meno colori usi, più efficienti sono i file GIF. File GIF ...

• può contenere fino a 256 colori.

• supportare una funzione chiamata trasparenza, in cui un colore tra i 256 colori è impostato per essere trasparente. Ciò impedisce alla grafica di apparire come se fosse in riquadri, poiché lo sfondo del file è invisibile, lasciando trasparire lo sfondo della pagina Web.

• può essere animato. All'interno di un singolo file sono memorizzate molte cornici e un indice che indica la durata di visualizzazione di ciascuna cornice. La GIF animata viene trattata come un file di immagine standard, quindi viene caricata con il tag standard.

• sono senza perdita di dati, il che significa che la qualità dell'immagine non è compromessa dal processo di compressione.

• possono essere interlacciati in modo che sbiadiscano, dalla qualità inferiore a quella superiore, durante il caricamento. Questo dà ai tuoi visitatori qualcosa da guardare mentre stanno aspettando.

• non vanno bene per le fotografie - perdi qualità e i file non saranno compatti. Usa il formato grafico JPG per le foto.

JPG - Gruppo di esperti fotografici congiunti

Il formato grafico JPG è il migliore per le immagini con molti colori, come fotografie o opere d'arte digitalizzate. File JPG ...

• può contenere fino a 16 milioni di colori.

• supportare la compressione variabile. È possibile applicare una compressione maggiore o minore a ogni singola immagine. Maggiore è la compressione applicata, maggiore è la qualità che perdi. Sebbene le dimensioni dei file possano essere ridotte con questo formato grafico, spesso è necessario scendere a compromessi tra dimensioni del file e qualità dell'immagine. I software di grafica più recenti offrono un'anteprima prima del salvataggio: ciò consente di sperimentare vari livelli di compressione per scegliere il miglior compromesso tra qualità e dimensioni del file.

• sono disponibili in tre tipi: linea base o standard, linea base ottimizzata o standard ottimizzata e progressiva. Baseline è stato progettato per i browser che considereremmo antichi in questi giorni (come Internet Explorer versione 1). L'ottimizzazione della linea di base offre una maggiore compressione rispetto alla linea di base standard e praticamente ogni browser oggi può leggere tale immagine. Un JPG progressivo, come un file GIF interlacciato, si costruisce mentre scarica, passando da una rappresentazione grezza dell'immagine al suo aspetto finale. Mentre questo è un bel formato grafico Web, i browser più vecchi non supportano tutti questo formato.

• non vanno bene per le immagini con solo pochi colori, come il testo impostato come grafica o immagini con aree di colori piatti. Se usi JPG per questi elementi grafici, saranno più grandi del necessario e appariranno "chiazzati".

PNG - Grafica di rete progressiva

PNG è il formato grafico Web più recente. File PNG ...

• sono supportati da tutti i browser moderni. Questi file potrebbero non apparire nei browser più vecchi, quindi l'utilizzo di questo formato grafico potrebbe impedire ad alcuni visitatori del tuo sito Web di vedere le tue immagini.

• sono compatti e versatili e possono combinare le migliori caratteristiche di GIF e JPG, come la possibilità di avere sfondi trasparenti o la capacità di contenere immagini con milioni di colori.

• non sono ancora ampiamente utilizzati, principalmente perché non sono supportati dai browser più vecchi.

Quando usare quale?

La scelta del giusto formato di grafica Web può garantire che le tue immagini appaiano bene e appaiano rapidamente sul computer del tuo visitatore. La scelta del formato errato rende le tue immagini cattive e impiegano un'eternità a scaricarsi.

L'errore grafico più comune che le persone commettono sul Web è usare il formato grafico sbagliato per le loro immagini. Ma la scelta è davvero abbastanza semplice ...

• Se la tua grafica ha molti colori (come una foto), scegli JPG.

• Se la tua grafica ha pochi colori, scegli GIF. Quando si utilizza GIF, provare tavolozze ottimizzate che contengono solo i colori utilizzati: possono dimezzare le dimensioni dei file.

In un mondo ideale, si riduce a questo:

JPEG - Per immagini e fotografie raster

PNG - Per grafica vettoriale (es. Loghi, ecc.)

Sfortunatamente, Internet Explorer 6 (ancora, purtroppo, un gran numero di utenti) non supporta la trasparenza delle immagini PNG. Quindi, se il tuo PNG contiene trasparenza, potrebbero verificarsi problemi. Fortunatamente, esiste un hack che può essere utilizzato per aggirare questo problema, anche se non in modo elegante:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Inoltre, penso che anche IE 7 abbia problemi con alcune funzionalità dei PNG.)

Le GIF hanno solo due vantaggi rispetto a PNG:

1. Supporto del browser (quasi) perfetto (anche se non trasparente, quindi questo non è un gran bonus)
2. Possono essere animati, tuttavia la grafica animata dovrebbe essere usata con parsimonia nel web design.

EDIT: PNG è sempre preferibile a GIF dove è supportato e utilizzabile, poiché PNG è un formato aperto.

Come la maggior parte ha sottolineato, JPEG è buono per la fotografia e PNG buono per la grafica con testi e grafici. GIF ha l'unico vantaggio, che supporta l'animazione, che dovrebbe essere usato con molta attenzione.

Un buon consiglio è, per esportare la tua immagine come JPEG e PNG. Quasi sempre il formato migliore per i tuoi risultati grafici in un file più piccolo. Le fotografie diventano più piccole come JPEG e i grafici più piccoli come PNG. Quindi, se non sei sicuro di quale scegliere, questo può essere un buon decisore.