Generatore BlurHash

No, ed è la cosa che sorprende di più. Un BlurHash non è un formato immagine — sono 20-30 caratteri che un decodificatore espande in pixel. La tua app ha bisogno di un decodificatore per mostrarlo. Se vuoi qualcosa che funzioni senza alcun decodificatore, usa invece i pulsanti per l'URI di dati o per il download come PNG: entrambi ti danno un vero PNG del placeholder sfocato, più grande ma pronto per un attributo src o per un file su disco.

Quattro in orizzontale e tre in verticale è l'impostazione predefinita più comune, ed è quella con cui parte questo strumento. Al di sotto si perde il senso della posizione delle cose nell'inquadratura; al di sopra l'hash cresce in fretta per un guadagno visivo molto scarso, dato che il risultato sarà comunque sfocato. Nove per nove sono 166 caratteri — sei volte la lunghezza di un 4×3 per un placeholder che nessuno guarda da vicino.

Perché la media è calcolata in luce lineare, non sui byte sRGB. Codificare un gradiente di prova i cui canali sRGB hanno media rgb(130, 110, 95) produce un hash 1×1 che si decodifica in rgb(147, 116, 103). Non è un bug — mediare direttamente valori codificati in gamma lo è, ed è per questo che le miniature mediate in modo ingenuo appaiono spesso torbide. La media lineare è quella percettivamente corretta.

No. Il «punch» viene applicato in fase di decodifica, quindi la stringa resta identica qualunque valore si imposti. È incluso qui perché la maggior parte delle librerie di decodifica espone lo stesso parametro, ed è utile vederne l'effetto prima di sceglierne un valore nel proprio codice.

No. Il formato non ha un canale alfa, quindi un PNG trasparente viene codificato come se fosse stato appiattito su ciò che conteneva il canvas. Per immagini con trasparenza reale, un colore segnaposto è di solito una scelta migliore rispetto a una sfocatura.

No. Viene decodificata, sottocampionata e trasformata nella pagina. Sia l'encoder che il decoder qui presenti sono pura aritmetica eseguita nel tuo browser, senza che venga inviata alcuna richiesta in nessun momento.

Un placeholder che rispecchia i colori e la composizione generale dell'immagine fa due cose utili. Riserva lo spazio corretto, così nulla si sposta quando l'immagine arriva — la causa principale dei reclami sugli spostamenti di layout nelle pagine ricche di immagini. E dà subito all'occhio qualcosa di plausibile, il che fa percepire il caricamento più breve rispetto a un'attesa equivalente davanti a un riquadro grigio, perché c'è qualcosa da guardare invece che qualcosa da aspettare.