Le immagini sono quasi sempre la cosa più pesante di una pagina, e gran parte di quel peso è evitabile. Questo strumento decodifica la tua immagine, se vuoi la ridimensiona, e la ricodifica alla qualità che scegli — tutto dentro il browser. Capire cosa implichi "ricodifica" è la differenza tra usarlo bene e rovinarsi le fotografie in silenzio.
Ridimensionare batte la qualità, e di parecchio
Il guadagno più grosso non è quasi mai lo slider della qualità. È la larghezza massima. Una foto larga 4000 pixel mostrata in una colonna larga 800 porta sedici volte più pixel di quanti lo schermo possa usarne: il browser la riduce a ogni caricamento e l'utente li paga tutti.
Dimezzare le dimensioni riduce a un quarto il numero di pixel, ed è una riduzione netta e all'apparenza senza perdita: l'immagine sembra ancora perfetta perché non c'era comunque modo di vedere il dettaglio che hai tolto. Abbassare la qualità da 90 a 60 fa risparmiare molto meno e si vede. Ridimensiona prima, e solo dopo tocca la qualità.
Lo slider della qualità non fa niente su PNG
La cosa sorprende, e vale la pena dirla senza giri: PNG è un formato senza perdita. Non c'è nessuna manopola di qualità da girare. Chiedi a un canvas un PNG al 10% e al 100% e ottieni un output identico byte per byte — l'abbiamo misurato: 63.960 byte a ogni impostazione.
È per questo che questo strumento disabilita lo slider quando selezioni PNG, invece di lasciarti trascinare una cosa che non può funzionare. Se il tuo PNG è troppo grande, le leve che esistono sono le dimensioni e la riduzione del numero di colori distinti — la tecnica che usano strumenti come pngquant. Nessuna delle due è lo slider della qualità, perché non esiste.
Il corollario è la scelta del formato in sé. PNG è la risposta giusta per screenshot, loghi, disegni al tratto e qualsiasi cosa con bordi netti o trasparenza. È la risposta sbagliata per le fotografie, dove produrrà un file diverse volte più grande di un JPEG che nessuno saprebbe distinguere. Se stai comprimendo una fotografia e l'output è enorme, controlla il formato prima di toccare qualsiasi altra cosa.
Ricodificare non è comprimere
Un browser non può comprimere un JPEG sul posto. Quello che succede davvero è che decodifica il file in pixel grezzi e ne codifica un JPEG completamente nuovo. La distinzione conta perché JPEG perde informazione in entrambe le direzioni: la decodifica recupera un'approssimazione dell'originale, e la codifica ne butta via ancora.
Quindi comprimere un JPEG già compresso è una seconda generazione, non un affinamento. Fallo ripetutamente e gli artefatti si accumulano: è per questo che un'immagine inoltrata attraverso cinque app di chat finisce per sembrare fritta. Ricodifica sempre dall'originale di qualità più alta che hai, non da qualcosa che è già passato per il tritacarne. E non si torna indietro: alzare la qualità su un file salvato a 40 non recupera il dettaglio, avvolge solo gli artefatti in più byte.
I tuoi metadati non sopravvivono, e in gran parte è un bene
Un canvas contiene pixel, nient'altro. Tutto ciò che nel file originale stava attorno a loro — EXIF, il modello della fotocamera, la data, il campo copyright, il profilo colore, e le coordinate GPS di dove è stata scattata la foto — sparisce dall'output.
Per pubblicare sul web questa è una funzionalità e un guadagno di privacy vero. Le foto scattate col telefono portano abitualmente il punto esatto in cui sono state fatte, e un numero allarmante di immagini su internet sta trasmettendo l'indirizzo di casa di qualcuno. Rimuoverlo è il default giusto.
È una perdita in due casi. Se ti serve conservare i campi copyright o autore, questo è lo strumento sbagliato. E se l'originale contava su un profilo colore incorporato — una foto in Adobe RGB o Display P3 — eliminarlo significa che il browser interpreterà i pixel come sRGB, e i colori si sposteranno. I rossi e i verdi saturi si appiattiscono. Se il tuo output sembra slavato rispetto all'ingresso, è successo questo.
Dove stanno davvero i numeri della qualità
La qualità JPEG non è una percentuale di niente e la scala non è lineare. In pratica: sopra il 90 circa stai spendendo moltissimi byte per differenze che nessuno può vedere. Tra 75 e 85 circa è la fascia in cui le fotografie sembrano intatte a un osservatore normale. Sotto il 60 circa cominciano a comparire artefatti a blocchi nei gradienti morbidi: cieli e pelle sono dove te ne accorgerai per primo.
Il default di 80 qui è voluto. Vale la pena sapere che questi numeri non sono confrontabili tra encoder diversi: qualità 80 in questo browser e qualità 80 in Photoshop sono impostazioni diverse che per caso condividono un numero.
Domande frequenti
La mia immagine viene caricata da qualche parte?
No. Questo strumento è marcato "client": il file viene letto nel tuo browser, decodificato e ricodificato dalla tua macchina, e non viene mai inviato. Vale la pena saperlo, visto quanti siti di compressione invece caricano davvero: stai consegnando a uno sconosciuto una foto che, finché non la ripuliscono, contiene ancora dove e quando è stata scattata.
Perché il file compresso è più grande dell'originale?
Di solito è un errore di formato: hai dato in pasto una fotografia JPEG e hai chiesto PNG in uscita. PNG non può comprimere il rumore fotografico, quindi il risultato si gonfia. Può anche succedere quando l'originale era già salvato a una qualità più bassa di quella che hai selezionato: ricodificare a 90 qualcosa arrivato a 60 aggiunge byte e non recupera niente.
Devo usare WebP?
Per il web sì: ogni browser in uso lo supporta, ed è tipicamente il 25-35% più piccolo di un JPEG a pari qualità visiva. L'avvertenza è tutto ciò che non è un browser: alcuni software desktop, i client di posta più vecchi e vari form di caricamento lo rifiutano ancora. Se l'immagine va su una pagina web, WebP. Se qualcuno potrebbe scaricarla e aprirla con quello che ha, JPEG resta la scelta sicura.
Perché la mia immagine sembra slavata dopo la compressione?
Il profilo colore è stato eliminato. Se l'originale era marcato Adobe RGB o Display P3, i suoi valori di pixel significano i colori giusti solo se letti insieme a quel profilo. Una volta rimosso, il browser li legge come sRGB e tutto ciò che è saturo si sposta verso il piatto. Convertire l'immagine in sRGB prima di comprimere evita il problema, perché a quel punto i numeri e l'ipotesi coincidono.
C'è un limite di dimensione?
Nessuno imposto qui, ma il tuo dispositivo ne impone uno. L'immagine viene decodificata in pixel grezzi in memoria, e i pixel grezzi sono quattro byte ciascuno: una foto da 50 megapixel sono 200 MB di memoria prima che accada qualsiasi altra cosa. Immagini molto grandi metteranno in difficoltà la scheda, e su un telefono potrebbero semplicemente fallire. È un limite hardware, non una regola dello strumento.