Photoshop: come ridurre le dimensioni di un file PNG per uso Web

Ho un file PNG che è 2042 x 1250 ed è 6,1 MB. Quando apro con Photoshop e faccio "Salva con nome> PNG 24" e scelgo la dimensione del file compresso delle due opzioni (l'altra non è compressione) ottengo comunque un'immagine che è dell'ordine di pochi MB, che, dal momento che sarà una risorsa web, vorrei essere nel KB e non nel MB. Come posso comprimere in modo intelligente questa immagine su un campo da baseball di poche migliaia di KB?

I dettagli geek (non hai chiesto)

Alcuni formati di immagine, come JPG, supportano la perdita di compressione . Quando un'immagine compressa con perdita di dati viene salvata e quindi restituita, l'immagine non è esattamente al 100% come la si è progettata, ma semplicemente "vicina" ad essa, una sorta di schizzo. Alcuni dettagli originali sono andati persi . Poiché non vi è alcuna aspettativa di accuratezza, le immagini Lossy Compressed hanno il lusso di archiviare poche informazioni sul design originale, risultando in piccoli file. Consentono persino di specificare la precisione del risultato: meno preciso deve essere il risultato, più piccolo è il file.

D'altra parte, il formato PNG, in base alla progettazione, supporta la compressione senza perdita . Ciò significa che dopo che l'immagine è stata salvata in un file, quando viene ripristinata, tutti i pixel vengono visualizzati esattamente come li hai progettati senza perdere alcun dettaglio. Questo è fantastico, ma sfortunatamente significa che deve archiviare molte informazioni per rendere l'immagine perfettamente, risultando in file di grandi dimensioni.

Il PNG fa la sua cosa intelligente per ottimizzare le informazioni di cui ha bisogno prima di salvarle in un file ma non è possibile specificare, come si fa con i file JPG, quanto deve essere compresso o preciso il file. Il risultato è così com'è e non hai alcun controllo su quanto sarà grande il file.

Alcuni suggerimenti

Detto questo, ci sono alcune cose che potresti fare per cercare di ottenere un file più piccolo.

• Grandi aree di colori piatti si comprimono meglio di aree con motivi complessi. Vedi se riesci a semplificare la tua immagine.
• Hai molto spazio negativo attorno all'immagine? Prova a ridurlo al minimo.
• Stai usando la trasparenza? Altrimenti, considera invece di salvare l'immagine come JPG.
• Se non riesci a salvarlo come JPG per nessun motivo, ma non stai utilizzando la trasparenza, deseleziona "trasparenza" dalle opzioni di salvataggio. Questo farà radere un po 'di morsi dal tuo risultato finale.
• Prendi in considerazione di tagliare l'immagine in parti e di comporla nell'HTML finale, come una sorta di puzzle. È possibile salvare le parti che richiedono trasparenza come PNG e le altre parti come JPG altamente compressi. Il risultato totale dovrebbe essere meno pesante.
• Utilizzare uno strumento di compressione PNG (ad esempio https://tinypng.com/ ). Intendiamoci, questi strumenti usano un algoritmo con perdita. Tentano di semplificare la tua immagine per poterla salvare come file più piccolo. Riducono drasticamente le dimensioni del file ma il risultato finale potrebbe perdere troppi dettagli. Puoi sempre provarli e giudicare il risultato a seconda dell'applicazione.

Se condividi la tua immagine, posso darti alcuni suggerimenti.

Prova ad aggiungere un livello di regolazione Posterizza all'immagine e riduci il numero di colori. Trovo che sia ancora possibile mantenere l'alta qualità e ridurre le dimensioni del file con questo metodo.

Un PNG da 6,1 MB è lontano dalla gamma dei KB, quindi i suggerimenti di Cokypup sarebbero i migliori.

Per gli altri PNG che puoi creare, il modo migliore per salvarli per uso Web è salvare in Photoshop con "Salva per Web" anziché "Salva con nome". "Save for Web" di Photoshop offre alcune ottimizzazioni che ridurranno drasticamente le dimensioni del file.

Poi lo seguirei usando uno strumento di compressione per PNG come Tiny PNG
Tiny PNG usa una compressione con perdita come faresti quando salvi un JPG. Riduce drasticamente le dimensioni del file e, come puoi vedere nell'esempio sul sito, la compressione con perdita che esegue è appena percettibile.

probabilmente va da sé, ma molte persone dimenticano di impostare la risoluzione su 72 pixel / pollice per le risorse web.

Immagine> Dimensione immagine> imposta la risoluzione su 72 ppi.