🖼️ Base64-afbeeldingsconverter

Converteer afbeeldingen naar Base64-strings of herstel Base64 naar afbeeldingen.

Afbeeldingsbestand

📁

Klik of sleep een afbeelding hierheen

Data-URL opnemen

GIDS

Meer lezen

1. Wat is Base64-codering

Base64 is een coderingsmethode die binaire gegevens omzet in ASCII-strings. Hiermee kunnen binaire bestanden zoals afbeeldingen, audio en video in tekstformaat worden weergegeven, zodat binaire gegevens via tekstgebaseerde protocollen zoals e-mail, JSON en XML kunnen worden verzonden. Er worden alleen 64 ASCII-tekens gebruikt (A-Z, a-z, 0-9, +, /) om alle binaire gegevens weer te geven. Handig voor het inline invoegen van afbeeldingen in HTML met Data URLs of voor het opnemen van afbeeldingen in API-reacties. Wel neemt de oorspronkelijke grootte met ongeveer 33% toe.

2. Gebruikstoepassingen van Base64-afbeeldingen

Base64-afbeeldingen worden in verschillende webontwikkelingsscenario's gebruikt. Het inline invoegen van kleine pictogrammen als CSS background-image vermindert HTTP-verzoeken en verbetert de laadsnelheid van pagina's. Ze worden gebruikt in e-mailsjablonen om externe afbeeldingsblokkering te omzeilen. Bij het uitrollen van complete webpagina's als één enkel HTML-bestand kunnen alle afbeeldingen als Base64 worden opgenomen. In RESTful API's kunnen afbeeldingen rechtstreeks in JSON-reacties worden opgenomen zonder aparte bestandsuploads. Ook worden ze gebruikt bij het verzenden van afbeeldingen die met de Canvas API zijn gemaakt naar servers.

3. Data-URL-formaat

Een Data URL is een schema om bestanden als URL's weer te geven. Formaat: data:[<mediatype>][;base64],<data>. Voorbeeld: data:image/png;base64,iVBORw0KG... Mediatype geeft het MIME-type aan, zoals image/png, image/jpeg, image/gif. ;base64 geeft de coderingsmethode aan, gevolgd door de daadwerkelijke Base64-string. Kan direct worden gebruikt in HTML img-tags zoals <img src="data:image/png;base64,...">. Wordt ook in CSS gebruikt als background: url(data:image/svg+xml;base64,...). Browsers verwerken Data URLs als gewone URL's om afbeeldingen weer te geven.

4. Overwegingen voor prestatie-optimalisatie

Bij het gebruik van Base64-afbeeldingen moet rekening worden gehouden met prestaties. Kleine afbeeldingen (onder 1-2KB) profiteren van inline invoegen in plaats van HTTP-verzoekoverhead. Grote afbeeldingen kunnen juist trager worden door de toename van 33% in grootte en de parseroverhead van Base64. Base64-afbeeldingen kunnen geen gebruikmaken van de browsercache, omdat ze telkens samen met HTML/CSS worden gedownload. Afbeeldingen die vaak worden gebruikt, moeten als losse bestanden worden aangeboden voor caching. Gzip-compressie werkt goed op Base64-strings, dus schakel deze in op servers. Base64 is geschikt voor decoratieve afbeeldingen of pictogrammen, niet voor kritieke content.

5. Veiligheidsoverwegingen

Er zijn beveiligingsrisico's verbonden aan Base64-afbeeldingen. Wees voorzichtig met XSS-aanvallen wanneer u door gebruikers geüploade afbeeldingen toont die naar Base64 zijn geconverteerd. SVG-afbeeldingen zijn bijzonder gevaarlijk, omdat ze JavaScript kunnen bevatten. Content-Security-Policy-headers kunnen het gebruik van het data:-schema beperken. Stel bestandsgroottebeperkingen in om geheugenuitputtingsaanvallen te voorkomen. Valideer afbeeldingstypen zodat alleen toegestane MIME-types worden verwerkt (image/png, image/jpeg). Server-side verificatie moet echte afbeeldingsbestanden bevestigen en controleren op schadelijke code.

6. Base64-conversie per programmeertaal

De meeste programmeertalen bieden Base64-codering standaard aan. JavaScript gebruikt btoa() voor coderen, atob() voor decoderen en de FileReader API om bestanden als Base64 te lezen. Python biedt b64encode() en b64decode() in de base64-module. PHP gebruikt de functies base64_encode() en base64_decode(). Java gebruikt getEncoder() en getDecoder() via de klasse java.util.Base64. Node.js codeert met Buffer.from(data).toString("base64") en decodeert met Buffer.from(base64, "base64"). Het lezen van afbeeldingsbestanden en converteren naar Base64 kan in alle talen eenvoudig met standaardbibliotheken worden geïmplementeerd.

Veelgestelde vragen

Wanneer moet ik de optie "Data-URL opnemen" inschakelen of uitschakelen?

Laat deze aan als u het resultaat direct in een HTML img-tag of CSS background-image wilt plakken, omdat dan het voorvoegsel data:image/png;base64, nodig is. Schakel deze uit als u alleen de ruwe Base64-string nodig hebt voor een server-API.

Welke afbeeldingsformaten (PNG, JPG, GIF, SVG) worden ondersteund?

U kunt de meeste raster- en vectorformaten die door browsers worden ondersteund uploaden - PNG, JPG, GIF, WebP, SVG en meer - om ze naar Base64 te converteren, en bij decoderen wordt de afbeelding hersteld met het oorspronkelijke MIME-type.

Is een Base64-string na conversie terug naar een afbeelding identiek aan het origineel?

Ja, Base64 is een verliesloze codering, dus decoderen herstelt een kopie die pixel voor pixel identiek is aan het oorspronkelijke bestand.

Waarom voelt het converteren van een grote afbeelding traag aan of levert het een heel lange string op?

Base64-codering vergroot de grootte met ongeveer 33% ten opzichte van de oorspronkelijke binaire data, en omdat het in het geheugen van de browser als string wordt verwerkt, kosten grotere afbeeldingen meer tijd en leveren ze langere uitvoerstrings op.

Is het veilig om de geconverteerde Base64 direct op mijn website te gebruiken?

Voor normale afbeeldingsinvoeging is dat prima, maar als u door gebruikers geüploade bestanden onveranderd toont, kunnen SVG's ingebedde scripts bevatten. Productieservices moeten daarom ook server-side validatie toevoegen.