Note del team su artigianato, formati e le piccole decisioni dietro un buon risultato.
Come WebP ottiene dimensioni inferiori a PNG
WebP usa due modalità di compressione distinte. La modalità senza perdite combina la predizione spaziale e di colore con uno stadio di codifica entropica più sofisticato del DEFLATE di PNG. Raggiunge rapporti di compressione circa il 26 percento migliori sulle immagini tipiche, secondo il benchmark pubblicato da Google. La modalità lossy applica una trasformata a blocchi simile alla compressione video, pensata per scartare informazioni percettivamente irrilevanti pur preservando ciò che l'occhio vede davvero. Per le immagini con livello di trasparenza, WebP usa una sotto-compressione senza perdite separata per i dati di trasparenza. Applica la compressione lossy ai dati RGB, ed è per questo che il WebP lossy con trasparenza può essere all'incirca tre volte più piccolo di un PNG a parità di qualità visiva. Il DEFLATE di PNG è solo senza perdite e non può sfruttare il compromesso percettivo della modalità lossy. È la differenza di formato a spiegare il divario.
Il livello di trasparenza nel dettaglio
Sia PNG sia WebP supportano la trasparenza a 8 bit, ovvero ogni punto può contenere un valore di opacità da 0 (del tutto trasparente) a 255 (del tutto opaco). Quando il motore immagini della piattaforma riscrive un PNG in WebP, legge i valori RGBA di ogni punto. I valori di trasparenza vengono passati direttamente alla fase di compressione di WebP, dove vengono mantenuti con compressione senza perdite. Questo avviene indipendentemente da come vengono codificati i dati RGB. Il risultato è che ogni zona trasparente del PNG a opacità zero, ogni punto semi-trasparente tra 1 e 254 e ogni punto opaco a 255 corrisponde allo stesso identico stato nel WebP. Per un logo con ombre morbide o testo con anti-aliasing su sfondo trasparente, la morbidezza dei bordi sopravvive intatta. Questo è in contrasto con JPG, che non ha supporto di trasparenza nella sua specifica e deve comporre l'immagine su un colore di sfondo prima di codificare.
Core Web Vitals e scelta del formato immagine
Il Largest Contentful Paint misura quanto tempo impiega l'elemento visibile più grande della pagina ad apparire nel viewport. Per la maggior parte delle pagine di contenuto, quell'elemento è l'immagine principale. Google usa l'LCP come fattore di posizionamento nella sua valutazione dei Core Web Vitals. Le immagini PNG sono una causa ricorrente di fallimenti dell'LCP per via del loro peso. Un PNG fotografico a risoluzione 4K può pesare diversi megabyte, mentre il WebP equivalente ne è solo una frazione. PageSpeed Insights lo segnala nella voce di audit sui formati di nuova generazione, indicando il PNG come formato da sostituire. Convertire in WebP i PNG nei percorsi di rendering critici è uno dei singoli cambiamenti con maggiore leva sulle prestazioni misurate. Il supporto nei browser lo rende sicuro: Chrome nel 2011, Firefox nel 2019, Safari nel 2020 ed Edge dalla sua ricostruzione su Chromium.
Output lossy e l'impostazione quasi senza perdite
La scrittura di WebP offre un parametro di qualità da 0 a 100, dove i valori più alti preservano più dettaglio al costo di file più grandi. Questo strumento scrive a un'impostazione fissa quasi senza perdite, regolata per bilanciare fedeltà visiva e peso del file. Quell'impostazione è calibrata per le tipiche categorie di asset web: fotografie, grafica di interfaccia e icone. A questa impostazione, l'output è percettivamente indistinguibile dal PNG di partenza alle normali distanze di visione. Tecnicamente, una parte della precisione a livello di bit va persa rispetto a una scrittura realmente senza perdite. Un confronto punto per punto tra il WebP decodificato e il PNG originale mostrerà piccole differenze numeriche. Queste differenze sono sotto la soglia della percezione umana per il contenuto fotografico. Per l'imaging medicale o la conservazione d'archivio, tieni il PNG e usa il WebP solo come esportazione di consegna.
Comportamento dei metadati
La pipeline usata per la conversione da PNG a WebP elimina i metadati EXIF, IPTC e XMP dall'output. Questo corrisponde al comportamento osservato in tutti e tre i principali motori dei browser. I profili colore ICC sono gestiti in modo incoerente. Chrome e Safari preservano il tag del profilo ICC sRGB nell'output WebP. Firefox elimina tutti i metadati, profilo ICC compreso. Il risultato netto è che il WebP convertito è sicuro in sRGB su tutti i browser. Qualsiasi tagging a gamut ampio presente nel PNG sorgente non sopravvivrà in Firefox. Per i flussi di lavoro professionali sensibili al colore, questa incoerenza conta. Se la fedeltà del profilo colore è necessaria, converti con uno strumento che scrive esplicitamente i dati ICC, oppure riapplica il tag come passaggio successivo.
Quando tenere PNG e quando WebP è sufficiente
L'albero decisionale pratico è breve. Se la destinazione finale dell'immagine è una pagina o un'applicazione web, e l'ambiente di rendering è un qualsiasi browser dal 2020 in poi, WebP è il formato di esportazione giusto. Se l'immagine deve aprirsi in un'applicazione di design come Figma, Sketch o Affinity Designer, verifica il supporto a WebP nella versione specifica che usi, dato che varia. Se l'immagine verrà usata in un flusso di stampa, sono preferibili PNG o TIFF, dato che la maggior parte dei RIP di stampa non gestisce WebP. Se l'immagine verrà inviata via email, il PNG è più sicuro perché i client di posta sono notoriamente incoerenti con i formati moderni. Se l'immagine verrà usata come file di lavoro modificato e risalvato più volte, tieni il PNG come master. WebP a qualità quasi senza perdite è un eccellente formato di consegna, e PNG è il formato migliore per archivio e modifica. Il flusso ideale tiene il PNG come originale ed esporta in WebP per la distribuzione web.