Afbeelding naar data-URI

Een data-URI codeert een afbeelding rechtstreeks als tekst (Base64), zodat je hem inline kunt insluiten in HTML (een img src) of CSS (een achtergrond) zonder apart bestand of extra netwerkverzoek. Deze tool zet je afbeelding om naar een kant-en-klare data:-URI.

De uitvoer is een tekstbestand met de volledige data:image/...;base64,...-string. Het is handig voor kleine icoontjes, e-mailsjablonen, demos in een enkel bestand of het vermijden van een extra verzoek, al is de Base64-tekst ongeveer een derde groter dan de oorspronkelijke bytes.

Alles draait volledig lokaal in je browser (geen upload, zelfs offline) - je afbeelding verlaat nooit je apparaat. De afbeelding wordt precies gecodeerd zoals hij is (dezelfde bytes, hetzelfde formaat, geen hercodering); een heel grote afbeelding levert een heel lange string op, dus dit is het meest geschikt voor kleine afbeeldingen.

De eerlijke afweging bij inline zetten: een data-URI reist mee met elke levering van het HTML- of CSS-bestand en wordt niet apart door de browser gecachet. Als vuistregel loont inline zetten daarom alleen voor heel kleine afbeeldingen - iconen van een paar kilobyte; grote afbeeldingen blijven beter een eigen bestand. Voor een snelle controle plak je de string direct in de adresbalk van de browser.

Technische gegevens

In 3 stappen

1. Sleep of tik op je afbeelding (PNG, JPEG of WebP).
2. Hij wordt in je browser als Base64 gecodeerd tot een data:-URI.
3. Download het tekstbestand met de data-URI (klaar om te plakken).

Beperkingen: Codeert de afbeeldingsbytes exact als Base64 in een data:<type>;base64,...-string die als tekstbestand wordt opgeslagen. Base64 is ongeveer 33% groter dan het origineel, dus dit is het meest geschikt voor kleine afbeeldingen. Het oorspronkelijke formaat en de bytes blijven behouden (geen hercodering).

Veelgestelde vragen

Gerelateerde tools

Fotocollage maken · Afbeeldingen comprimeren · PNG naar SVG · SVG optimaliseren