Base64 Afbeelding Decoder en Viewer | Zet Base64 om naar Afbeeldingen
Decodeer en bekijk base64-gecodeerde afbeeldingsstrings direct. Ondersteunt JPEG, PNG, GIF en andere gangbare formaten met foutafhandeling voor ongeldige invoer.
Base64 Afbeelding Decoder en Viewer
Plak een base64-gecodeerde afbeeldingsstring en decodeer deze om de afbeelding te bekijken.
Afbeeldingsvoorbeeld
Geen afbeelding om weer te geven. Plak een base64-string om deze automatisch gedecodeerd te zien.
Ondersteunt JPEG, PNG, GIF en andere gangbare afbeeldingsformaten.
Instructies
1. Plak een base64-gecodeerde afbeeldingsstring in het tekstvak hierboven.
2. De afbeelding wordt automatisch gedecodeerd terwijl je typt, of klik op de knop 'Decodeer Afbeelding'.
3. De gedecodeerde afbeelding verschijnt in het voorbeeldgebied hieronder.
Opmerking: De string moet beginnen met 'data:image/' voor de beste resultaten, maar de tool zal ook proberen strings zonder deze prefix te decoderen.
Documentatie
Base64 Afbeelding Decoder en Viewer
Inleiding
Base64 is een binaire-naar-tekst codering schema dat binaire gegevens weergeeft in een ASCII-tekenreeksformaat. Het wordt vaak gebruikt om afbeeldingsgegevens direct in HTML, CSS, JavaScript, JSON en andere tekstgebaseerde formaten in te bedden waarin binaire gegevens niet direct kunnen worden opgenomen. Deze tool stelt je in staat om base64-gecodeerde afbeeldingsreeksen te decoderen en de resulterende afbeeldingen direct in je browser te bekijken.
Base64-codering verhoogt de gegevensgrootte met ongeveer 33% in vergelijking met de originele binaire, maar het maakt het mogelijk om afbeeldingen direct in tekstgebaseerde documenten op te nemen zonder dat aparte bestanddownloads nodig zijn. Dit kan bijzonder nuttig zijn voor kleine afbeeldingen zoals pictogrammen, logo's of eenvoudige graphics waar het gemak van inbedden zwaarder weegt dan de toename in grootte.
Onze Base64 Afbeelding Decoder tool biedt een eenvoudige interface waar je een base64-gecodeerde afbeeldingsreeks kunt plakken en direct de gedecodeerde afbeelding kunt zien. Het ondersteunt alle gangbare afbeeldingsformaten, waaronder JPEG, PNG, GIF, WebP en SVG, en kan zowel dat URL-formaat (met het data:image/... voorvoegsel) als ruwe base64-reeksen verwerken.
Technische Gegevens
Base64 Codering Formaat
Base64-codering converteert binaire gegevens in een set van 64 ASCII-tekens (A-Z, a-z, 0-9, +, en /), met = gebruikt voor opvulling. Voor afbeeldingen op het web is base64-gegevens meestal geformatteerd als een dat URL met de volgende structuur:
1data:[<media type>][;base64],<data>
2Bijvoorbeeld, een base64-gecodeerde PNG-afbeelding kan eruitzien als:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2De componenten van dit formaat zijn:
data:- Het URL-schemaimage/png- Het MIME-type van de gegevens;base64- De coderingsmethode,- Een scheidingsteken tussen de header en de gegevens- De werkelijke base64-gecodeerde gegevens
Decodering Proces
Bij het decoderen van een base64 afbeeldingsreeks vinden de volgende stappen plaats:
- De reeks wordt geparsed om te identificeren of deze een dat URL-voorvoegsel bevat
- Als er een voorvoegsel bestaat, wordt het MIME-type geëxtraheerd om het afbeeldingsformaat te bepalen
- Het base64-gegevensgedeelte wordt geïsoleerd en gedecodeerd in binaire gegevens
- De binaire gegevens worden geconverteerd in een Blob of een object URL die als afbeelding kan worden weergegeven
Als de invoer geen dat URL-voorvoegsel bevat, probeert de decoder deze als ruwe base64-gegevens te behandelen en af te leiden welk afbeeldings type van de gedecodeerde binaire header of standaard naar PNG.
Ondersteunde Afbeeldingsformaten
Deze tool ondersteunt alle gangbare webafbeeldingsformaten:
| Formaat | MIME-type | Typische Gebruikscases |
|---|---|---|
| JPEG | image/jpeg | Foto's, complexe afbeeldingen met veel kleuren |
| PNG | image/png | Afbeeldingen die transparantie vereisen, screenshots, graphics |
| GIF | image/gif | Eenvoudige animaties, afbeeldingen met beperkte kleuren |
| WebP | image/webp | Modern formaat met betere compressie dan JPEG/PNG |
| SVG | image/svg+xml | Vector graphics, schaalbare pictogrammen en illustraties |
Gebruikscases
Base64-gecodeerde afbeeldingen hebben verschillende praktische toepassingen in webontwikkeling en daarbuiten:
-
Afbeeldingen in HTML/CSS/JS inbedden: Vermindert HTTP-verzoeken door afbeeldingen direct in je code op te nemen, wat de laadtijden van pagina's voor kleine afbeeldingen kan verbeteren.
-
E-mailtemplates: Zorgt ervoor dat afbeeldingen correct worden weergegeven in e-mailclients die externe afbeeldingen standaard blokkeren.
-
Single-file applicaties: Creëert zelfvoorzienende HTML-applicaties waarin alle bronnen zijn ingebed binnen één bestand.
-
API-antwoorden: Bevat afbeeldingsgegevens direct in JSON-antwoorden zonder aparte afbeeldings-eindpunten te vereisen.
-
Data-URI's in CSS: Embed kleine pictogrammen en achtergrondafbeeldingen direct in CSS-bestanden.
-
Canvas manipulaties: Faciliteert het opslaan en overdragen van canvas afbeeldingsgegevens.
-
Offline applicaties: Slaat afbeeldingen op als tekstreeksen in localStorage of IndexedDB.
Prestatieoverwegingen
Hoewel base64-codering gemak biedt, gaat het gepaard met nadelen:
- Verhoogde bestandsgrootte: Base64-codering verhoogt de gegevensgrootte met ongeveer 33%.
- Geen browser caching: Ingebedde afbeeldingen kunnen niet afzonderlijk worden gecached zoals externe afbeeldingsbestanden.
- Parsing overhead: Browsers moeten de base64-reeks decoderen voordat ze kunnen renderen.
- Onderhoudsproblemen: Ingebedde afbeeldingen zijn moeilijker bij te werken dan gerefereerde bestanden.
Voor optimale prestaties wordt base64-codering over het algemeen alleen aanbevolen voor kleine afbeeldingen (onder 10KB). Grotere afbeeldingen zijn meestal beter te bedienen als aparte bestanden die correct kunnen worden gecached en geoptimaliseerd.
Alternatieven
Er zijn verschillende alternatieven voor base64-codering voor verschillende gebruikscases:
-
SVG inline embedding: Voor vector graphics biedt inline SVG vaak betere prestaties en flexibiliteit dan base64-gecodeerde SVG.
-
WebP en moderne afbeeldingsformaten: Deze bieden betere compressie dan base64-gecodeerde JPEG/PNG.
-
Afbeeldingsprites: Combineert meerdere kleine afbeeldingen in één bestand en gebruikt CSS-positionering.
-
CDN's (Content Delivery Networks): Voor productie-sites is het vaak efficiënter om geoptimaliseerde afbeeldingen van een CDN te serveren.
-
Gegevenscompressie: Voor het overdragen van grote hoeveelheden binaire gegevens zijn gespecialiseerde compressie-algoritmen zoals gzip of Brotli efficiënter dan base64.
Code Voorbeelden
Hier zijn voorbeelden van het werken met base64-gecodeerde afbeeldingen in verschillende programmeertalen:
1// Converteer een afbeelding naar base64 in JavaScript (browser)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // Verkrijg als data URL (base64-string)
11 return canvas.toDataURL('image/png');
12}
13
14// Toon een base64 afbeelding
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Behandel reeksen zonder dat URL-voorvoegsel
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
261import base64
2from PIL import Image
3from io import BytesIO
4
5# Converteer een afbeeldingsbestand naar base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# Converteer base64 naar afbeelding en sla op
12def base64_to_image(base64_string, output_path):
13 # Verwijder dat URL-voorvoegsel indien aanwezig
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# Voorbeeld gebruik
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Print begin van de string
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Converteer een afbeeldingsbestand naar base64 in PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// Converteer base64 naar afbeelding en sla op
10function base64ToImage($base64String, $outputPath) {
11 // Extraheer de base64-gecodeerde binaire gegevens
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Decodeer en sla op
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Voorbeeld gebruik
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Print begin van de string
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // Converteer een afbeeldingsbestand naar base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // Converteer base64 naar afbeelding en sla op
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Verwijder dat URL-voorvoegsel indien aanwezig
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // Print begin van de string
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Converteer een afbeeldingsbestand naar base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // Converteer base64 naar afbeelding en sla op
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Verwijder dat URL-voorvoegsel indien aanwezig
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Print begin van de string
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Converteer een afbeeldingsbestand naar base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# Converteer base64 naar afbeelding en sla op
11def base64_to_image(base64_string, output_path)
12 # Verwijder dat URL-voorvoegsel indien aanwezig
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# Voorbeeld gebruik
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Print begin van de string
25
26base64_to_image(base64_image, 'output.jpg')
271' Excel VBA functie om een bestand naar base64 te coderen
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' Gebruik in Excel:
27' =FileToBase64("C:\pad\naar\afbeelding.jpg")
28HTML Implementatie
Hier is hoe je een base64 afbeelding direct in HTML kunt inbedden:
1<!-- Een base64 afbeelding direct in HTML inbedden -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64-gecodeerde afbeelding">
3
4<!-- CSS gebruiken met een base64 achtergrondafbeelding -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13Geschiedenis
Base64-codering heeft zijn oorsprong in de ontwikkeling van elektronische mailsystemen in de jaren '70. Het was ontworpen om het probleem van het verzenden van binaire gegevens via systemen die alleen ASCII-tekst konden verwerken op te lossen.
Het coderingsschema werd formeel vastgelegd in 1987 met de publicatie van RFC 989, die de Privacy Enhanced Mail (PEM) standaard definieerde. Dit werd later bijgewerkt in RFC 1421 en andere gerelateerde standaarden. De term "base64" zelf komt voort uit het feit dat de codering 64 verschillende ASCII-tekens gebruikt om binaire gegevens weer te geven.
In de context van webontwikkeling kreeg base64-codering voor afbeeldingen populariteit met de opkomst van dat URL's, die voor het eerst werden voorgesteld in RFC 2397 in 1998. Dit maakte het mogelijk om binaire gegevens direct in HTML, CSS en andere webdocumenten op te nemen.
Het gebruik van base64-gecodeerde afbeeldingen in webontwikkeling werd breder geaccepteerd in het midden van de jaren 2000, toen ontwikkelaars manieren zochten om HTTP-verzoeken te verminderen en de laadtijden van pagina's te verbeteren. De techniek werd bijzonder omarmd tijdens de opkomst van mobiele webontwikkeling, waar het minimaliseren van verzoeken cruciaal was voor prestaties op langzamere mobiele verbindingen.
Vandaag de dag blijft base64-codering een belangrijk hulpmiddel in webontwikkeling, hoewel het gebruik gerichter is geworden naarmate de beste praktijken zijn geëvolueerd. Moderne benaderingen neigen ertoe om base64-codering selectief te gebruiken voor kleine, kritische afbeeldingen, terwijl ze efficiëntere leveringsmethoden zoals HTTP/2 voor grotere activa benutten.
Referenties
Feedback
Klik op de feedback-toast om feedback te geven over deze tool
Gerelateerde Tools
Ontdek meer tools die handig kunnen zijn voor uw workflow