Come impedire a WordPress di comprimere le immagini all'82%

WordPress ricodifica ogni JPEG che genera a qualità 82 su una scala 0–100. Questo valore predefinito vive in WP_Image_Editor::get_default_quality() e si applica a ogni derivato che WordPress ritaglia dal tuo caricamento — thumbnail, medium, medium_large, large e ogni dimensione extra che il tuo tema registra. Per le fotografie, 82 è un compromesso sensato tra peso del file e artefatti. Per screenshot, catture di interfacce, grafici, loghi e qualsiasi cosa con testo netto o colori piatti, 82 è visibilmente distruttivo: ottieni il classico “mosquito noise” che striscia attorno a ogni lettera e il banding sui gradienti uniformi.

Per cambiarlo, aggiungi un filtro e rigenera le miniature. Per risolvere in modo specifico il problema degli screenshot, la soluzione migliore di solito è non passare affatto un JPEG a WordPress.

Da dove arriva davvero il numero 82

WordPress ha abbassato il valore predefinito del JPEG da 90 a 82 con la versione 4.5 (2016) come ottimizzazione del peso delle pagine. Il valore viene restituito da get_default_quality() in wp-includes/class-wp-image-editor.php e viene letto ogni volta che l’editor attivo — WP_Image_Editor_Imagick se il tuo host ha Imagick, altrimenti WP_Image_Editor_GD — scrive un file ridimensionato.

Il dettaglio importante: 82 viene applicato per ogni dimensione derivata, non una volta sola. Carichi un’immagine e WordPress la fa passare più volte attraverso il codificatore, riquantizzando a qualità 82 a ogni passaggio. Il file caricato originariamente resta invece intatto se è sotto la soglia big-image (2560px sul lato lungo). Se supera quella soglia, WordPress produce un file -scaled.jpg ricodificato a qualità 82 e serve quello come dimensione “full”. Quindi “la mia immagine a piena risoluzione sembra a posto ma la versione sulla pagina è impastata” è quasi sempre un srcset che sceglie una sotto-dimensione a qualità 82 oppure il file -scaled.

Come cambiare la qualità

C’è un solo filtro da agganciare. wp_editor_set_quality è quello moderno e canonico — scatta per JPEG e WebP e riceve il tipo MIME, così puoi ramificare:

add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 92; // up from 82
    }
    return $quality;
}, 10, 2 );

Mettilo in un piccolo mu-plugin (wp-content/mu-plugins/) o in un plugin specifico per il sito. Anche functions.php funziona, ma perdi l’impostazione nel momento in cui cambi tema.

Vedrai consigliato anche il vecchio filtro jpeg_quality. Scatta ancora (WordPress lo applica subito dopo wp_editor_set_quality, solo per JPEG), ma non c’è motivo di agganciarli entrambi — wp_editor_set_quality copre tutto ciò che faceva il vecchio, e altro ancora.

Una cosa che tutti dimenticano: questo filtro incide solo sulle immagini codificate dopo che è attivo. Ogni thumbnail già presente in wp-content/uploads è stata scritta a 82 e resterà a 82. Rigenerale:

wp media regenerate --yes

Se non usi WP-CLI, il plugin Regenerate Thumbnails fa la stessa cosa dall’area di amministrazione.

Prima di decidere un numero, vale la pena vedere cosa una certa qualità fa davvero alla tua immagine invece di tirare a indovinare. Il nostro strumento per la qualità JPEG di WordPress ricodifica un campione nel browser a ogni livello di qualità così puoi vedere comparire gli artefatti — rende ovvia la differenza tra 82, 90 e 100 su uno screenshot in un modo che un numero in un file di configurazione non potrà mai fare.

La soluzione migliore per screenshot e grafica piatta

Alzare il numero del JPEG cura il sintomo. Il vero problema con gli screenshot è che il JPEG è il codec sbagliato per loro. La compressione DCT del JPEG è tarata sui gradienti fotografici; crolla sui bordi netti nero-su-bianco del testo e degli elementi dell’interfaccia, ed è esattamente per questo che la qualità 82 appare molto peggiore su uno screenshot che sulla foto di una spiaggia.

Carica invece un PNG. WordPress mantiene le sotto-dimensioni PNG come PNG, e il PNG è lossless — il filtro sulla qualità non lo tocca, quindi non ci sono artefatti a nessuna dimensione, solo un ricampionamento pulito. Per uno screenshot, un PNG ben ottimizzato è spesso più piccolo di un JPEG ad alta qualità della stessa immagine, perché il colore piatto si comprime bene in PNG e malissimo in JPEG.

Se vuoi i file più piccoli di un formato lossy senza il danneggiamento dei bordi del JPEG, WebP è la via di mezzo — ma ne controlli comunque la qualità attraverso lo stesso filtro wp_editor_set_quality mostrato sopra, ramificando su image/webp.

Cosa non fare

Non impostare la qualità a 100 in modo globale. È la risposta più votata in metà dei thread dei forum, ed è sbagliata. Il JPEG a qualità 100 non è lossless — quantizza comunque — ma gonfia di parecchio ogni fotografia del tuo sito senza alcun guadagno visibile, peggiorando LCP e Core Web Vitals. Alza il numero per il formato che ne ha bisogno, oppure cambia formato per la grafica; non azzerare la compressione su tutto il sito.

Non modificare class-wp-image-editor.php. Cambiare il valore di ritorno di get_default_quality() nel core funziona finché il successivo wp core update non lo sovrascrive silenziosamente. Usa il filtro.

Non disattivare le dimensioni delle immagini per “evitare la compressione”. Disattivare la generazione delle miniature non ferma la ricodifica — rompe lo srcset responsive, così i browser scaricano l’immagine a piena dimensione sugli smartphone. Problema diverso, risultato peggiore.

Non dare per scontato che ricaricare risolva le immagini esistenti. Se imposti il filtro ma salti il passaggio di rigenerazione, ogni vecchio derivato è ancora a qualità 82. Il filtro guarda solo in avanti.

Non incolpare il file -scaled se le tue immagini sono sotto i 2560px — quel percorso non viene mai eseguito per loro. Se invece lo stai attivando e vuoi che venga servito l’originale intatto, è un’impostazione a parte; vedi come disabilitare le immagini scaled.

Ancora bloccato?

Se una dimensione specifica sembra ancora sbagliata dopo la rigenerazione, verifica quale file la pagina sta effettivamente servendo — apri l’immagine in una nuova scheda e controlla se il nome del file termina con un suffisso di dimensione (-1024x768.jpg) oppure -scaled.jpg. L’ispettore delle dimensioni immagini mostra ogni derivato che WordPress genera da un singolo caricamento, così puoi vedere esattamente quale dimensione il tuo srcset sta passando al browser e smettere di fare debug sul file sbagliato.