Afbeelding naar Base64
Base64 codeert binaire afbeeldingsbytes als ASCII-tekst die je in HTML img src, CSS url() of JSON payloads kunt plakken. Handig voor kleine pictogrammen, gegevens-URI's in prototypes en API's die inline afbeeldingen verwachten. Het coderen gebeurt lokaal; er wordt niets geüpload.
Zo codeer je een afbeelding naar Base64
1. Upload het afbeeldingsbestand (houd het klein — minder dan 100 KB is praktisch).
2. Kopieer de gegenereerde Base64-tekenreeks of volledige gegevens-URL.
3. Plak in je HTML, CSS of configuratie.
4. Test in de doelomgeving: sommige e-mailclients beperken de gegevens-URI's.
Coderingsvoorbeelden
Inline-logo in HTML e-mail
Een 2 KB PNG logo als data:image/png;base64,... vermijdt externe blokkering van afbeeldingen in strikte bedrijfsinboxen.
CSS achtergrond voor prototype
Plak een Base64-textuur in een demo van één bestand zonder asset-hosting.
API-testarmatuur
Voeg een kleine Base64 JPEG toe aan de hoofdtekst van een JSON-verzoek voor het testen van het eindpunt van het uploaden van afbeeldingen.
Wanneer gebruik je deze tool
• Voor zeer kleine assets waarbij één HTTP-verzoek meer kost dan de overhead inline-grootte.
• Voor offline HTML-prototypes met één bestand.
• Wanneer externe hosting niet beschikbaar is in vergrendelde omgevingen.
Base64 in prestatiebudgetten
Met inlining worden round-trips verwijderd, maar wordt voorkomen dat de afbeelding afzonderlijk in de browser wordt gecached. Gebruik spaarzaam voor kritische kleine pictogrammen boven de vouw; lui grote media normaal laden.
Veelgestelde vragen
Waarom is Base64 groter dan het bestand?
Bij de codering worden voor elke 3 bytes vier tekens gebruikt: ongeveer 33% overhead plus het gegevens-URL-voorvoegsel.
Wat is een gegevens-URL?
Formaat: data:image/png;base64,iVBORw0KG... — MIME-type plus gecodeerde payload.
Maximale grootte voor e-mail?
Houd de totale berichtengroei onder de 10-20 KB; veel klanten stikken in enorme inline-afbeeldingen.
Terug decoderen naar bestand?
Gebruik de Base64 encoder/decoder-tool om ASCII indien nodig om te keren naar binair.
Worden afbeeldingen geüpload?
Nee: FileReader leest lokaal in de browser.