PNG o JPG o GIF: scegliere il tipo di file immagine giusto per il tuo sito

Oggi i due formati di file immagine più comuni sono JPG e PNG. A prima vista, un JPG potrebbe apparire esattamente come la stessa immagine salvata come file PNG. Essere in grado di scegliere JPG per PNG quando si salva un file fa sembrare che i due siano intercambiabili, lo stesso a parte le lettere usate nell'estensione.

Secondo W3Techs, JPG e PNG sono entrambi utilizzati più di altri formati di file, con PNG utilizzato solo leggermente più spesso.

Tuttavia, ci sono differenze distinte tra i file JPG e PNG e dovrai sapere quale scegliere quando usi le immagini online. Il tipo di file può influenzare la posizione in cui è posizionato sulla tua pagina web, la qualità con cui viene visualizzato e se rallenta o meno i tempi di caricamento. Se desideri includere animazioni sul tuo sito Web o sui feed dei social media, ti consigliamo anche di conoscere un po' i file GIF e in che modo differiscono da JPG e PNG.

Iscriviti al nostro canale Youtube

Compressione lossless e lossy

Lo scopo della compressione di un'immagine è risparmiare spazio: le immagini più piccole sono più facili da trasferire e archiviare. Le immagini di grandi dimensioni occupano molto spazio digitale e possono rallentare il caricamento delle pagine web. In generale, alcuni dati vengono rimossi da un'immagine quando viene compressa.

Esistono due tipi di compressione: lossless e lossy. Per comprendere una delle distinte differenze tra JPG e PNG, avrai bisogno di un'introduzione a questi due tipi di compressione.

Compressione senza perdite

Le immagini contengono informazioni ridondanti. La compressione senza perdita di dati rimuove i dati ridondanti, ma indica anche al computer quanti dati erano ridondanti e come ricostruire l'immagine. La dimensione del file viene ridotta per risparmiare spazio, ma è anche possibile ricostruire l'intero file da quello compresso. Adoro questo esempio di Make Use Of. È una rappresentazione volutamente semplicistica di come la compressione senza perdita di dati rimuova le informazioni senza effettivamente modificare la struttura:

Compressione con perdita

I file MP3 sono ottimi esempi di compressione con perdita. Non contengono tutto l'audio presente nella registrazione originale; i suoni che gli umani non possono o quasi non possono sentire vengono rimossi. Questo è simile a come funziona la compressione con perdita di immagini. Quando un'immagine viene compressa, le informazioni vengono rimosse per sempre, non solo temporaneamente; non è possibile ripristinare i dati rimossi. Ogni volta che un'immagine viene modificata e/o salvata nuovamente, perde un po' più di dati, il che riduce la qualità.

JPG

JPG (o JPEG) sta per Joint Photographic Experts Group. L'estensione del file può essere .jpg o .jpeg. Queste estensioni sono la stessa cosa e i file funzioneranno allo stesso modo. Le prime versioni di Windows potevano elaborare solo file con tre lettere, quindi JPEG è stato abbreviato in JPG. Quando visualizzi una foto su un sito Web o su una piattaforma di social media, molto probabilmente stai visualizzando un JPG.

Ecco le caratteristiche e i vantaggi dei JPG:

• Tipicamente utilizzato per le foto al posto della grafica.
• La scelta migliore per screenshot di giochi, film e contenuti simili.
• Immagine salvata su uno sfondo bianco o vuoto (non trasparente).
• File di dimensioni inferiori rispetto ai PNG.
• Tempi di caricamento della pagina più rapidi e migliore esperienza utente.
• Compressione con perdita, ma il rapporto di compressione può essere regolato: puoi scegliere quanto verrà compressa l'immagine.
• La modifica e il nuovo salvataggio ridurranno la qualità, anche se potresti non accorgertene a seconda del numero di salvataggi e della posizione in cui viene visualizzata l'immagine.

L'algoritmo JPG trova i pixel dello stesso colore o valore e li blocca in riquadri. Sebbene JPG supporti milioni di colori, l'immagine finale avrà meno colori dell'originale (un po' come quelle tracce audio). Questo è il modo in cui viene creata l'immagine più piccola, ma comporta anche la perdita di dati che non potrai mai recuperare. Tuttavia, JPG tiene conto del modo in cui le persone visualizzano la luminosità, quindi può mantenere la luminosità anche quando si eliminano le informazioni sul colore, il che produce un'immagine di alta qualità.

PNG

PNG sta per Portable Network Graphic. L'estensione del file è .png. Quando visualizzi il logo di un marchio su un sito web, molto probabilmente stai visualizzando un PNG.

Ecco le caratteristiche e i vantaggi dei PNG:

• Tipicamente utilizzato per illustrazioni e altri tipi di grafica.
• La scelta migliore per illustrazioni, diagrammi dettagliati e screenshot delle app.
• Immagine salvata su uno sfondo trasparente: posizionala sul tuo sito web senza disturbare nulla intorno ad essa.
• Supporto per una gamma di colori e scala di grigi.
• Puoi cambiare i colori dei file PNG, come se volessi aggiornare il tuo logo.
• Meno colori vengono utilizzati, più piccolo può ridursi il file.
• Compressione senza perdite.

Salvare una foto come PNG

Anche se la maggior parte delle volte salverai le foto come file JPG, ci sono casi in cui vorrai salvarle come PNG:

• È necessario che l'immagine sia la più alta qualità possibile: PNG vende più dettagli rispetto a JPG.
• Stai per modificare e salvare la foto più volte. Una volta terminata la modifica, puoi salvare la foto come JPG per limitare le dimensioni.
• La foto contiene anche del testo: JPG ridurrà notevolmente la qualità del testo.
• È necessario che la foto abbia uno sfondo trasparente, ad esempio, forse stai utilizzando una delle tue foto come logo.

GIF

GIF sta per Graphics Interchange Format. L'estensione del file è .gif. Quando visualizzi un breve video animato in loop, molto probabilmente stai visualizzando una GIF.

Ecco le caratteristiche e i vantaggi delle GIF:

• È l'unico tipo di file dei tre che supporta l'animazione.
• La scelta migliore per una grafica semplice.
• Gamma di colori limitata.
• Più piccoli dei JPG a causa delle limitate sistemazioni cromatiche.
• Compressione senza perdite.

Plugin WordPress per la compressione

Per comprimere un'immagine per un sito Web WordPress, puoi utilizzare un software, uno strumento basato su browser o un plug-in. Alcune persone non usano un plug-in perché non vogliono lo sforzo extra sul loro server o per preoccuparsi di problemi di compatibilità, o non vogliono passare attraverso il passaggio aggiuntivo della creazione di backup. Se stai cercando di semplificare il tuo processo, però, i plugin possono essere piuttosto efficienti.

Ecco alcune cose da tenere a mente sull'utilizzo di un plug-in WordPress per la compressione:

• Non dovrai caricare l'immagine dopo averla ridimensionata: sarà già nella libreria multimediale di WordPress.
• Molti plugin hanno un'impostazione che ti consente di ottimizzare durante il caricamento, rimuovendo un altro passaggio dal processo.
• Anche se due plugin di compressione dicono di fare la stessa cosa, avranno le proprie impostazioni, pro e contro. Potrebbe essere necessario giocare con alcuni per trovare il giusto equilibrio tra rapporto di compressione e qualità.
• Le versioni gratuite dei plug-in di compressione sembrano inizialmente attraenti, ma i risultati della compressione potrebbero sembrare scadenti, quindi dovrai eseguire l'aggiornamento se desideri immagini di qualità superiore.
• Alcuni plugin sono difficili da installare e configurare, mentre altri funzioneranno perfettamente fin da subito.
• Le funzionalità extra rendono alcuni plugin più attraenti di altri. Ad esempio, ShortPixel ha un'opzione lucida, un'attrazione definitiva per i fotografi professionisti. Imagify manterrà la tua immagine originale in una cartella separata, il che significa che puoi ripristinarla in qualsiasi momento.

Pensieri finali

Sapere come utilizzerai le tue immagini è il primo passo per determinare quale tipo di file scegliere. In definitiva, l'obiettivo è utilizzare il file più piccolo possibile mantenendo la qualità necessaria per la destinazione: un'immagine visualizzata su un sito Web verrà visualizzata su una pagina più grande di un'immagine visualizzata su Instagram, quindi avrai bisogno della qualità essere più alto per rendere meno evidenti le imperfezioni. Per le foto che perderesti con il cuore spezzato, usa un sistema di backup per archiviare gli originali: se comprimi troppo accidentalmente, avrai modo di ricominciare da capo.

Hai bisogno di trovare più immagini per il tuo sito web? Unsplash è uno dei miei posti preferiti per la fotografia stock gratuita. Dai un'occhiata al nostro articolo utilizzando le immagini di Unsplash su WordPress con un clic.