Online Tool Store
Generator BlurHash
Codifică imaginile în BlurHash pentru încărcare rapidă. Ajustează componente, decodifică hash-urile și verifică erori de culoare. Complet în browser.
Acest instrument rulează în întregime în browserul tău. Fișierele tale nu sunt niciodată încărcate pe un server.
Sursă
Substitut decodat
Doar la decodare; nu este stocat în hash.
Un BlurHash este un șir pe care îl stocați lângă o imagine și îl extindeți într-un substitut neclar la randare — astfel încât aspectul paginii să poată arăta ceva relevant înainte ca imaginea reală să sosească, fără o a doua cerere de rețea. Clientul dvs. are nevoie de un decodor pentru a-l afișa; butonul URI de date vă oferă în schimb o imagine deja gata, care nu necesită decodor, dar este mai mare. Nimic nu este încărcat.
Cum se folosește
- Trageți o imagine, alegeți un fișier sau lipiți una cu Ctrl+V — un exemplu este deja codificat, ca să vedeți forma rezultatului.
- Lăsați detaliul la 4 × 3 dacă nu aveți un motiv să îl schimbați.
- Copiați hash-ul și păstrați-l în același rând sau înregistrare cu imaginea propriu-zisă.
- Decodați-l în clientul dvs. sau folosiți butoanele de URI de date ori de descărcare dacă preferați să nu adăugați un decodor.
Ce obțineți de fapt
Lungimea este fixată de numărul de componente: patru caractere de antet plus câte două pentru fiecare componentă. Astfel, dimensiunea este complet previzibilă înainte de a codifica orice:
1 × 1 6 caractere culoare medie uniformă 3 × 3 22 caractere zone deschise și întunecate aproximative 4 × 3 28 caractere valoarea implicită obișnuită 9 × 9 166 caractere câștiguri din ce în ce mai mici
Douăzeci și opt de octeți este suficient de puțin pentru a fi incluși gratuit în răspunsul JSON care listează imaginile — mai mic decât majoritatea antetelor HTTP individuale. Acesta este întregul rost al formatului: substitutul ajunge odată cu metadatele, în cererea pe care oricum urma să o faceți, deci nu mai este nevoie de o a doua tură înainte ca pagina să poată afișa ceva. Transformarea rulează, de asemenea, în lumină liniară, nu pe octeții sRGB bruti: mediile calculate direct pe valori codificate gamma produc exact acea neclaritate tulbure și prea întunecată pe care o vedeți uneori. Efectul este cel mai ușor de observat la o singură componentă, unde hash-ul nu este altceva decât o medie — un gradient de test cu media octeților sRGB rgb(130, 110, 95) se decodează la 1 × 1 în rgb(147, 116, 103), iar rezultatul liniar este cel corect din punct de vedere fizic, corespunzând a ceea ce ați măsura defocalizând o cameră îndreptată spre imagine. La un număr mai mare de componente, diferența din media generală se reduce la aproximativ unul sau două niveluri din 255.
Întrebări frecvente
Pot folosi hash-ul direct într-un tag <img>?
Nu, iar acesta este lucrul care surprinde cel mai des. Un BlurHash nu este un format de imagine — sunt 20-30 de caractere pe care un decodor le extinde în pixeli. Aplicația dvs. are nevoie de un decodor pentru a-l afișa. Dacă doriți ceva care funcționează fără niciun decodor, folosiți în schimb butoanele de URI de date sau de descărcare ca PNG: ambele vă oferă un PNG real al substitutului neclar, mai mare, dar care se potrivește direct într-un atribut src sau într-un fișier de pe disc.
Câte componente ar trebui să folosesc?
Patru pe orizontală și trei pe verticală este valoarea implicită obișnuită și cea cu care pornește acest instrument. Sub aceasta se pierde sensul locului unde se află lucrurile în cadru; peste aceasta, hash-ul crește rapid pentru un câștig vizibil foarte mic, deoarece rezultatul va fi oricum neclar. Nouă pe nouă înseamnă 166 de caractere — de șase ori lungimea unui 4×3, pentru un substitut la care nimeni nu se uită de aproape.
De ce un hash 1×1 pare mai deschis la culoare decât imaginea mea?
Pentru că media este calculată în lumină liniară, nu pe octeții sRGB. Codificarea unui gradient de test ale cărui canale sRGB au media rgb(130, 110, 95) produce un hash 1×1 care se decodează în rgb(147, 116, 103). Aceasta nu este o eroare — media directă a valorilor codificate gamma este greșeala, și de aceea miniaturile mediate naiv arată adesea tulburi. Media liniară este cea corectă din punct de vedere perceptiv.
Cursorul de contrast modifică hash-ul?
Nu. Valoarea „punch” este aplicată la decodare, deci șirul rămâne identic indiferent de valoarea setată. Este inclus aici deoarece majoritatea bibliotecilor de decodare expun același parametru, iar este util să vedeți efectul acestuia înainte de a alege o valoare în propriul cod.
Un BlurHash păstrează transparența?
Nu. Formatul nu are canal alfa, așa că un PNG transparent este codificat ca și cum ar fi fost aplatizat pe orice conținea canvasul. Pentru imagini cu transparență reală, o culoare substitut este de obicei o alegere mai bună decât o neclaritate.
Imaginea mea este încărcată pe un server?
Nu. Este decodată, redusă și transformată direct în pagină. Atât codorul, cât și decodorul de aici sunt aritmetică pură care rulează în browserul dvs., fără să se trimită vreo cerere în niciun moment.
De ce se afișează un substitut neclar în loc de un indicator de încărcare?
Un substitut care se potrivește cu culorile și compoziția generală a imaginii face două lucruri utile. Rezervă spațiul corect, astfel încât nimic nu se deplasează atunci când sosește imaginea — cauza principală a plângerilor legate de deplasările de aspect pe paginile bogate în imagini. Și oferă ochiului ceva plauzibil imediat, ceea ce face ca încărcarea să pară mai scurtă decât o așteptare echivalentă în fața unui dreptunghi gri, pentru că există ceva de privit în loc de ceva de așteptat.
Cum ne comparăm
| Funcție | Online Tool Store | Codificatoare din linia de comandă | Substitute din CDN-uri de imagini |
|---|---|---|---|
| Imaginea nu părăsește niciodată dispozitivul dvs. | ✓ | ✓ | ✗ |
| Nimic de instalat | ✓ | ✗ | ✓ |
| Decodează un hash existent pentru verificare | ✓ | Comandă separată | ✗ |
| Afișează eroarea de culoare la dus-întors | ✓ | ✗ | ✗ |
| Exportă și un URI de date fără decodor | ✓ | Cu pași suplimentari | ✓ |
| Încarcă o imagine prin tragere, răsfoire sau lipire | ✓ | Doar cale de fișier | Doar tragere sau răsfoire |
| Codifică o bibliotecă întreagă dintr-o singură trecere | ✗ | ✓ | ✓ |
| Rulează automat la încărcare | ✗ | ✓ | ✓ |
Folosiți acest instrument pentru a înțelege formatul, a ajusta numărul de componente și a genera hash-uri pentru câteva imagini. Odată ce codificați fiecare fișier încărcat, acest lucru aparține pipeline-ului dvs. — un pas de build sau un handler de încărcare — nu unei file de browser. Acest instrument este locul unde stabiliți ce vă doriți înainte de a scrie acel cod.