Trascina un'immagine o fai clic per selezionare
PNG, JPEG, WebP, GIF, BMP, AVIF
Come funziona
Un segnaposto è ciò che occupa il posto di un'immagine mentre viene scaricata. Serve a due cose distinte: riservare lo spazio esatto che occuperà, in modo che il testo attorno non salti quando l'immagine compare, e mostrare qualcosa di simile al contenuto finale perché l'attesa sembri più breve che davanti a un rettangolo grigio.
Esistono tre famiglie di soluzioni. Gli hash compatti (BlurHash e ThumbHash) riassumono l'immagine in una stringa di testo così breve che puoi salvarla in una colonna del database insieme al resto del record; il browser la decodifica e disegna la sfocatura. I data URI (la miniatura LQIP e l'SVG) portano l'immagine già codificata dentro l'HTML o il CSS, quindi non richiedono alcun JavaScript. E il colore pieno è il segnaposto più economico di tutti: sette caratteri.
Quale convenga dipende da dove nasce l'HTML. Se le immagini provengono da un database e le elenchi a centinaia, l'hash è il più leggero per record. Se generi pagine statiche o usi un framework che supporta già i segnaposto, il data URI evita di aggiungere codice di decodifica. Tutti i valori che vedi qui sono calcolati nel tuo browser: l'immagine non viene caricata su alcun server.
Esempi
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjLa lunghezza di un BlurHash dipende solo dal numero di componenti, non dalle dimensioni né dal contenuto dell'immagine: con 4 × 3 sono sempre 28 caratteri, con 3 × 3 sono 22 e con 5 × 4 sono 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHUn ThumbHash occupa tra 17 e 25 byte, ovvero da 24 a 36 caratteri in Base64. La dimensione esatta dipende dalle proporzioni dell'immagine e dal fatto che abbia trasparenza, perché il formato codifica anche il canale alfa.lqip 24 px webpdata:image/webp;base64,UklGRi…Una miniatura WebP larga 24 px resta di solito sotto 1 KB. Essendo incorporata nell'HTML non genera una richiesta in più, ma appesantisce il documento, che non viene memorizzato in cache separatamente.Casi d'uso
- Salvare un BlurHash o ThumbHash nella tabella delle immagini perché un elenco o un feed a scorrimento infinito mostri qualcosa fin dal primo istante.
- Compilare l'attributo blurDataURL di next/image o il placeholder di NgOptimizedImage quando l'immagine non è un import statico.
- Evitare lo spostamento del layout (CLS) nelle schede di prodotto o di articolo, combinando il segnaposto con gli attributi width e height.
- Incorporare un segnaposto in HTML statico, un'email o un template dove non puoi eseguire JavaScript di decodifica.
- Riutilizzare lo stesso BlurHash sul web e nelle app mobili, che dispongono di decodificatori in Swift, Kotlin e Flutter.
- Usare il colore medio come sfondo di un contenitore quando il budget di byte non consente nemmeno una miniatura.
Domande frequenti
BlurHash o ThumbHash?
ThumbHash riproduce l'immagine con più fedeltà in meno byte, conserva la trasparenza e memorizza le proporzioni, quindi non serve nemmeno conoscere le dimensioni originali per disegnarlo. BlurHash è precedente e meno preciso, ma ha implementazioni per molte più piattaforme e linguaggi. Se parti da zero, ThumbHash; se hai già decodificatori BlurHash nel tuo stack, non c'è motivo di migrare.
Questo migliora l'LCP?
Non direttamente. Il segnaposto migliora la percezione della velocità e, insieme a width e height, elimina lo spostamento del layout, ma la metrica LCP continua a essere misurata quando l'immagine reale finisce di essere disegnata. Anzi: se l'immagine principale è l'elemento LCP, non assegnarle loading="lazy" né rinviarla dietro un segnaposto; conviene contrassegnarla con fetchpriority="high" perché il browser la richieda prima. I segnaposto servono per le immagini che stanno fuori dalla prima schermata.
Quanti componenti conviene usare nel BlurHash?
Quattro per tre funziona bene con le immagini orizzontali e tre per quattro con quelle verticali. Ogni componente aggiuntivo aggiunge due caratteri e un po' più di dettaglio, ma oltre sei o sette la differenza smette di notarsi a occhio nudo, perché il risultato viene comunque mostrato sfocato.
Hash o data URI?
L'hash occupa qualche decina di byte per immagine ed è ideale quando ce ne sono molte nella stessa pagina, ma richiede codice lato client che lo decodifichi. Il data URI non ha bisogno di nulla, anche se pesa da dieci a cinquanta volte di più e viaggia dentro l'HTML, che non viene memorizzato in cache a parte. Con poche immagini in evidenza conviene il data URI; con elenchi lunghi, l'hash.
Perché usare l'SVG invece della miniatura direttamente?
Perché la sfocatura viene applicata dal browser nel disegnare l'SVG. Questo ti permette di partire da una miniatura molto più piccola senza che si vedano i blocchi di pixel quando viene ingrandita, e il risultato appare ugualmente morbido a qualsiasi dimensione. L'SVG inoltre fissa l'alfa su opaco, così la sfocatura non rende trasparenti i bordi.
Esiste un limite di dimensione per il segnaposto?
Dipende dallo strumento. NgOptimizedImage di Angular mostra un avviso in console quando il data URI del segnaposto supera i 4000 caratteri, perché da lì in poi il peso dell'HTML inizia a contare più del beneficio. È un buon riferimento generale: se la tua miniatura supera quel valore, abbassa la larghezza o la qualità.