Quando devono essere utilizzati determinati tipi di file di immagini durante la creazione di siti Web o interfacce, ecc.?
Quali sono i loro punti di forza e di debolezza?
So che PNG e GIF sono senza perdita, mentre JPEG è con perdita.
Ma qual è la differenza principale tra PNG e GIF?
Perché dovrei preferire l'uno all'altro? Che cos'è SVG e quando dovrei usarlo?
Se non ti interessa ogni singolo pixel, dovresti sempre usare JPEG poiché è il "più leggero"?
Risposte:
Dovresti essere consapevole di alcuni fattori chiave ...
Innanzitutto, esistono due tipi di compressione: Lossless e Lossy .
Esistono anche diverse profondità di colore (palette): Colore indicizzato e Colore diretto .
BMP : senza perdita / indicizzato e diretto
Questo è un vecchio formato. È senza perdita di dati (al momento del salvataggio non vengono persi dati di immagine), 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.
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 più grandi dei JPEG (per le foto) e dei GIF / PNG-8 (per i loghi e la grafica), 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. Significa anche che un piccolo logo SVG può essere usato a dimensioni molto più grandi (più grandi) senza deterioramento della qualità dell'immagine - qualcosa che richiederebbe un file separato più grande (in termini di dimensione del file) con formati raster.
Le dimensioni dei file SVG sono spesso minuscole, anche se visivamente molto grandi, il che è fantastico. Vale la pena ricordare, tuttavia, che dipende dalla complessità delle forme utilizzate. Gli SVG richiedono più potenza di calcolo rispetto alle immagini raster perché i calcoli matematici sono coinvolti nel tracciare curve e linee. Se il tuo logo è particolarmente complicato, potrebbe rallentare il computer di un utente e persino avere file di dimensioni molto grandi. È importante semplificare il più possibile le forme vettoriali.
Inoltre, i file SVG sono scritti in XML e quindi possono essere aperti e modificati in un editor di testo (!). Ciò significa che i suoi valori possono essere manipolati al volo. 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), o addirittura animarlo.
In tutto, sono i migliori per semplici forme piatte come loghi o grafici.
Spero che aiuti!
JPEG non è il più leggero per tutti i tipi di immagini (o anche la maggior parte). Angoli, linee rette e semplici "riempimenti" (blocchi di colore solido) appariranno sfocati o con artefatti in base al livello di compressione. È un formato con perdita di dati e funziona meglio per le fotografie in cui non è possibile vedere chiaramente gli artefatti. Le linee rette (come nei disegni e nei fumetti e simili) si comprimono molto bene in PNG ed è senza perdite. GIF dovrebbe essere usato solo quando si desidera che la trasparenza funzioni in IE6 o si desideri l'animazione. GIF supporta solo un pallete a 256 colori ma è anche senza perdita di dati.
Quindi in pratica ecco un modo per decidere il formato dell'immagine:
E come commentato, se non sei sicuro di ciò che si qualificherebbe, prova ogni formato con rapporti di compressione diversi e sopporta la qualità e le dimensioni dell'immagine e scegli quale pensi che sia il migliore. Sto solo dando regole pratiche.
Di solito vado con PNG, in quanto sembra avere alcuni vantaggi rispetto al GIF. C'erano restrizioni sui brevetti per le GIF, ma quelle sono scadute.
Le GIF sono adatte per disegni a spigoli vivi (come i loghi) con un numero limitato di colori. Questo sfrutta la compressione senza perdita del formato, che favorisce aree piatte di colore uniforme con bordi ben definiti (in contrasto con JPEG, che favorisce sfumature uniformi e immagini più morbide).
Le GIF possono essere utilizzate per piccole animazioni e filmati a bassa risoluzione.
In considerazione della limitazione generale sulla tavolozza di immagini GIF a 256 colori, non viene solitamente utilizzata come formato per la fotografia digitale. I fotografi digitali utilizzano formati di file di immagini in grado di riprodurre una gamma più ampia di colori, come TIFF, RAW o JPEG con perdita di dati, che è più adatto per la compressione di fotografie.
Il formato PNG è una popolare alternativa alle immagini GIF poiché utilizza tecniche di compressione migliori e non ha un limite di 256 colori, ma i PNG non supportano le animazioni. I formati MNG e APNG, entrambi derivati da PNG, supportano le animazioni, ma non sono ampiamente utilizzati.
JPEG avrà una scarsa qualità attorno a bordi taglienti ecc. E per questo motivo non è adatto per la maggior parte della grafica web. Eccelle nelle fotografie.
Rispetto al GIF, PNG offre una migliore compressione, una pallette più grande e più funzioni, inclusa la trasparenza. Ed è senza perdita di dati.
GIF è limitata a 256 colori e non supporta la vera trasparenza. Dovresti usare PNG invece di GIF perché offre una migliore compressione e funzionalità. PNG è ottimo per immagini piccole e semplici come loghi, icone, ecc.
JPEG ha una compressione migliore con immagini complesse come le foto.
C'è un trucco che può essere fatto per usare immagini GIF per mostrare il vero colore. È possibile preparare un'animazione GIF con 256 fotogrammi con tavolozza di colori con ritardo di 0 fotogrammi e impostare l'animazione da visualizzare una sola volta. Quindi, tutti i frame potrebbero essere mostrati contemporaneamente. Alla fine, viene riprodotta un'immagine GIF a colori reali.
Molti software sono in grado di creare immagini GIF simili. Tuttavia, la dimensione del file di output è maggiore di un file PNG. Deve essere usato se è veramente necessario.
PNG ha un pallete di colore più ampio di GIF e GIF è proprio mentre PNG non lo è. GIF può fare animazioni, cosa normale-png non può. png-transparent è supportato solo dal browser circa più recente di IE6, ma esiste una correzione Javascript per questo problema. Entrambi supportano la trasparenza alfa. In generale, direi che dovresti usare png per la maggior parte dei grafici mentre usi jpeg per foto, schermate o simili perché la compressione png non funziona troppo bene su questi.
GIF basato su una tavolozza di 256 colori per immagine (almeno nella sua incarnazione di base). PNG può fare "TrueColour", ovvero 16,7 milioni di colori fuori dalla scatola. PNG senza perdita di dati si comprime meglio dei GIF senza perdita di dati. GIF può fare trasparenza "binaria" (0% di opacità o 100% di opacità). PNG può gestire trasparenze alfa.
Tutto sommato, se non hai bisogno di usare immagini Alpha-transparent e supportare IE6, PNG è probabilmente la scelta migliore quando hai bisogno di immagini pixel-perfette per illustrazioni vettoriali e simili. JPG è imbattibile per le fotografie.
A partire dal 2018, abbiamo diversi nuovi formati, un migliore supporto per i formati precedenti e alcuni hack intelligenti di utilizzare video anziché immagini.
Per fotografie
jpg - è ancora il formato di immagine più ampiamente supportato.
webp- Nuovo formato da Google. Buon potenziale, anche se il supporto del browser non è eccezionale.
Per icone e grafica
svg- quando possibile. Si adatta bene alle schermate della retina, modificabile negli editor di testo e personalizzabile tramite JS / CSS se caricato in DOM.
png- se si tratta di grafica raster (ovvero quando creata in Photoshop). Supporta la trasparenza che è molto essenziale in questo caso d'uso.
Per le animazioni
svg- più animazioni CSS per la grafica vettoriale. Tutti i vantaggi di svg + power delle animazioni css.
gif - è ancora il formato di immagine animata più ampiamente supportato.
mp4- se le immagini animate sono in realtà brevi video clip. Twitter / Whatsapp converte le gif in mp4.
apng- supporto decente del browser (cioè niente IE, Edge), ma crearlo non è così semplice come gif.
webp- vicino all'utilizzo di mp4. Scarso supporto
Questo è un bel confronto tra vari formati di immagini animate.
Infine, qualunque sia il formato, assicurati di ottimizzarlo: esistono strumenti per ogni formato (ad esempio SVGO, Guetzli, OptiPNG ecc.) E possono risparmiare una notevole larghezza di banda.
La differenza principale è che la GIF è brevettata e un po 'più ampiamente supportata. PNG è una specifica aperta e la trasparenza alfa non è supportata in IE6. Il supporto è stato migliorato in IE7, ma non completamente risolto.
Per quanto riguarda le dimensioni dei file, GIF ha una tavolozza colori predefinita più piccola, quindi a prima vista tendono ad avere dimensioni file più piccole. I file PNG hanno un pallet predefinito più grande, tuttavia è possibile ridurne il pallet colore in modo che, in tal caso, risultino in file di dimensioni inferiori rispetto a GIF. Il problema è di nuovo che questa funzionalità non è supportata in Internet Explorer.
Inoltre, poiché i PNG possono supportare la trasparenza alfa, sono l'unica opzione se si desidera una variazione di trasparenza diversa dalla trasparenza binaria.
Se opti per JPEG e hai a che fare con le immagini di un sito Web, potresti prendere in considerazione Google Guetzli encoder percettivo di , che è disponibile gratuitamente. Nella mia esperienza, per una qualità fissa Guetzli produce file più piccoli rispetto alle librerie di codifica JPEG standard, pur mantenendo la piena compatibilità con lo standard JPEG (quindi le tue immagini avranno la stessa compatibilità delle comuni immagini JPEG).
L'unico inconveniente è che Guetzli impiega molto tempo per codificare .. ma questo viene fatto solo una volta, quando si prepara l'immagine per il sito Web, mentre i vantaggi rimangono per sempre! Le immagini più piccole richiederanno meno tempo per il download, quindi la velocità del tuo sito Web aumenterà nell'uso quotidiano.
GIF ha una tavolozza a 8 bit (256 colori) dove PNG è una tavolozza di colori fino a 24 bit. Pertanto, PNG può supportare più colori e, naturalmente, l'algoritmo supporta la compressione
Come sottolineato da @aarjithn, WebP è un codec per la memorizzazione di fotografie.
Questo è anche un codec per memorizzare animazioni (sequenza di immagini animate). A partire dal 2020, la maggior parte dei browser convenzionali ha il supporto immediato ( tabella di compatibilità ). Nota per WIC è disponibile un plug -in.
Ha vantaggi rispetto al GIF perché si basa su un codec video VP8 e ha una gamma cromatica più ampia rispetto al GIF, dove il GIF limita a 256 colori lo espande a 2 24 = 16777216 colori, risparmiando comunque una notevole quantità di spazio.