Afbeelding naar Base64 omzetten

Zo zet je een afbeelding om naar Base64

1. Sleep in Afbeelding → Base64 een afbeelding naar het uploadvlak of klik erop om er een te kiezen (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
2. Kies de Uitvoer: Data-URI (data:image/png;base64,…), Alleen Base64, CSS background-image of HTML-tag , die ook de breedte en hoogte van de afbeelding bevat.
3. Klik op Kopiëren, of op Downloaden als .txt voor lange resultaten.

De regel onder het uploadvlak toont het echte formaat (gelezen uit de bytes van het bestand, niet uit de naam), de afmetingen, de bestandsgrootte en de lengte van de data-URI.

Zo zet je Base64 terug om naar een afbeelding

1. Plak in Base64 → afbeelding de tekst in Base64-tekst of data-URI. Je kunt een losse Base64-reeks plakken, een volledige data-URI of zelfs een hele CSS-regel of <img>-tag: de data-URI wordt erin opgezocht. Regeleinden en spaties worden genegeerd, en URL-veilige Base64 (met - en _) werkt ook.
2. Klik op Afbeelding decoderen. Het voorbeeld, het type, de afmetingen en de grootte verschijnen.
3. Klik op Afbeelding downloaden om haar op te slaan met de juiste bestandsextensie.

Het type wordt gecontroleerd aan de hand van de “magic bytes” van het bestand, de handtekening aan het begin van elk afbeeldingsformaat (bijvoorbeeld 89 50 4E 47 voor PNG of FF D8 FF voor JPEG). Beweert een data-URI image/jpeg te zijn maar bevat ze een PNG, dan meldt de tool dat en gebruikt ze het echte type. Alles wat geen herkende afbeelding is, wordt geweigerd, en de limiet is 20 MB aan afbeeldingsgegevens.

Hoe Base64 werkt

Base64 zet elke 3 bytes van een bestand om in 4 afdrukbare tekens uit A–Z, a–z, 0–9, + en /, met = als opvulling aan het eind. Daarom is de gecodeerde tekst ongeveer 33% groter dan het bestand: een pictogram van 30 KB wordt ongeveer 40 KB aan tekst. Een data-URI voegt een korte header toe, data:<type>;base64,, zodat een browser weet hoe hij de gegevens moet lezen.

Wanneer gebruik je afbeeldingen als data-URI?

Data-URI’s zijn handig voor:

• kleine pictogrammen, logo’s en achtergronden in CSS, om een verzoek naar de server uit te sparen;
• HTML-e-mails en HTML-documenten uit één bestand die zonder externe bestanden moeten werken;
• JSON-API’s en configuratiebestanden die alleen tekst kunnen bevatten.

Voor grote foto’s zijn ze minder geschikt. De tekst is een derde groter dan het bestand, kan niet los van de pagina of het stylesheet waarin ze staat in de cache worden bewaard, en vertraagt de weergave. Boven ongeveer 10 tot 100 KB wint een gewoon afbeeldingsbestand met goede caching meestal, en daarom toont de tool een herinnering bij afbeeldingen boven 100 KB.

Alles draait in je browser: afbeeldingen en geplakte tekst worden nooit geüpload.