Tutorialdock | Free Web Resources

JPEG o PNG? Questo è il problema

Prima o poi tutti ci poniamo questo amletico quesito .La risposta è molto complessa e relativa dal momento che le variabili in gioco sono numerose.

JPEG

Il formato di compressione JPEG è il più famoso ed utilizzato nel web grazie alle sue note capacità di compressione. Il formato JPEG offre due tipi di compressione: la compressione di tipo lossy cioè con perdita di informazioni, e quella di tipo lossless ovvero senza perdita di informazioni.  Quello utilizzato nelle immagini che troviamo online è di tipo lossless in quanto più conveniente nel rapporto qualità/spazio occupato.

PNG

IL fomrato PNG non è un formato di compressione delle immagini ma ha molte altre peculiarità:

• l’immagine può essere serializzata


• l’immagine è visualizzata progressivamente


• l’immagine può essere trasparente grazie ad un canale alfa

Il confronto

Dopo questa lezione in stile wikipedia passiamo alle cose pratiche con alcuni esempi.

Un’immagine in JPEG di 100px per 100px può pesare da 24 a 33kB, mentre un’immagine in PNG delle stesse dimensioni pesa 24 kB

Immagine in PNG da 58KB

Immagine in JPG da 51KB

Questo ci potrebbe far pensare che è più conveniente utilizzare il formato JPEG a scapito di quello PNG.

Se però creiamo delle immagini come queste:

Immagine in PNG da 4KB

Immagine in JPG da 14KB

Possiamo notare che l’immagine in PNG pesa molto meno. Perchè?

Perchè il formato PNG è ottimo per immagini come rappresentazioni geometriche e che quindi hanno poche variazioni di colori.
Il modo migliore per risparmiare spazio è quindi quello di variare il formato a seconda del tipo di immagine che creiamo: se è una fotografia, JPG, se è un’illustrazione, PNG.

L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Leggi anche:

• JQuery: calcolare la velocità del mouse

  

  In questo tutorial vi spiegherò come calcolare la velocità del mouse, ad ogni spostamento così da utilizzare il valore ottenuto …

• Windows 8: record nella velocità di boot

  

  Per Windows 8 il momento della verità si avvicina e lungo la strada continua a lasciare indizzi sulle sue potenzialità …

• Javascript o CSS3?

  

  I CSS3 hanno portato grandi novità, tra cui anche la possibilità di creare animazioni e di gestire singoli div del …