• Impara i formati immagine JPG, PNG, GIF e SVG
• Appartenente al progetto: WordPress User Guide (per neofiti)

Mentre SVG ha aggiunto una dimensione completamente nuova al web design, domande come "Qual è la differenza tra JPEG e PNG?" è ancora importante.

Pensiamo che questo sia il momento giusto per dare uno sguardo nuovo all'evoluzione dei formati di immagine web.

Nella breve guida di oggi, ti forniremo una rapida carrellata dei diversi formati di immagine e quando dovresti usarli. Inizio.

JPG e PNG e GIF e SVG: qual è la differenza?

1. GIF

GIF sta per Graphic Interchange Format.

Se hai familiarità con Internet fin dall'inizio, conosci sicuramente il formato immagine preferito sul web: il formato immagine GIF.

Il formato GIF è una bitmap, a differenza di JPEG o PNG, i file GIF hanno una tavolozza massima di 256 colori. Essenzialmente ogni GIF è una "scatola di pastelli" preesistente e non esiste un vero modo di fondersi per creare un nuovo colore.

Mentre 256 colori possono sembrare tanti pastelli con cui lavorare, le foto complesse spesso richiedono migliaia di toni. Questo è lo spazio colore perso durante la conversione in GIF, e questo è il motivo principale per cui non dovremmo usare GIF per immagini colorate (ad esempio foto scattate nella vita di tutti i giorni).

Mentre GIF è solitamente una cattiva scelta per le immagini con un'ampia gamma di colori, con il suo limite di 256 colori ha un enorme vantaggio nell'aiutare a mantenere piccole le dimensioni dei file, ideali anche con una connessione Internet più lenta. . Per anni, solo le GIF avevano l'attributo di trasparenza opzionale: ora anche PNG e SVG offrono questo attributo.

Classificazione: Nessuna perdita di dati

Scegli le immagini GIF per:

• Animazioni semplici;
• Piccole icone;
• Grafica con pixel-to-pixel bassi (ad esempio, colori a tinta unita come loghi e bandiere);

2. Immagini JPEG

A seconda delle tue preferenze, puoi chiamare questo formato "JPEG" o "JPG" – entrambi sono accettati come variazioni dello stesso acronimo – Joint Photographic Experts Group .

A differenza di GIF, un'immagine JPEG è un formato a 16 bit, il che significa che può combinare luce rossa, blu e verde per visualizzare milioni di colori. Questo rende JPG un formato "photo friendly" / "photo friendly". Questo è parte del motivo per cui è il formato standard per la maggior parte delle fotocamere digitali sul mercato.

Il formato JPEG ti dà anche 'flessibilità' nella possibilità di 'scegliere il livello di compressione' dell'immagine – da 0% (compressione molto alta/compressione pesante) al 100% (non compresso/non compresso). Di solito, l'impostazione della compressione su 60%-75% ridurrà notevolmente le dimensioni del file pur mantenendo un bell'aspetto sulla maggior parte dei tipi di schermo.

Sebbene JPEG sia adatto per la compressione e l'esportazione di immagini (fotografiche), è un tipo di compressione con perdita, il che significa che è meno utile per la modifica continua delle immagini. L'esportazione di un file JPEG peggiorerà la qualità e la perdita peggiorerà con ogni esportazione successiva, come una copia di un'altra fotocopiatrice. Ecco perché i fotografi professionisti spesso scattano in formato RAW lossless.

È anche importante notare che, a differenza di GIF e PNG, le immagini JPEG non hanno proprietà di trasparenza.

Categoria: Perdita di dati

Usa JPEG per:

• Immagini fisse;
• Fotografia;
• Foto con colori complessi e dinamici;

3. Immagine PNG

Un formato più recente per GIF e JPEG, le immagini PNG (Portable Network Graphics) sono come un connubio tra i formati GIF e JPEG grazie alle sue due varianti.

PNG-8

PNG-8 è simile a GIF in molti modi e utilizza la stessa combinazione di 256 (massimo) colori. È la scelta migliore quando si tratta di opzioni che richiedono l'attributo di trasparenza e di solito generano un file di dimensioni leggermente inferiori. Tuttavia, PNG-8 non ha la funzione di animazione (immagine animata) come quella di GIF.

PNG-24

PNG-24 consente di esportare immagini con "milioni di colori" – proprio come le immagini JPEG – ma offre anche la possibilità di creare proprietà di trasparenza. Poiché PNG-24 è un formato di file senza perdita di dati, potrebbe essere necessario spendere molti dati per salvarli, ma nei casi in cui la qualità dell'immagine è più importante della dimensione dell'immagine, PNG-24 è la scelta migliore. .

Rispetto al loro principale formato immagine JPEG, il formato immagine PNG-24 non è universalmente compatibile con tutte le applicazioni e piattaforme, il che lo rende più ideale per la condivisione sul web. Tuttavia, può essere modificato senza perdita di qualità.

Classificazione: Nessuna perdita di dati

Usa i PNG per:

• La grafica Web richiede l'attributo di trasparenza;
• Fotografie, immagini grafiche che richiedono colori complessi;
• Immagini che richiedono molte modifiche e riesportazioni ( riedizione e riesportazione );

4. Immagini SVG

A differenza dei tre formati sopra menzionati, SVG (Scalable Vector Graphic) non è un formato bitmap puro. Il formato vettoriale invece, un cugino molto stretto dei formati AI ed EPS di Adobe Illustrator, è spesso una scelta interessante per i progettisti di interfacce utente e web (UI).

A volte è utile fare riferimento a SVG come "HTML per le illustrazioni" e devi pensarlo in modo relativamente diverso dai formati di immagine che abbiamo appena elencato sopra.

SVG è più adatto per visualizzare loghi, icone, mappe, bandiere, tabelle e altri elementi grafici creati con applicazioni di grafica vettoriale come Illustrator, Sketch e Inkscape.

Scritto su markup basato su XML, il formato immagine SVG può essere modificato in qualsiasi editor di testo e modificato con JavaScript o CSS.

Poiché i vettori possono essere ridimensionati a qualsiasi dimensione preservando la nitidezza per la qualità dell'immagine, sono ideali per progetti reattivi. modulo dispositivo).

Sebbene SVG sia essenzialmente un formato vettoriale, può (anche spesso) essere utilizzato per incorporare grafica bitmap all'interno del tuo file SVG, proprio come puoi incorporare JPEG all'interno del codice HTML.

Puoi farlo in entrambi i modi, collegandoti a un'immagine di origine tramite il suo URL (poiché puoi collegarti a un JPG su una pagina Web) o incapsulando i pixel dell'immagine come URI di dati. Ciò consente a SVG di essere illimitato in termini di flessibilità e potenza.

Sebbene SVG possa aiutarti a mantenere le tue immagini in un aspetto migliore sul Web, non è necessariamente il formato che le persone usano ogni giorno per archiviare e caricare immagini attraverso siti Web o la piattaforma di social media in background. .

Servizi online come WordPress, Flickr, Medium, Tumblr e Facebook forzeranno la conversione del tuo SVG in un formato che preferiscono o – questo è più spesso – lo bloccheranno del tutto. non lasciare che SVG carichi. Sono disponibili diverse opzioni di hosting per l'hosting SVG, inclusi svgur.com, imgh.us e persino Github, come dimostra qui Alex.

Sono felice di vedere che i servizi di hosting più piccoli accettano SVG, Github è attualmente l'unico servizio compatibile con SVG che sono sicuro al 99% sarà disponibile tra 5 anni.

Se usi SVG per il web design, vedrai quasi sempre una diminuzione delle dimensioni del file rispetto ad altri formati come JPEG o PNG. Ma nota che con immagini più complesse, il file SVG sarà più grande.

Classificazione: immagine vettoriale/senza perdita di dati

Usa SVG per:

• Loghi e icone con design potenti, geometrici e a misura di vettore;
• Potrebbe essere necessario visualizzare la grafica in una varietà di dimensioni e schermi;
• Grafica reattiva ai loro dispositivi;
• La grafica necessita di editing, aggiornamento e ridistribuzione;

Confrontare e contrapporre

Ora che conosciamo le differenze tra i formati di immagine più diffusi, è tempo di esaminarli fianco a fianco.

Di seguito, vedrai come i formati GIF, JPEG, PNG e SVG gestiscono immagini con colori sia semplici che complessi, insieme alla fotografia.

Grafica con colori solidi

Il primo formato di immagine che vogliamo esaminare è la grafica a colori piatti. Questi includono la maggior parte dei loghi e marchi, icone, mappe, tabelle e semplici diagrammi. L'immagine originale è un PNG da 23,4 KB con una risoluzione di 1280 x 1280.

Di seguito vedrai la differenza nella dimensione della compressione e nella qualità dell'immagine. Tieni presente che l'immagine viene salvata utilizzando la funzione "Salva per Web e dispositivi" di Photoshop, con l'opzione di qualità più elevata.

GIF: 17,6 KB

—

JPEG 100% (non compresso): 53,3 KB

—

JPEG 75%: 33 KB

—

PNG-8: 11,8 KB

—

PNG-24:19.6 KB

—

SVG: 6 KB (formato grafico vettoriale puro)

Nel caso di questa particolare immagine, non c'è una notevole perdita di qualità quando si confrontano i sei formati, anche se si noterà un leggero rumore vicino ai bordi all'interno di un'immagine JPEG compressa. Questo non è sempre il caso con la grafica in tinta unita, ma nella maggior parte dei casi starai bene con le immagini più chiare.

Per questa immagine, supponendo di avere l'immagine vettoriale originale, SVG sarebbe la scelta migliore con solo 6 KB di spazio. Se non abbiamo un formato vettoriale, il formato PNG-8 è una buona scelta con la dimensione dell'immagine originale ridotta da 23,4 KB a 11,8 KB.

Immagini con colori complessi

L'immagine originale è un'immagine JPEG da 328 KB con una risoluzione di 1280 x 960. Di seguito puoi vedere la differenza nella capacità di compressione e nella qualità dell'immagine. Tieni presente che queste immagini vengono salvate utilizzando l'opzione "Salva per Web e dispositivi" con l'opzione di qualità più alta.

Non possiamo avere una versione vettoriale in questo caso, qualsiasi versione SVG di questa immagine sarà solo un JPEG incorporato all'interno dell'SVG. È ingombrante, quindi non sto fornendo un esempio SVG qui.

GIF: 426KB

—

JPEG 100% (non compresso): 776 KB

—

JPEG 75%: 215 KB

—

PNG-8: 327 KB

Le immagini PNG-24 hanno una dimensione massima di 1,7 MB.

Le immagini con colori complessi tendono ad avere un aspetto migliore quando si utilizza il formato JPEG, PNG-24 o SVG. I colori sono per lo più preservati e non ci sono brutte bande e rumori, quindi adorerai i formati GIF e PNG-8.

Foto a colori

L'immagine originale è un'immagine JPEG da 215 KB con una risoluzione di 1280 x 701. Di seguito vedrai la differenza nella dimensione della compressione e nella qualità dell'immagine. Tieni presente che l'immagine viene salvata utilizzando la funzione "Salva per Web e dispositivi" di Photoshop, con l'opzione impostata sulla qualità massima.

Ancora una volta, non c'è alcun vantaggio nel provare a generare SVG qui.

GIF: 453 KB

—

JPEG 100% (non compresso): 410 KB

—

JPEG 75%: 410 KB

—

PNG-8: 395 KB

—

PNG-24: 1,03 MB

Per le immagini complesse, è meglio salvare le foto come JPEG, PNG-24 o SVG. Nella foto sopra, il colore viene mantenuto in tutti i formati fuori banda e il rumore viene esposto nelle ombre dei capelli, della pelle e dello sfondo, nonché nella parte superiore dell'immagine vista come output. ) GIF e PNG-8 .

P/S: questa parte non è in traduzione. Un altro formato di immagine a cui dovresti fare riferimento è WebP: un prodotto di Google, è un'ottima alternativa alle immagini PNG e JPG, con la stessa qualità dell'immagine ma dimensioni notevolmente ridotte.

Se sei un utente di WordPress come me, ti potrebbe piacere il nostro articolo che confronta 5 plugin di compressione delle immagini. Divertiti.