Blog · Prestazioni

Pubblicare immagini più leggere senza perdere qualità

Un flusso di lavoro ripetibile per i team web: scegli il formato giusto, ridimensiona prima di comprimere, imposta un obiettivo di qualità percettiva e automatizza le parti noiose.

fewer KB · same pixels

Le immagini sono di solito la cosa più pesante di una pagina, quindi sono anche il guadagno più grande e facile per le prestazioni. L'obiettivo non è "più piccolo a qualunque costo" — è il file più piccolo che continua a sembrare corretto sullo schermo su cui finisce. Ecco un flusso di lavoro che ci arriva senza controllare a occhio ogni esportazione.

Ridimensiona prima di comprimere

Il risparmio più grande sta di solito nelle <b>dimensioni</b>, non nel codec. Un hero da 4000px servito in uno spazio da 800px spreca circa il 96% dei suoi pixel ancor prima che la compressione inizi. Decidi la dimensione reale di visualizzazione, tieni conto degli schermi ad alto DPR (2× basta per la maggior parte delle foto) e riduci prima a quella. Comprimi un'immagine della dimensione giusta e ogni passo successivo avrà meno da fare.

Scegli il formato giusto per ogni caso

Foto: AVIF o WebP, con fallback JPEG se ne hai ancora bisogno. UI piatta, loghi e screenshot: PNG lossless o WebP. Non pubblicare un PNG di una fotografia né un JPEG di uno screenshot — entrambi sono lo strumento sbagliato e ti costano byte <i>e</i> qualità. Nel dubbio, codifica in entrambi i modi e conserva il vincitore.

Imposta un obiettivo di qualità percettiva

"Qualità 80" significa cose diverse a seconda del codificatore, quindi punta a un risultato <b>percettivo</b> invece che a un numero magico. Un punteggio SSIMULACRA2 intorno a 80–90 è visivamente lossless per la maggior parte delle foto; sotto ~70 comincerai a notarlo su gradienti e pelle. Scegli un limite minimo, lascia che il codificatore lo raggiunga, e otterrai una qualità coerente su un'intera libreria invece di indovinare file per file.

# Ridimensiona alla dimensione di visualizzazione, poi converti con un limite minimo di qualità
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

Automatizzalo

Un flusso di lavoro regge solo se è noioso da eseguire. Elabora in batch un'intera cartella, lascia intatti gli originali e lascia che lo strumento riporti cosa ha risparmiato, così puoi fidarti del risultato. Il punto è rendere "più leggero" il percorso predefinito, non un lavoro manuale che qualcuno dimentica prima del lancio.

Pubblica il file più piccolo che continua a sembrare corretto — non il file più piccolo in assoluto. La differenza è tutto il lavoro.

Misura, non indovinare

Chiudi il cerchio verificando il risparmio reale e la qualità reale, non solo la dimensione del file. Un file il 90% più piccolo che sembra degradato non è una vittoria; uno il 60% più piccolo visivamente identico lo è. Tieni traccia di entrambi e potrai spingere le impostazioni con sicurezza invece di giocare sul sicuro.

Rendi "più leggero" la tua esportazione predefinita.

Ridimensiona, converti e confronta la qualità in un solo passaggio — interamente sul tuo Mac.

Continua a leggere