logo
GeekFormat

Afbeelding naar Base64

Sleep afbeeldingen hierheen of klik om te selecteren

Ondersteunt PNG, JPG, GIF, WebP

Gratis online tool om afbeeldingen naar Base64 te coderen, met ondersteuning voor PNG/JPG/WebP/GIF/SVG/BMP/AVIF en andere formaten. Lokale verwerking in de browser met Web Worker, geen upload en geen blokkerende UI. Genereer Data URL’s voor CSS, HTML, e-mailsjablonen en API-overdracht.

Gerelateerde aanbevelingen

Base64 naar Afbeelding

Base64 naar Tekst

DataURL naar Base64

JSON Compress

JavaScript Formatter

URL Parser

Toepassingsgevallen

  • CSS Sprites: plaats kleine iconen en afbeeldingen inline in CSS background om HTTP-verzoeken te verminderen en de eerste render te versnellen
  • HTML-afbeeldingen embedden: plaats logo’s, placeholders en UI-resources direct in HTML img-tags om afbeeldingsverzoeken te verminderen
  • E-mailsjablonen: e-mailclients blokkeren externe afbeeldingen vaak standaard; Base64 inline helpt afbeeldingen direct te tonen zonder toestemming van de gebruiker
  • API-overdracht: zet binaire afbeeldingsdata om naar Base64-strings en plaats ze in JSON request bodies voor API-calls
  • Frontend performance optimalisatie: verminder HTTP-verzoeken door kritieke above-the-fold resources inline te plaatsen
  • Browserextensies en single-file apps: embed alle afbeeldingen met Base64 wanneer externe resources niet kunnen worden gerefereerd

Functies

  • Volledige formaatondersteuning: automatische MIME-detectie voor PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF en andere gangbare afbeeldingsformaten
  • Web Worker versnelling: codering van grote bestanden draait in een aparte thread met realtime voortgangsbalk, zonder de hoofd-UI te blokkeren
  • Lokale verwerking zonder upload: afbeeldingen worden via ArrayBuffer zero-copy naar de Worker overgedragen en data gaat langs geen enkele server
  • Automatische Data URL-generatie: maakt de prefix data:image/xxx;base64, klaar voor HTML img of CSS background
  • Bidirectionele conversie: ondersteunt zowel afbeelding naar Base64 als Base64 naar afbeelding in gescheiden modi
  • Kopiëren en downloaden met één klik: kopieer pure Base64, volledige Data URL, HTML img-tag of download als .txt-bestand

Hoe te gebruiken

  1. Selecteer of sleep het afbeeldingsbestand dat je wilt coderen (PNG/JPG/WebP/GIF, enz.)
  2. De tool converteert de afbeelding automatisch naar Base64 in een browser Web Worker en toont de voortgang realtime
  3. Bekijk het resultaat: pure Base64-string, volledige Data URL of HTML img-tag, en kopieer het formaat dat je nodig hebt
  4. Plak het resultaat in CSS, HTML, JSON-configuratiebestanden of API-verzoeken

Veelgestelde vragen

Welke afbeeldingsformaten worden ondersteund?

PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF en andere gangbare formaten worden ondersteund. De tool detecteert automatisch het MIME-type en genereert de bijbehorende Data URL-prefix, zoals data:image/png;base64,...

Hoe werkt Web Worker-versnelling?

Een Web Worker is een browserthread die losstaat van de hoofd-UI-thread. Traditionele afbeeldingscodering kan de pagina blokkeren; deze tool voert de codering uit in de Worker met ArrayBuffer-overdracht en voortgangscallbacks, waardoor de interface responsief blijft bij grote bestanden.

Worden afbeeldingen naar een server geüpload?

Nee. De conversie wordt rechtstreeks in de Worker-thread van de browser uitgevoerd met ArrayBuffer zero-copy-technologie. Afbeeldingsinhoud passeert geen server. Dit verschilt wezenlijk van tools die “browserverwerking” claimen maar data toch uploaden.

Hoeveel groter wordt een bestand na Base64-codering?

Base64-codering levert ongeveer 133% van de oorspronkelijke binaire grootte op, dus ongeveer 33% extra. Elke 3 bytes (24 bits) worden omgezet naar 4 Base64-tekens (elk 6 bits), met = padding aan het einde indien nodig. Houd inline afbeeldingen bij voorkeur onder 10KB.

Welke afbeeldingen zijn geschikt voor Base64 inline?

Aanbevolen voor kleine iconen en afbeeldingen onder 10KB. Kleine inline afbeeldingen verminderen HTTP-verzoeken, maar grote afbeeldingen vergroten HTML/CSS en kunnen de laadtijd schaden. Grote afbeeldingen gebruiken beter aparte URL’s.

Wat is het verschil tussen Data URL en pure Base64?

Een Data URL heeft de vorm data:image/png;base64, gevolgd door Base64-content en kan direct in het src-attribuut van HTML img worden geplaatst. Pure Base64 is alleen de gecodeerde string en heeft een MIME-prefix nodig om bruikbaar te zijn.

Kan ik deze tool gebruiken voor API-integratietests?

Ja. Na het omzetten naar Base64 kun je de afbeelding als veldwaarde in een JSON request body naar backend-API’s sturen. De tool ondersteunt kopiëren met één klik en is compatibel met de meeste API-documentatievoorbeelden.

Waarom Base64 inline kiezen in plaats van gewone afbeeldingsreferenties?

Base64 inline is geschikt voor kleine bestanden (<10KB), omdat het HTTP-verzoeken vermindert. Voor grote afbeeldingen laden aparte URL’s sneller, omdat browsers meerdere resources parallel kunnen downloaden en cache kunnen gebruiken.

Wat is Afbeelding naar Base64?

Afbeelding naar Base64 is een techniek die binaire afbeeldingsdata codeert als ASCII-tekststring. Base64 gebruikt 64 afdrukbare tekens (A-Z, a-z, 0-9, +, /) om binaire data weer te geven, zet elke 3 bytes om naar 4 Base64-tekens en voegt = padding toe aan het einde. Het hele proces volgt de RFC 4648-standaard.

**Coderingsprincipe**: Base64 splitst elke 3 bytes (24 bits) in vier 6-bitgroepen, die elk naar een teken in het Base64-alfabet worden gemapt. Als het aantal bytes niet deelbaar is door 3, worden 1-2 = paddingtekens toegevoegd. Daarom neemt de bestandsgrootte met ongeveer 33% toe (4/3 ≈ 1.33).

**Web Worker-optimalisatie**: deze tool gebruikt Web Workers om codering uit te voeren in een browserthread los van de hoofdthread. ArrayBuffer.transfer() maakt zero-copy overdracht naar de Worker mogelijk en voorkomt blokkering. Zelfs bij afbeeldingen van meerdere MB blijft de UI responsief en wordt de voortgang realtime weergegeven.

**Privacy en veiligheid**: anders dan tools die afbeeldingen naar een server moeten uploaden, draait deze tool volledig in de browser. Afbeeldingsdata passeert geen servers van derden, wat belangrijk is bij gevoelige afbeeldingen zoals ID’s of contracten.

**Gebruiksscenario’s**: Base64-afbeeldingen worden vaak gebruikt voor CSS Sprites (minder HTTP-verzoeken), HTML e-mailsjablonen (voorkomen dat e-mailclients afbeeldingen blokkeren), API-overdracht van binaire data en browserextensies of single-file apps waar externe resources niet kunnen worden gerefereerd.