Una guida per principianti a JPEG vs PNG (e come usarli entrambi)

Cosa sarebbe il web con le immagini? Nel giro di pochi decenni, Internet è passata da una stampante digitale a matrice di punti a un server dinamico di contenuti multimediali, inclusi immagini, video, animazioni e altro ancora. Quando si tratta di foto digitali, tuttavia, può esserci confusione tra JPEG e PNG, in particolare quando usarle.

Se guardassi un'immagine JPEG insieme alla stessa ma come PNG, probabilmente non vedresti alcuna differenza. Questo è l'ideale, poiché entrambi i formati di immagine mirano a riprodurre la migliore immagine possibile per il web. Tuttavia, ci sono diversi casi d'uso e tecniche di ottimizzazione di cui devi essere consapevole.

In questo articolo, confronteremo JPEG e PNG e ti diremo quando dovresti usare ciascun formato di immagine. Per prima cosa, ti presentiamo ogni tipo di file.

La differenza tra JPEG e PNG

In superficie (in senso letterale), non c'è differenza tra JPEG e PNG. In altre parole, se inserissimo due immagini e ti chiedessimo di scegliere quale fosse JPEG e quale PNG, la maggior parte delle volte non saresti in grado di dirlo. Ad esempio, prendi la seguente immagine:

Sei in grado di decidere se questa farfalla mormone scarlatta è un'immagine JPEG o PNG? Ovviamente senza un quadro di riferimento non si può fare un paragone:

Ci sono differenze definite, anche se in questo caso non farà una grande differenza. Mentre stai cercando di decidere (senza dare un'occhiata agli strumenti di sviluppo del tuo browser), ci sono alcuni dettagli tecnici che possiamo condividere:

• Il formato di file del Joint Photographic Experts Group (JPEG) offre una compressione con perdita di dati delle immagini digitali. Ciò significa che la qualità dell'immagine è evidente se l'equilibrio tra questo e la dimensione del file oscilla troppo. I JPEG sono file "piatti". In altre parole, non possono visualizzare la trasparenza all'interno di un file. Sebbene tu possa regolare il livello di compressione, anche con le sue migliori impostazioni un JPEG sarà un file a 8 bit, che influisce sulla gamma dinamica. Inoltre, un JPEG include spesso un profilo colore, che indica ai monitor come visualizzare i colori all'interno.
• Al contrario, le immagini PNG (Portable Network Graphics) sono file pronti per il Web. È un formato più dinamico di JPEG, con la possibilità di produrre file a 24 bit. È anche un formato "lossless", il che significa che puoi duplicarlo senza degradare la qualità dell'immagine. Tuttavia, non sei in grado di regolare la compressione per i file PNG e non esiste un profilo colore. Nonostante questo, un PNG è perfetto per il web, in base alle sue specifiche tecniche.

Sembra chiaro: i PNG si adattano al Web e i JPEG no. Bene, questa non è la storia completa. Ogni tipo di file è ottimo per determinate applicazioni. Successivamente, ne discuteremo.

JPEG vs PNG: quando dovresti usarli ciascuno

Il Web ottiene il meglio da JPEG e PNG. In effetti, si incastrano in un modo carino senza molti incroci. Come pratico commento, ecco quando dovresti usare JPEG vs PNG:

Se vuoi visualizzare una fotografia, usa JPEG. Per qualsiasi altro file, in particolare la grafica digitale, usa PNG.

Tuttavia, questo consiglio non è vero per tutte le situazioni (sebbene sia rilevante per quasi tutti i casi). Ad esempio, se combini disegni digitali con immagini stock, sia JPEG che PNG non saranno tecnicamente corretti da usare. In seguito, avrai più conoscenze per prendere la decisione giusta, anche se ci sono altri suggerimenti da darti.

Ad esempio, se si prevede di copiare le immagini, utilizzare un formato file diverso da JPEG. Questo perché i formati di compressione con perdita di dati ricostruiscono solo una versione approssimativa del file. Al contrario, PNG è una riproduzione 1:1 perché offre una compressione senza perdita di dati.

Inoltre, se vuoi ridimensionare l'immagine una volta salvata, usa JPEG poiché gestisce bene il ridimensionamento. I PNG utilizzano una struttura di codifica diversa, che si deteriora una volta modificate le dimensioni (o altri attributi tecnici).

Altri formati di immagine che dovresti conoscere

Naturalmente, JPEG e PNG non è l'unico confronto tra i formati di file immagine da considerare. Esistono molti altri tipi di file che competono per l'attenzione e hanno altri casi d'uso:

• Formato interfaccia grafica (GIF). Se pubblichi un meme o un video di reazione su Twitter che si anima, è una GIF. In effetti, PNG ha cercato di sostituire i file GIF nelle sue specifiche originali ed entrambi offrono livelli di trasparenza.
• Formato file immagine con tag (TIFF). Questo formato di file basato su raster è ottimo per la stampa grazie al supporto per gli spazi colore CMYK.
• Formato immagine grezza (RAW). Lo userai solo se sei un fotografo ed è esclusivo della fotocamera che usi. Sebbene sia possibile visualizzare i file RAW sul computer, è necessario un software dedicato per visualizzarli. Le dimensioni dei file sono astronomiche, perché i dati sono completi. Infatti, i formati RAW non sono immagini, ma dati che una volta codificati rappresentano l'immagine.
• File immagine ad alta efficienza (HEIF). Questo è il formato di file principale dei dispositivi iOS. Offre una compressione e dimensioni dei file migliori rispetto a JPEG e può gestire molti formati multimediali diversi.

Mentre ciascuno di questi file di immagine verrà utilizzato sul Web (ad eccezione dei file RAW per quanto riguarda la visualizzazione), JPEG vs PNG domina ancora. Entrambi hanno casi d'uso specifici per i quali i pro ei contro si bilanciano bene.

Come preparare le immagini per il caricamento (in 3 modi)

Nonostante JPEG e PNG siano un pareggio per quanto riguarda la qualità di visualizzazione finale, devi gestire ogni formato in un modo diverso per trarne il meglio. Ci sono tre aree in cui puoi influenzare la dimensione del file, la qualità e la preparazione generale delle tue immagini:

• Assicurati che le dimensioni tengano conto dei casi d'uso pertinenti che incontrerai.
• Scegli una risoluzione per la tua immagine adatta al web.
• Usa la compressione "di buon gusto" per ridurre ulteriormente la dimensione del file delle tue immagini senza influire troppo sulla qualità.

Come ti aspetteresti, qui c'è un buon equilibrio. Iniziamo con le dimensioni della tua immagine.

1. Imposta le tue dimensioni

Le dimensioni di un'immagine sono più importanti per l'utente finale di qualsiasi altro punto della catena. Questo perché il browser deve caricare l'immagine e un file di grandi dimensioni eroderà l'esperienza utente (UX). Tuttavia, questa non è l'unica considerazione. Naturalmente, anche la qualità è fondamentale. Se decidi di ridurre le dimensioni di un'immagine, ciò influirà sulla qualità dell'immagine finale (più per i JPEG che per i PNG).

La risposta è colpire il punto debole in alcune aree, a partire dalle dimensioni dell'immagine. Come regola generale, vuoi rendere le tue immagini sufficientemente grandi in modo che possano trasmettere i dettagli di cui hai bisogno. C'è un punto di overkill da qualche parte che è diverso a seconda della piattaforma di destinazione e dell'immagine stessa.

I moderni sensori di ritaglio e le fotocamere digitali full-frame possono produrre immagini con dimensioni predefinite di circa 6.000 px x 3.000 px (sebbene ci siano enormi differenze tra le fotocamere). Al contrario, le immagini con il "lato lungo" di circa 2.000 pixel sono comuni sui social media. Tieni presente che questo è per la visualizzazione nella visualizzazione completa di un dispositivo.

Per le immagini del blog, questa regola pratica di 2.000 pixel potrebbe arrivare anche a 1.000 pixel. Ciò tiene conto anche delle immagini ad alta definizione o "Retina". Spesso hanno bisogno del doppio delle dimensioni per essere visualizzati in modo nitido su schermi ad alta definizione. In effetti, la risoluzione è un buon punto di partenza.

2. Impostare la risoluzione corretta

Uno degli elementi di base degli schermi digitali sono i pixel. Questi minuscoli punti costituiscono l'intero display, sebbene i pixel non abbiano una dimensione uniforme. Per questo motivo, dobbiamo anche considerare la risoluzione quando prepariamo le nostre immagini JPEG e PNG.

Usiamo i pixel per pollice (PPI) per discutere di quanti pixel possono stare su uno schermo. Puoi anche esprimerlo in centimetri o come "punti". Quest'ultimo è per i formati di stampa fisici e i circoli di progettazione grafica utilizzano spesso DPI. In quanto tale, lo sentirai usato in modo intercambiabile, sebbene PPI sia il termine corretto.

Sebbene la specifica dell'immagine PNG utilizzi 72 PPI come risoluzione di progettazione ottimale, ciò non prenderebbe in considerazione i moderni schermi ad alta definizione. Mentre puoi raddoppiare le dimensioni di un'immagine per renderla nitida su tutti gli schermi, puoi anche fare lo stesso con la risoluzione. Ad esempio, prendi questo screenshot del desktop macOS Big Sur:

È un PNG, con 1.000 pixel sul lato lungo (in alto e in basso in questo caso). Tuttavia, utilizza 144 PPI, anche se c'è un po 'di "magia" di caricamento che converte la risoluzione in 72 PPI durante il caricamento su WordPress.

Sia le immagini PNG che JPEG possono utilizzare anche PPI molto più elevati: le risoluzioni pronte per la stampa sono di circa 300 DPI/PPI. Inoltre, molte immagini da siti di foto d'archivio come Pixabay verranno scaricate utilizzando 300 PPI:

Pertanto, riducendolo preparerai meglio le tue immagini per il Web e i suoi vari display.

3. Ottimizza le tue immagini usando la compressione

Non dobbiamo dirti molto sull'ottimizzazione delle immagini. È un argomento che puoi trovare altrove sul blog e quasi tutti gli utenti di WordPress sapranno ottimizzare le immagini prima o durante il processo di caricamento.

Il concetto generale è che si applica una compressione extra alle immagini, spesso in modo con perdita. Ciò influisce sulla qualità dell'immagine ed è evidente se si apportano modifiche sostanziali alle dimensioni e alla risoluzione prima di applicare una forte compressione con perdita.

Questi artefatti devono essere minimi per presentare bene le immagini. Per questo motivo, ci sono molti strumenti disponibili per svolgere il lavoro. Il più accessibile è TinyPNG, anche se comprime anche i JPEG:

Tuttavia, la compressione che applica è delicata su alcune immagini, il che potrebbe non ridurre sufficientemente le dimensioni del file. Un servizio come ShortPixel ha un formato di compressione con perdita di dati aggressivo disponibile, mentre la sua compressione Glossy fa un lavoro ammirevole rispetto a TinyPNG.

Il punto è che devi bilanciare il livello di compressione sia con la dimensione del file che con tutti gli altri elementi dell'immagine. Nella prossima sezione, discuteremo l'approccio migliore da adottare.

JPEG vs PNG: come ottenere il massimo da ogni formato

Nonostante le differenze nei formati dei file, la natura della navigazione sul Web significa che puoi ridurre la preparazione delle tue immagini a quanto segue:

• Usa dimensioni comprese tra 1.000 e 2.048 pixel sul lato lungo.
• Imposta una risoluzione di 144 PPI per tutte le tue immagini, per assicurarti che vengano visualizzate nitide e chiare su tutti gli schermi.
• Applica una leggera compressione attraverso l'ottimizzazione dell'immagine per ridurre le dimensioni del file. Tenendo conto di tutto, la maggior parte delle immagini avrà una dimensione di circa 100–200 kb.

C'è un po' di più qui in base a formati di file specifici:

• Per i file PNG, la riduzione delle dimensioni potrebbe degradare troppo la qualità dell'immagine. L'idea qui è di mantenere la risoluzione il più alta possibile per mitigare questi fattori.
• I file JPEG non resistono alla copia, poiché ogni duplicazione è più degradata dell'ultima. Se puoi controllare da dove proviene il JPEG (ad esempio, se hai scattato la fotografia), crea un JPEG da un file TIFF o RAW per mantenere la qualità all'interno dell'immagine.
• Nella nostra esperienza, i JPEG non accettano la compressione così come altri formati di file. Ciò significa che è importante preparare e ottimizzare quelle immagini prima di ottenere la fase di compressione.

A questo punto, dovresti avere una solida conoscenza di JPEG e PNG, quando usarli e come preparare i tuoi file; e se vuoi ancora sapere quale immagine era JPEG dall'inizio dell'articolo, è la prima!

Avvolgendo

Sembra che le immagini girino il web. Per questo motivo, abbiamo una serie di formati di file che ci aiutano a fornire la giusta qualità con una dimensione di file rispettabile per l'applicazione. JPEG vs PNG è un confronto comune perché non è chiaro in cosa siano bravi entrambi e sono due formati di immagine popolari.

In breve, i JPEG sono per le foto e i PNG per la grafica. Per preparare i tuoi file, la preoccupazione principale dovrebbe essere mantenere alta la qualità dell'immagine piuttosto che la dimensione del file. Tuttavia, mentre le regolazioni della risoluzione ti danno i cambiamenti più grandi, questo ha un impatto maggiore sulla qualità dell'immagine. Il trucco è bilanciare dimensioni, risoluzione e compressione per ottenere l'immagine definitiva per il Web.

Prepari le tue immagini per il web come abbiamo descritto qui o fai qualcosa di diverso? Fatecelo sapere nella sezione commenti qui sotto!

Credito immagine: minka2507, Christels .