BlurHash e ThumbHash
BlurHash / ThumbHash
Codifica un’immagine in una breve stringa BlurHash o ThumbHash da usare come segnaposto durante il caricamento.
Un BlurHash è una ventina scarsa di caratteri che si decodificano in una versione sfocata di un'immagine: abbastanza corti da stare in una colonna di database accanto all'indirizzo e da viaggiare nello stesso JSON, così l'impaginazione può mostrare qualcosa di riconoscibile prima che la fotografia arrivi.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI SVG
580 byteCodificato in percentuale anziché in base64: circa il 25% più piccolo, e resta leggibile. Incollalo direttamente in background-image: url("…")
Come si usa
Trascinare un'immagine, oppure incollare un hash
Le due direzioni funzionano nello stesso pannello: da un'immagine si ottiene un hash, da un hash l'anteprima decodificata.
Scegliere il numero di componenti
Un hash è lungo 4 + 2·x·y caratteri, quindi 4×3 fa 28. Più componenti vuol dire più dettaglio e una stringa più lunga; quattro per tre è il valore abituale.
Usare il punch su una fotografia piatta
Scala la variazione senza spostare il colore medio, e salva così un'immagine a basso contrasto che altrimenti si decodificherebbe in un rettangolo piatto.
Domande frequenti
Perché la sorgente viene prima rimpicciolita a 32 px?
Perché tutto quello che sta sopra quella frequenza viene comunque scartato dalla trasformazione. Codificare a piena risoluzione spende cento milioni di valutazioni delle funzioni di base per produrre gli stessi 28 caratteri.
Mi serve soltanto un colore medio.
Allora bastano i primi sei caratteri dell'hash: è esattamente quello che codificano, quindi una pagina a cui serve solo un colore di sfondo non deve decodificare niente.
BlurHash o ThumbHash?
Il BlurHash è quello con le librerie dappertutto ed è quello che questa pagina emette. Il ThumbHash è più corto a parità di qualità e porta con sé l'alfa, ma in tutti e due i casi serve un decodificatore sul client: conviene scegliere quello che il proprio stack ha già.
Può ricevere da
Immagine segnaposto
Placeholder Image
Genera un segnaposto a tinta unita o sfumato di qualsiasi dimensione, con le misure scritte sopra.
Colore medio e dominante
Average & Dominant Colour
Restituisce un colore rappresentativo dell’immagine — medio, mediano o più frequente — come valore di colore.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Comprimere JPEG
JPEG Compressor
Ricodifica un JPEG alla qualità che scegli, mostrando dal vivo il peso prima e dopo e la vista delle differenze.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Colore medio e dominante
Average & Dominant Colour
Restituisce un colore rappresentativo dell’immagine — medio, mediano o più frequente — come valore di colore.
Ridimensionare le immagini
Image Resizer
Ridimensiona per pixel, per percentuale o fissando il lato lungo, con il blocco delle proporzioni e preimpostazioni per lavorare a lotti.
Immagine segnaposto
Placeholder Image
Genera un segnaposto a tinta unita o sfumato di qualsiasi dimensione, con le misure scritte sopra.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Da Base64 a immagine
Base64 to Image
Decodifica una stringa Base64 o un data URI riportandolo a un’immagine visibile e scaricabile.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.