Perché il PNG è enorme e come risolverlo
Il formato PNG è lossless (senza perdita), ed è esattamente per questo che i file sono enormi. Tre soluzioni e cosa ti costa ciascuna.
Il tuo PNG è di 8 MB perché il formato PNG memorizza esattamente ogni pixel, e uno screenshot a schermo intero a risoluzione retina contiene effettivamente così tante informazioni. Il formato non scarta nulla, il che è l'intero scopo del PNG e anche l'intero problema.
Ci sono 3 modi per risolverlo, e ognuno ti costa qualcosa di diverso. Ridurre le dimensioni costa una risoluzione che probabilmente non stavi utilizzando. Ridurre la profondità del colore costa la precisione del colore sulle fotografie. Cambiare formato costa la compatibilità al di fuori dei browser. Scegli in base all'uso a cui è destinata l'immagine.
Le tue 3 opzioni
- Riduci le dimensioni. Gratuito e di solito il vantaggio maggiore. Nessuno ha bisogno di uno screenshot da 5000 pixel.
- Riduci la profondità del colore. Funziona bene sulla grafica piatta, male sulle fotografie.
- Cambia formato. WebP mantiene la trasparenza e in genere risulta più piccolo dal 25 al 35 percento.
Perché i file PNG crescono così rapidamente
La dimensione del file PNG scala direttamente con il numero di pixel, perché ogni pixel deve essere descritto esattamente. Raddoppiare la larghezza e l'altezza quadruplica il numero di pixel e quadruplica all'incirca il file.
Uno screenshot da 5120 per 2880 da un monitor ad alta risoluzione contiene 14,7 milioni di pixel. A 3 byte per pixel prima della compressione si tratta di 44 MB di dati grezzi, e la compressione PNG in genere li riduce a un valore compreso tra 4 MB e 12 MB a seconda di quanto colore piatto contiene l'immagine. Un risultato di 8 MB è normale piuttosto che un errore.
Soluzione 1: riduci le dimensioni
Ridimensiona l'immagine alla dimensione massima con cui verrà visualizzata, il che rimuove la maggior parte del peso del file prima di provare qualsiasi altra cosa. Questa è la soluzione con l'effetto più alto e il costo più basso.
| Dimensione originale | Ridimensionato a | Pixel rimossi | File tipico |
|---|---|---|---|
| 5120 x 2880 | 2560 x 1440 | 75 percento | Da 8 MB a 2 MB |
| 3840 x 2160 | 1920 x 1080 | 75 percento | Da 5 MB a 1,3 MB |
| 2560 x 1440 | 1280 x 720 | 75 percento | Da 2 MB a 500 KB |
| Foto 4000 x 3000 | 1600 x 1200 | 84 percento | Da 18 MB a 2,9 MB |
Misura la larghezza massima con cui l'immagine verrà visualizzata sulla pagina, raddoppiala per gli schermi ad alta densità e ridimensiona in base al risultato. Uno screenshot visualizzato a 800 pixel di larghezza ha bisogno di 1600 pixel e niente di più.
Soluzione 2: riduci la profondità del colore
La conversione da un colore a 24 bit a una tavolozza a 8 bit riduce un PNG dal 50 al 70 percento e funziona solo su immagini con colori limitati. Gli screenshot di interfacce, diagrammi, loghi e grafici sono candidati ideali.
La tecnica memorizza una tavolozza fino a 256 colori e la fa fare riferimento per pixel, anziché memorizzare i valori di colore completi. Uno screenshot dell'interfaccia utente raramente contiene più di 256 colori distinti, quindi la riduzione è invisibile. Una fotografia ne contiene decine di migliaia, quindi la stessa riduzione produce un effetto banding visibile su cieli e pelle.
Soluzione 3: cambia il formato
Converti in WebP per l'uso sul web, che mantiene la trasparenza e in genere risulta dal 25 al 35 percento più piccolo di PNG. Converti in JPG solo quando l'immagine è fotografica e non necessita di trasparenza.
- WebP lossless per grafica e screenshot, che mantiene ogni pixel esatto e consente comunque di risparmiare dal 20 al 30 percento.
- WebP lossy per file PNG fotografici, dove il risparmio raggiunge il 70 percento o più.
- JPG per fotografie senza trasparenza, dove il PNG era la scelta sbagliata fin dall'inizio.
- AVIF per immagini fotografiche di grandi dimensioni, che comprime ancora di più sui file superiori a 100 KB.
- Grafica vettoriale per loghi e icone, dove un file SVG può pesare una frazione di qualsiasi formato raster.
La causa più comune: una foto salvata come PNG
Una fotografia salvata come PNG è da 3 a 5 volte più grande della stessa fotografia in formato JPEG, senza alcuna differenza visibile. Questo singolo errore spiega la maggior parte dei file PNG di dimensioni eccessive.
La compressione PNG cerca la ripetizione e le fotografie non ne contengono quasi nessuna a livello di pixel, poiché ogni pixel differisce leggermente dal suo vicino. Il formato finisce per memorizzare esattamente milioni di valori quasi unici. Salva le fotografie come JPEG o WebP e riserva il PNG per le immagini che hanno effettivamente colori piatti o trasparenza.
Come rimpicciolire un PNG senza perdere qualità
Per ridurre un PNG mantenendolo lossless, segui questi 5 passaggi in ordine.
- Ritaglia le aree inutilizzate, poiché i margini vuoti incidono comunque sulle dimensioni del file.
- Ridimensiona alla dimensione di visualizzazione massima di cui l'immagine avrà mai bisogno, raddoppiata per gli schermi ad alta densità.
- Verifica se l'immagine ha effettivamente bisogno della trasparenza, poiché un'immagine piatta si comprime meglio.
- Riduci la tavolozza dei colori se l'immagine è una grafica piuttosto che una fotografia.
- Converti in WebP lossless, che è ancora esatto e in genere più piccolo dal 20 al 30 percento.
I passaggi 1 e 2 di solito risolvono il problema da soli. I passaggi rimanenti sono importanti quando un'immagine deve rimanere molto grande, come uno screenshot a pagina intera nella documentazione.
Perché gli screenshot sono così grandi sui display moderni
I display ad alta densità acquisiscono a 2 o 3 volte la risoluzione logica, quindi uno screenshot di una finestra larga 1200 pixel viene salvato a 2400 o 3600 pixel. Il file è molto più grande di quanto sembrasse la finestra.
Quella risoluzione extra è utile quando lo screenshot verrà visualizzato su un altro schermo ad alta densità e sprecata altrimenti. For documentation and support articles, ridimensionare alla dimensione logica dimezza le dimensioni e riduce il file di circa il 75 percento, pur apparendo identico alla maggior parte dei lettori.
Quando mantenere grande il PNG
Conserva il PNG a dimensione intera quando l'immagine è un file master, una risorsa di stampa o una sorgente che verrà modificata in seguito. Le decisioni di compressione appartengono alle copie di distribuzione piuttosto che agli originali.
File di progettazione, loghi master, elementi grafici per la stampa e documenti scansionati giustificano tutti le loro dimensioni. Memorizza quelli a piena risoluzione e genera copie più piccole per ciascuna destinazione. L'errore è pubblicare il master anziché conservarlo, poiché un master costa spazio su disco una sola volta, mentre un master pubblicato costa larghezza di banda a ogni visita.
La trasparenza costa più di quanto si pensi
Un canale di trasparenza aggiunge un quarto valore a ogni pixel, aumentando i dati grezzi di circa il 33 percento prima della compressione. Molti file PNG trasportano quel canale senza utilizzarlo.
Screenshot, grafici esportati e immagini appiattite su uno sfondo bianco spesso mantengono un canale alfa completamente opaco ovunque. Rimuoverlo non costa nulla visivamente e riduce il file in modo misurabile. Verifica se l'immagine ha veramente bisogno di uno sfondo trasparente prima di presumere che il canale sia richiesto, poiché la maggior parte delle immagini posizionate su una pagina bianca non ne ha bisogno.
La compressione di un PNG fa perdere qualità
L'ottimizzazione PNG lossless non perde nulla, mentre la riduzione dei colori o delle dimensioni modifica l'immagine in modo permanente. Le 3 tecniche sono spesso descritte insieme e non sono equivalenti.
L'ottimizzazione lossless riorganizza il modo in cui il file memorizza i suoi dati e in genere consente di risparmiare dal 5 al 20 percento con un output identico a livello di pixel. La riduzione della tavolozza e il ridimensionamento alterano l'immagine stessa, il che è accettabile per le copie di distribuzione e inaccettabile per i master. Conserva l'originale ogni volta che la riduzione non è reversibile.
Risolvere un'intera cartella di file PNG di dimensioni eccessive
Elabora la cartella in un unico lotto, poiché i file PNG di dimensioni eccessive di solito arrivano in gruppi dalla stessa fonte. Un set di documentazione, una libreria di screenshot o un'esportazione da uno strumento di progettazione tendono a condividere lo stesso problema ovunque.
Rilascia fino a 500 file contemporaneamente, o trascina direttamente un archivio ZIP, e imposta le dimensioni e il formato una sola volta per l'intero set. Tutto viene eseguito all'interno del tuo browser sul tuo processore, quindi gli screenshot interni, i progetti dei prodotti e la documentazione dei clienti non raggiungono mai un server. Nulla viene caricato, quindi non c'è nessuna politica di conservazione da leggere e nulla viene lasciato indietro in seguito.
Risolvi la fonte del problema oltre ai file. Uno strumento di cattura dello schermo impostato per salvare PNG a piena risoluzione retina continuerà a produrre file da 8 MB all'infinito. La maggior parte degli strumenti di cattura consente un formato predefinito e un fattore di scala, e modificare entrambi una volta elimina la necessità di elaborare nuovamente gli screenshot dopo ogni articolo di supporto.