Base64 Afbeeldingsdecoder | Decodeer & Bekijk Afbeeldingen Online

Wat is een base64-afbeeldingsdecoder?

Een base64-afbeeldingsdecoder is een hulpmiddel dat een met base64 gecodeerde tekstreeks terug omzet in een afbeelding. Base64 is een manier om binaire gegevens, zoals de bytes van een afbeeldingsbestand, te schrijven met alleen 64 gewone teksttekens (letters, cijfers, +, / en = als opvulling). Browsers, e-mails en veel API's slaan afbeeldingen op deze manier op, zodat een afbeelding in gewone tekst kan worden meegestuurd in plaats van als afzonderlijk bestand. De decoder draait dat proces om: plak de tekenreeks erin en de oorspronkelijke afbeelding verschijnt.

De data-URL-indeling

Op het web wordt een base64-afbeelding meestal als data-URL geschreven. Het patroon is:

Bijvoorbeeld:

Elk onderdeel heeft een functie:

• data: geeft aan dat het een data-URL is, geen normaal webadres.
• image/png is het MIME-type, dat de browser vertelt om welk soort bestand het gaat.
• ;base64 geeft aan dat de gegevens na de komma met base64 zijn gecodeerd.
• Alles na de komma is de gecodeerde afbeelding zelf.

Hoe de decoder werkt

Het decoderen gebeurt in vier stappen.

1. Het hulpmiddel controleert of de tekenreeks begint met data:. Een data-URL die een ander mediatype dan een afbeelding vermeldt, zoals data:text/plain, wordt meteen geweigerd, omdat deze nooit als afbeelding kan worden weergegeven.
2. Spaties, tabs en regeleinden worden verwijderd, omdat lange base64-tekenreeksen soms over meerdere regels worden verdeeld. Een payload die percentcodering gebruikt in plaats van base64, wat RFC 2397 ook toestaat, wordt ongewijzigd doorgegeven.
3. De base64-tekst wordt terug omgezet in onbewerkte bytes.
4. De eerste bytes van het resultaat worden bekeken. Elk gangbaar afbeeldingsformaat begint met een vaste reeks bytes, een handtekening of „magic number” genoemd. PNG-bestanden beginnen met 89 50 4E 47, JPEG-bestanden met FF D8 FF, enzovoort. De decoder vergelijkt deze handtekeningen en labelt de afbeelding met het type dat ze aangeven.

De bytes zijn doorslaggevend, niet het label. Als een data-URL data:image/png vermeldt, maar de bytes beginnen met FF D8 FF, maakt de decoder de URL opnieuw aan als data:image/jpeg, zodat de tekenreeks die de knop „Afbeeldings-URL kopiëren” aanbiedt nooit de eigen inhoud verkeerd beschrijft.

Als de tekenreeks geen voorvoegsel data: heeft, behandelt de decoder deze als onbewerkte base64-gegevens, decodeert hij de gegevens en leest hij de handtekening op dezelfde manier. Als de bytes met geen enkele bekende afbeeldingshandtekening overeenkomen en er ook niet uitzien als SVG-tekst, meldt de decoder dat de tekenreeks geen afbeelding lijkt te zijn. Er wordt geen formaat geraden en er wordt niet teruggevallen op een standaardtype.

SVG wordt anders verwerkt, omdat SVG een tekstindeling (XML) is en geen binaire indeling, en dus geen vaste bytehandtekening heeft. De decoder controleert de eerste 1024 bytes van de gedecodeerde tekst op een tag <svg, een XML-declaratie zoals <?xml version="1.0"?> gevolgd door zo'n tag, of een documenttypeverklaring voor SVG gevolgd door zo'n tag. Een bytevolgordeteken helemaal aan het begin, die sommige editors aan UTF-8-bestanden toevoegen, wordt genegeerd. Omdat SVG niet aan de hand van een bytehandtekening kan worden geïdentificeerd, behoudt een data-URL die image/svg+xml opgeeft het opgegeven type.

Formule voor de grootte van een base64-afbeelding

Base64 zet elke 3 bytes binaire gegevens om in 4 teksttekens. De formule voor de gecodeerde lengte is:

De symbolen ⌈ ⌉ betekenen „naar boven afronden op het volgende gehele getal”, omdat base64 altijd werkt met groepen van 4 tekens en een onvolledige groep aanvult met =-tekens.

Voor grote bestanden komt dit neer op ongeveer 33% meer omvang, omdat 4 ÷ 3 ≈ 1,33. Bij kleine bestanden kan de procentuele toename groter zijn, omdat het naar boven afronden op de volgende groep van 4 tekens zwaarder weegt wanneer er aanvankelijk weinig gegevens zijn.

Uitgewerkt voorbeeld

Het PNG-voorbeeld hierboven wordt gedecodeerd tot 85 bytes afbeeldingsgegevens. Met de formule:

De base64-tekenreeks is inderdaad 116 tekens lang, wat overeenkomt. Dat is een toename van 36% ten opzichte van de oorspronkelijke 85 bytes (116 ÷ 85 ≈ 1,36), iets meer dan 33% omdat het bestand zo klein is.

Ondersteunde afbeeldingsformaten

De decoder leest de bytehandtekening van de gedecodeerde gegevens om het formaat te bepalen. De volgende typen worden herkend:

Een base64-afbeelding decoderen

1. Kopieer de base64-tekenreeks, met of zonder het voorvoegsel data:image/..., uit HTML, CSS, een API-antwoord of een e-mail.
2. Plak de tekenreeks in het invoervak.
3. De afbeelding wordt automatisch gedecodeerd kort nadat het typen is gestopt, of door op de decodeerknop te drukken.
4. De gedecodeerde afbeelding verschijnt in het voorbeeldgebied. De data-URL ervan kan worden gekopieerd met de knop „Afbeeldings-URL kopiëren”. De afbeelding zelf kan worden opgeslagen door er in het voorbeeld met de rechtermuisknop op te klikken en ervoor te kiezen de afbeelding op te slaan, omdat deze in de browser als een normaal afbeeldingselement wordt weergegeven.

Veelvoorkomende toepassingen van base64-afbeeldingen

• Insluiten in HTML, CSS of JavaScript: door de afbeeldingsgegevens rechtstreeks in de code te plaatsen, is geen afzonderlijk bestandsverzoek nodig.
• E-mailsjablonen: sommige e-mailclients blokkeren standaard extern gekoppelde afbeeldingen, maar een ingesloten base64-afbeelding wordt nog steeds weergegeven.
• HTML-hulpmiddelen in één bestand: een volledige pagina, inclusief de afbeeldingen, kan als één zelfstandig bestand worden geleverd.
• API-antwoorden: een afbeelding kan in een JSON-payload worden meegestuurd zonder een eigen endpoint nodig te hebben.
• CSS-achtergronden en pictogrammen: kleine pictogrammen worden soms rechtstreeks als data-URL in een stylesheet geschreven.

Voor- en nadelen van base64-afbeeldingen

Base64-codering is handig, maar niet kosteloos:

• De gecodeerde tekst is ongeveer een derde groter dan het oorspronkelijke bestand.
• Browsers kunnen een ingesloten afbeelding niet op dezelfde manier cachen als een gekoppeld bestand, waardoor deze telkens opnieuw wordt gedownload wanneer de omringende pagina of stylesheet dat doet.
• De browser moet de base64-tekst decoderen voordat de afbeelding kan worden weergegeven, wat een kleine hoeveelheid extra verwerking vergt.
• Door de grotere omvang en het ontbreken van caching is base64-insluiting geschikt voor kleine afbeeldingen, zoals pictogrammen en eenvoudige logo's. Grotere foto's kunnen meestal beter als gewone afbeeldingsbestanden worden aangeboden.

Veelgestelde vragen

Wat is een base64-afbeeldingsdecoder?

Het is een hulpmiddel dat een met base64 gecodeerde tekstreeks terug omzet in een zichtbare afbeelding, zoals een PNG-, JPEG-, GIF-, WebP-, BMP- of SVG-bestand.

Hoe decodeer ik een base64-afbeelding?

Plak de base64-tekenreeks, met of zonder het voorvoegsel data:image/..., in de decoder. Deze leest de tekenreeks, decodeert deze en toont de resulterende afbeelding.

Kan een base64-tekenreeks zonder het data-URL-voorvoegsel worden gedecodeerd?

Ja. De decoder behandelt de tekenreeks als onbewerkte base64-gegevens, decodeert de bytes en leest de eerste bytes om het formaat aan de hand van de handtekening te bepalen, bijvoorbeeld PNG, JPEG, GIF, WebP, BMP of ICO. SVG wordt herkend door in de gedecodeerde tekst te zoeken naar een tag <svg. Als geen van deze overeenkomt, meldt de decoder dat de tekenreeks geen afbeelding lijkt te zijn, in plaats van een formaat te raden.

Waarom wordt mijn base64-afbeelding niet gedecodeerd?

In de meeste gevallen zijn er drie oorzaken. De tekenreeks kan tekens bevatten die buiten het standaard base64-alfabet vallen, namelijk A–Z, a–z, 0–9, +, / en =; de base64url-variant die in sommige webtokens wordt gebruikt, schrijft in plaats daarvan - en _ en wordt niet geaccepteerd. De tekenreeks kan halverwege zijn afgebroken, waardoor de lengte één meer is dan een veelvoud van vier; een geldige base64-tekenreeks heeft dat nooit. Of de bytes behoren eenvoudigweg niet tot een ondersteund afbeeldingsformaat. Ontbrekende =-opvulling is op zichzelf geen probleem; spaties en regeleinden worden vóór het decoderen verwijderd.

Is base64-codering een vorm van beveiliging of versleuteling?

Nee. Base64 is alleen een manier om bytes als tekst weer te geven; het verbergt niets. Iedereen kan een base64-tekenreeks binnen enkele seconden met een gratis hulpmiddel decoderen. Deze codering mag daarom nooit worden gebruikt om privéafbeeldingen of andere gegevens te beschermen.

Hoeveel groter is een base64-tekenreeks dan de oorspronkelijke afbeelding?

Bij grotere bestanden ongeveer een derde groter, omdat elke 3 bytes van de oorspronkelijke gegevens wordt omgezet in 4 teksttekens. Een afbeelding van 100 KB wordt na codering ongeveer 133 KB groot. Bij kleine afbeeldingen kan de procentuele toename wat groter zijn door het afronden.

Geschiedenis

Base64 is voortgekomen uit coderingsschema's die in de jaren 1970 en 1980 zijn ontwikkeld om binaire gegevens te versturen via mailsystemen die alleen platte tekst konden verwerken. De methode werd voor e-mail vastgelegd in RFC 989 (1987) en later in RFC 1421. Het insluiten van afbeeldingen in webpagina's werd mogelijk toen de data:-URL-regeling werd gedefinieerd in RFC 2397 (1998). Halverwege de 2000er jaren werd dit gebruikelijker, toen ontwikkelaars manieren zochten om het aantal afzonderlijke HTTP-verzoeken te beperken, vooral bij trage mobiele verbindingen.

Referenties

1. RFC 4648: De Base16-, Base32- en Base64-gegevenscoderingen
2. RFC 2397: De „data”-URL-regeling
3. MDN Web Docs: data-URL's
4. WHATWG-standaard voor het herkennen van MIME-typen