Zo gebruik je het
- Sleep afbeeldingen naar het sleepvak, klik erop om bestanden te kiezen of plak een afbeelding uit het klembord. Meerdere bestanden tegelijk kan ook.
- Kies desgewenst een doelformaat (PNG, JPEG of WebP) bij Converteren naar, pas de Kwaliteit aan en stel een Max. breedte in.
- Controleer de afmetingen, de originele grootte en de gecodeerde grootte die bij elke afbeelding worden getoond.
- Kopieer of download de uitvoer die je nodig hebt: data-URI, kale Base64, HTML-img-tag, CSS background-image of Markdown.
Zo werkt het omzetten van een afbeelding naar Base64
Base64 zet de bytes van een afbeeldingsbestand om in platte tekst die is opgebouwd uit 64 tekens. Elke 3 bytes worden 4 tekens, dus de tekst is ongeveer 33% groter dan het bestand. Een data-URI voegt een kort voorvoegsel met het MIME-type toe, zoals data:image/png;base64,, zodat een browser de tekst kan weergeven overal waar hij een afbeeldings-URL verwacht.
De afbeelding wordt lokaal in je browser gelezen en gecodeerd. Er wordt niets geüpload, dus persoonlijke screenshots en nog niet gepubliceerde ontwerpen blijven op je apparaat.
Welke uitvoer kopieer je?
- Data-URI voor
src-attributen, JavaScript en JSON-velden die een URL verwachten. - Kale Base64 voor API's die alleen de gecodeerde bytes willen, meestal naast een apart veld voor het MIME-type of de bestandsnaam.
- HTML-img-tag om rechtstreeks in een pagina of template te plakken.
- CSS background-image voor pictogrammen en decoraties in een stylesheet.
- Markdown voor documentatie en notities. Sommige renderers, waaronder GitHub, tonen geen afbeeldingen die als data-URI zijn opgenomen.
Ondersteunde formaten in één oogopslag
De eerste tekens van een Base64-string verraden het bestandstype, omdat ze de bestandshandtekening van het formaat coderen.
| Formaat | MIME-type | Base64 begint met |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy of PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | wisselend |
| TIFF | image/tiff | SUkqAA of TU0AKg |
Wanneer een afbeelding inline opnemen loont
Data-URI's besparen een netwerkverzoek en maken een bestand volledig zelfstandig. Dat past bij kleine pictogrammen en logo's van een paar kilobyte, HTML-rapporten in één bestand, kleine wazige placeholders en afbeeldingen die in JSON worden meegestuurd. Voor grote foto's zijn ze een slechte keuze: een derde extra bestandsgrootte, het ontbreken van aparte browsercaching en een zwaarder HTML- of CSS-bestand dat eerst moet worden gedownload voordat er iets verschijnt, kosten meestal meer dan het verzoek dat ze besparen. Stuurt je site een Content-Security-Policy mee, dan moet img-src ook data: toestaan voor inline afbeeldingen.
Veelgestelde vragen
Worden mijn afbeeldingen naar een server geüpload?
Nee. De browser leest elk bestand en codeert het op je apparaat. Er wordt niets naar base64.is of ergens anders verzonden.
Waarom is de Base64-tekst groter dan de afbeelding?
Base64 gebruikt 4 tekens voor elke 3 bytes, dus het resultaat is ongeveer 33% groter, plus het voorvoegsel van de data-URI. Wil je het korter maken, stel dan een Max. breedte in of converteer naar WebP of JPEG met een lagere kwaliteit.
Kan ik meerdere afbeeldingen tegelijk omzetten?
Ja. Selecteer of sleep meerdere bestanden. Elke afbeelding krijgt een eigen voorbeeld, eigen groottes en eigen uitvoer, elk met de knoppen Kopiëren en Downloaden.
Werken Base64-afbeeldingen in HTML-e-mail?
cid: betrouwbaarder.