Perché le immagini di WordPress sembrano sfocate dopo il caricamento (e come risolvere)

Nove volte su dieci le tue immagini non sono davvero sfocate — WordPress le ha rimpicciolite durante il caricamento e ora serve la copia ridotta. Da WordPress 5.3, qualsiasi immagine più larga o più alta di 2560px viene sostituita silenziosamente da una versione -scaled limitata a 2560px sul lato più lungo, e quel file più piccolo è ciò che il tuo tema allarga per riempire un hero, un blocco a tutta larghezza o uno schermo retina. La soluzione è dimostrare che è successo proprio questo, e poi alzare la soglia oppure smettere di caricare immagini che devono essere più grandi del riquadro in cui vengono inserite.

Perché succede

Quando carichi una foto, WordPress esegue wp_create_image_subsizes() (in wp-admin/includes/image.php). Se il lato più lungo supera il big_image_size_threshold — 2560px per impostazione predefinita — richiama _wp_image_meta_replace_original(), genera your-photo-scaled.jpg e riscrive i metadati dell’allegato in modo che la dimensione full punti ora alla copia ridotta. L’originale vero e proprio resta sul disco come your-photo.jpg ed è referenziato da wp_get_original_image_path(), ma nel front end non lo serve nessuno. Ogni dimensione intermedia e ogni candidato srcset viene generato dal file scaled da 2560px, non da ciò che hai caricato.

Ed ecco la sfocatura. Carichi un’immagine nitida da 4000px per un’intestazione a tutta pagina. WordPress la limita a 2560px. Su uno schermo standard, in un contenitore largo 1600px, va bene. Su uno schermo retina 2x il browser ha bisogno di circa 3200 pixel reali per riempire quel contenitore in modo nitido, ne ha solo 2560 e ingrandisce la differenza. Bordi morbidi, testo dentro l’immagine impastato: esattamente il sintomo delle “immagini sfocate dopo il caricamento”. Immagini sgranate, insomma.

L’altra metà dello stesso problema è srcset che sceglie una dimensione troppo piccola. Se il tuo tema dichiara una larghezza del contenuto che non corrisponde al riquadro effettivamente renderizzato, WordPress passa al browser un’intermedia -1024x683 o -1536x1024 che viene poi allargata. Stessa causa — riquadro di visualizzazione più grande dei pixel disponibili — trigger diverso.

Controlla cosa ha effettivamente servito WordPress

Non tirare a indovinare. Fai clic destro sull’immagine sfocata, aprila in una nuova scheda e guarda il nome del file nell’URL. Se termina con -scaled.jpg o con un suffisso dimensionale come -1024x683.jpg, hai la conferma: il browser sta mostrando una derivata rimpicciolita, non il tuo caricamento. Puoi anche ispezionare l’elemento e leggere currentSrc per vedere esattamente quale candidato ha scelto il browser.

Per avere il quadro completo prima di ricaricare qualsiasi cosa, trascina l’immagine nel tool per le dimensioni delle immagini di WordPress — mostra ogni derivata che WordPress genererà da quel file preciso, compreso se viene creata una copia -scaled e con quali misure, così sai in anticipo se la tua sorgente è abbastanza grande per il punto in cui la stai inserendo.

Sul server puoi elencare tutti i file limitati:

find wp-content/uploads -name '*-scaled.*'

Come risolvere, in ordine

1. Se le tue immagini hanno davvero bisogno di essere più grandi di 2560px (hero di grandi dimensioni, retina, gallerie di qualità stampa), alza la soglia:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

Oppure disattiva del tutto il limite:

add_filter( 'big_image_size_threshold', '__return_false' );

2. Ricarica le immagini interessate. Questo è il passaggio che tutti saltano. Modificare la soglia influisce solo sui caricamenti nuovi. Le immagini già presenti nella tua libreria mantengono i vecchi metadati, e rigenerare le miniature ricostruisce le dimensioni intermedie a partire dal file -scaled già ridotto — non recupera la risoluzione che è stata buttata via. Il percorso affidabile è: modifica il filtro, elimina l’allegato, caricalo di nuovo.

3. Se la tua sorgente è già ≤2560px ed è comunque sfocata, il problema non è la soglia: il riquadro di visualizzazione è più grande dell’immagine. Carica una sorgente più grande, oppure riduci il contenitore. Per la nitidezza su retina, la tua sorgente deve essere circa il doppio della larghezza in pixel CSS del riquadro che riempie.

4. Solo dopo aver fatto quanto sopra, rigenera le miniature in modo che le dimensioni intermedie siano coerenti — ma tieni presente che è pulizia, non una cura.

Cosa non fare

Non portare la qualità JPEG a 100. WordPress comprime con una qualità predefinita di 82 tramite wp_editor_set_quality, e metà dei consigli online ti dice di sovrascriverla:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

Va bene per ridurre gli artefatti di compressione, ma un’immagine allargata e ingrandita è un problema di risoluzione, non di compressione. Passare da 82 a 100 gonfia i file e non fa quasi nulla per la morbidezza che stai vedendo.

Non disattivare -scaled per riflesso. Disattivare il limite (c’è un tool apposta) è la scelta giusta se servi immagini sopra i 2560px — ma se il tuo vero problema è un’intermedia troppo piccola che viene allargata, disattivarlo non cambia nulla e perdi il risparmio di banda senza motivo. Prima diagnostica.

Non incolpare la cache né rigenerare subito le miniature. La rigenerazione legge dalla stessa sorgente ridotta, quindi non può ripristinare il dettaglio. Svuotare una CDN o la cache delle pagine non tocca un file che era piccolo sul disco fin dall’inizio.

Non ricorrere al CSS del tema o a object-fit. Nessuna quantità di stile aggiunge pixel. Se il file servito termina con -scaled o con un suffisso dimensionale, il problema è il file, non il layout.

Ancora bloccato?

Se hai confermato che il file servito è il tuo caricamento a piena risoluzione — nessun -scaled, nessun suffisso dimensionale — ed è comunque morbido, verifica se un plugin (un ottimizzatore, un ridimensionatore di immagini della CDN o una libreria di lazy-load) sta riscrivendo il tuo src verso un proxy compresso. Passa l’immagine nel tool per le dimensioni delle immagini per confermare cosa WordPress dovrebbe generare, poi confrontalo con ciò che il browser carica davvero. Quando i due non coincidono, il colpevole è qualcosa tra WordPress e il browser.