Placeholder SVG e LQIP

Placeholder SVG o placeholder in un URL

Il generatore di ximg.es serve i placeholder come file: https://ximg.es/600x400. È la soluzione più comoda mentre impagini, ma ogni immagine è una richiesta. Un SVG inline sta dentro l’HTML o il CSS: non fa nessuna richiesta, pesa circa 300 byte, si ridimensiona senza perdere nitidezza e funziona offline. È ideale per prototipi inviati via email, componenti di un design system o test automatici.

Il data URI è URL-encoded, non in Base64: con gli SVG pesa meno e resta leggibile.

Che cos’è un LQIP

Low Quality Image Placeholder: una versione minuscola dell’immagine mostrata mentre si carica quella vera. Lo spazio non sembra più bianco, l’utente intuisce il contenuto e la pagina sembra più veloce. Le tre varianti:

• Miniatura + CSS blur: un’immagine da 20 px in WebP, di poche centinaia di byte, ingrandita e sfocata con il CSS. La più simile all’originale.
• SVG sfocato: la stessa miniatura dentro un SVG con feGaussianBlur. Si può usare come sfondo della stessa <img> e il bordo resta pulito, senza l’alone che lascia filter: blur().
• Colore medio: un solo colore, la media dell’intera immagine. Zero byte in più; è quello che usano Google Immagini e Pinterest. ximg.es calcola proprio questo colore per ogni foto del suo archivio.

Come usarlo

Metti il LQIP come sfondo dell’<img> (o del suo contenitore) e lascia width e height, così lo spazio ha già la sua dimensione. Quando arriva l’immagine, copre lo sfondo. Non serve JavaScript.