Online Tool Store
BlurHash Generator
Codeer afbeeldingen in BlurHash-strings voor sneller laden. Pas componenttellingen aan, decodeer hashes en controleer kleurfouten. Volledig in je browser.
Deze tool werkt volledig in je browser. Je bestanden worden nooit naar een server geüpload.
Bron
Gedecodeerde placeholder
Alleen bij decoderen; niet opgeslagen in de hash.
Een BlurHash is een tekenreeks die je naast een afbeelding opslaat en bij het renderen uitbreidt tot een vervaagde placeholder — zodat de lay-out iets zinvols kan tonen voordat de echte afbeelding binnenkomt, zonder een tweede netwerkverzoek. Je client heeft een decoder nodig om deze te tonen; de data-URI-knop geeft je in plaats daarvan een kant-en-klare afbeelding, die geen decoder nodig heeft maar wel groter is. Er wordt niets geüpload.
Hoe je het gebruikt
- Sleep een afbeelding erin, kies een bestand, of plak er een met Ctrl+V — er is al een voorbeeld gecodeerd zodat je de vorm van de uitvoer ziet.
- Laat het detail op 4 × 3 staan tenzij je een reden hebt om het te wijzigen.
- Kopieer de hash en bewaar deze in dezelfde rij of hetzelfde record als de afbeelding zelf.
- Decodeer de hash in je client, of gebruik de knoppen voor data-URI of downloaden als je liever geen decoder toevoegt.
Wat je daadwerkelijk krijgt
De lengte ligt vast door het aantal componenten: vier tekens voor de header plus twee per component. Dat maakt de grootte volledig voorspelbaar voordat je iets codeert:
1 × 1 6 tekens egale gemiddelde kleur 3 × 3 22 tekens grove lichte en donkere gebieden 4 × 3 28 tekens de gebruikelijke standaard 9 × 9 166 tekens afnemende meerwaarde
Achtentwintig bytes is klein genoeg om gratis mee te sturen in de JSON-respons die je afbeeldingen opsomt — kleiner dan de meeste losse HTTP-headers. Dat is het hele idee van het formaat: de placeholder komt mee met de metadata, in het verzoek dat je toch al deed, zodat er geen tweede rondje nodig is voordat de pagina iets kan tonen. De transformatie draait bovendien in lineair licht in plaats van op ruwe sRGB-bytes: het direct middelen van gammagecodeerde waarden geeft precies die modderige, te donkere vervaging die je soms ziet. Het effect is het duidelijkst bij één component, waar de hash niets anders is dan een gemiddelde — een testverloop met een sRGB-byte-gemiddelde van rgb(130, 110, 95) decodeert bij 1 × 1 naar rgb(147, 116, 103), en het lineaire resultaat is het natuurkundig juiste, wat overeenkomt met wat je zou meten als je met een camera onscherp op de afbeelding inzoomt. Bij meer componenten sluit het verschil in het totale gemiddelde tot ongeveer één of twee niveaus van de 255.
Veelgestelde vragen
Kan ik de hash direct in een <img>-tag gebruiken?
Nee, en dat is wat mensen het vaakst verrast. Een BlurHash is geen afbeeldingsformaat — het zijn 20 tot 30 tekens die een decoder uitbreidt tot pixels. Je app heeft een decoder nodig om ze te tonen. Als je iets wilt dat helemaal zonder decoder werkt, gebruik dan in plaats daarvan de data-URI- of download-als-PNG-knoppen: beide geven je een echte PNG van de vervaagde placeholder, die groter is maar direct in een src-attribuut of een bestand op schijf past.
Hoeveel componenten moet ik gebruiken?
Vier in de breedte en drie in de hoogte is de gebruikelijke standaard, en daarmee begint deze tool. Daaronder verlies je het gevoel voor waar dingen zich in het beeld bevinden; daarboven groeit de hash snel voor heel weinig zichtbare winst, omdat het resultaat toch vervaagd wordt. Negen bij negen is 166 tekens — zes keer zo lang als een 4×3 voor een placeholder waar niemand van dichtbij naar kijkt.
Waarom lijkt een 1×1-hash lichter dan mijn afbeelding?
Omdat het gemiddelde wordt berekend in lineair licht, niet op de sRGB-bytes. Het coderen van een testverloop waarvan de sRGB-kanalen gemiddeld rgb(130, 110, 95) zijn, geeft een 1×1-hash die decodeert naar rgb(147, 116, 103). Dat is geen fout — het direct middelen van gammagecodeerde waarden is dat wel, en daarom zien naïef gemiddelde miniaturen er vaak modderig uit. Het lineaire gemiddelde is het perceptueel juiste.
Verandert de contrastschuif de hash?
Nee. Punch wordt pas toegepast bij het decoderen, dus de tekenreeks blijft identiek ongeacht welke waarde je instelt. Het staat hier omdat de meeste decoderbibliotheken dezelfde parameter bieden, en het handig is om het effect te zien voordat je een waarde in je eigen code kiest.
Behoudt een BlurHash transparantie?
Nee. Het formaat heeft geen alfakanaal, dus een transparante PNG wordt gecodeerd alsof deze was platgeslagen op wat het canvas bevatte. Voor afbeeldingen met echte transparantie is een placeholderkleur meestal een betere keuze dan een vervaging.
Wordt mijn afbeelding geüpload?
Nee. Ze wordt op de pagina zelf gedecodeerd, verkleind en getransformeerd. Zowel de encoder als de decoder hier is pure rekenkunde die in je browser draait, zonder dat er ooit een verzoek wordt verstuurd.
Waarom een vervaagde placeholder tonen in plaats van een laadindicator?
Een placeholder die overeenkomt met de kleuren en de grove compositie van de afbeelding doet twee nuttige dingen. Hij reserveert de juiste ruimte, zodat er niets verschuift wanneer de afbeelding binnenkomt — de belangrijkste oorzaak van klachten over layoutverschuivingen op beeldrijke pagina's. En hij geeft het oog meteen iets aannemelijks, waardoor het laden korter aanvoelt dan een even lange wachttijd tegen een grijs vlak, omdat er iets is om naar te kijken in plaats van iets om op te wachten.
Hoe we ons verhouden
| Functie | Online Tool Store | Command-line encoders | Afbeeldings-CDN-placeholders |
|---|---|---|---|
| Afbeelding verlaat nooit je apparaat | ✓ | ✓ | ✗ |
| Niets te installeren | ✓ | ✗ | ✓ |
| Decodeert een bestaande hash om te controleren | ✓ | Apart commando | ✗ |
| Toont de kleurfout van de heen-en-terugreis | ✓ | ✗ | ✗ |
| Exporteert ook een decoder-vrije data-URI | ✓ | Met extra stappen | ✓ |
| Laadt een afbeelding via slepen, bladeren of plakken | ✓ | Alleen bestandspad | Alleen slepen of bladeren |
| Codeert een hele bibliotheek in één keer | ✗ | ✓ | ✓ |
| Draait automatisch bij uploaden | ✗ | ✓ | ✓ |
Gebruik dit om het formaat te begrijpen, het aantal componenten af te stemmen en hashes te maken voor een handvol afbeeldingen. Zodra je elke upload gaat coderen, hoort dat thuis in je pipeline — een buildstap of een uploadhandler — niet in een browsertabblad. Deze tool is de plek om uit te zoeken wat je wilt voordat je die code schrijft.