In breve: un placeholder sfocato non è decorazione — è una correzione del Cumulative Layout Shift travestita da effetto di caricamento, dato che un placeholder correttamente dimensionato riserva lo spazio esatto dell'immagine prima che arrivi il file reale. Abbina questa guida a Character Counter, Encoding Converter, Text Difference e AI Hidden Characters.

LQIP (Low Quality Image Placeholder) è una versione minuscola e pesantemente compressa dell'immagine reale — spesso 20×20 pixel o meno, poche centinaia di byte — mostrata sfocata e ingrandita mentre il file a piena risoluzione si carica.

Il problema reale che LQIP risolve: layout shift, non estetica

Senza un placeholder che riservi le dimensioni finali dell'immagine, la pagina si renderizza senza spazio per l'immagine, poi spinge tutto ciò che sta sotto verso il basso nel momento in cui il file arriva — Cumulative Layout Shift (CLS), una delle Core Web Vitals di Google, penalizza esattamente questo. Un placeholder con lo stesso aspect ratio (sfocato o no) occupa lo spazio corretto fin dal primo rendering, così nulla si muove quando l'immagine reale si carica — la sfocatura è un bel di più sopra la vera correzione, che è riservare lo spazio.

Come un'immagine minuscola viene incorporata all'istante

I placeholder LQIP vengono tipicamente incorporati come data URI codificati in base64 direttamente nell'HTML — <img src="data:image/jpeg;base64,..."> — così il placeholder si renderizza con zero richieste di rete aggiuntive, il che conta perché il punto è mostrare qualcosa prima che la richiesta dell'immagine reale si risolva. Poiché l'immagine sorgente è minuscola (spesso sotto 1KB prima della codifica), l'overhead del base64 — circa il 33% più grande dei byte grezzi — è trascurabile per un placeholder nonostante sia dispendioso per un'immagine a piena dimensione.

LQIP vs un placeholder a colore dominante

Una micro-anteprima sfocata porta più informazione visiva (forme approssimative, distribuzione dei colori) di un singolo rettangolo a colore dominante, ma significa anche più lavoro di configurazione — generare e memorizzare una piccola immagine per foto, contro calcolare un singolo colore medio. Per una galleria fotografica intensa dove l'immagine stessa è il punto, la fedeltà extra di LQIP di solito vale la pena; per immagini UI più piccole o icone, un placeholder a colore piatto fa il lavoro di prevenzione del CLS con meno overhead.

Un flusso di lavoro per aggiungere placeholder correttamente

  1. Imposta un width e height espliciti (o un aspect-ratio CSS) su ogni tag immagine — questo è ciò che riserva davvero lo spazio; l'immagine placeholder stessa non lo fa da sola.
  2. Genera il placeholder minuscolo al vero aspect ratio dell'immagine, non a una dimensione fissa che non corrisponde — un ratio disallineato produce uno shift quando l'immagine reale la sostituisce.
  3. Incorpora il placeholder come data URI base64 per un caricamento a zero richieste, riservato solo a immagini placeholder genuinamente piccole.
  4. Testa con il throttling di rete del browser — il valore di un placeholder emerge solo quando l'immagine reale è lenta ad arrivare.

Errori comuni da evitare

  • Aggiungere un effetto sfocatura senza anche impostare dimensioni esplicite — la sola sfocatura non fa nulla per il layout shift.
  • Usare un placeholder con un aspect ratio diverso dall'immagine reale, che causa comunque uno shift quando viene sostituito.
  • Incorporare in base64 un'immagine a piena dimensione "per coerenza", gonfiando il peso della pagina senza alcun beneficio da placeholder.
  • Trattare LQIP puramente come un effetto visivo e perdere che il suo vero lavoro è riservare spazio di layout.

La sfocatura è ciò che gli utenti notano; la riserva di dimensioni sottostante è ciò che protegge davvero il tuo punteggio Core Web Vitals.