Base64 Billedekoder og -viser | Konverter Base64 til billeder

Dekodér og forhåndsvis base64-kodede billedstrenge øjeblikkeligt. Understøtter JPEG, PNG, GIF og andre almindelige formater med fejlhåndtering for ugyldige input.

Base64 Billedekoder og Visning

Indsæt en base64-kodet billedestreng og dekod det for at se billedet.

Billedpreview

Intet billede at vise. Indsæt en base64-streng for at se det dekodet automatisk.

Understøtter JPEG, PNG, GIF og andre almindelige billedformater.

Instruktioner

1. Indsæt en base64-kodet billedestreng i tekstområdet ovenfor.

2. Billedet vil blive dekodet automatisk, mens du skriver, eller klik på knappen 'Dekod Billede'.

3. Det dekodede billede vises i preview-området nedenfor.

Bemærk: Strengen bør starte med 'data:image/' for bedst resultat, men værktøjet vil forsøge at dekode strenge uden dette præfiks også.

📚

Dokumentation

Base64 Billedekoder og Viewer

Introduktion

Base64 er et binært-til-tekst kodningssystem, der repræsenterer binære data i et ASCII-strengformat. Det bruges ofte til at indlejre billeddata direkte i HTML, CSS, JavaScript, JSON og andre tekstbaserede formater, hvor binære data ikke kan inkluderes direkte. Dette værktøj giver dig mulighed for at dekode base64-kodede billedstrenge og se de resulterende billeder direkte i din browser.

Base64-kodning øger datastørrelsen med cirka 33% sammenlignet med den oprindelige binære, men det muliggør, at billeder kan inkluderes direkte i tekstbaserede dokumenter uden at kræve separate fil-downloads. Dette kan være særligt nyttigt for små billeder som ikoner, logoer eller enkle grafik, hvor bekvemmeligheden ved indlejring opvejer størrelsesforøgelsen.

Vores Base64 Billedekoder værktøj giver en simpel grænseflade, hvor du kan indsætte en base64-kodet billedstreng og straks se det dekodede billede. Det understøtter alle almindelige billedformater, herunder JPEG, PNG, GIF, WebP og SVG, og kan håndtere både data-URL-format (med data:image/... præfiks) og rå base64-strenge.

Tekniske Detaljer

Base64 Kodningsformat

Base64-kodning konverterer binære data til et sæt af 64 ASCII-tegn (A-Z, a-z, 0-9, +, og /), med = brugt til padding. For billeder på nettet er base64-data typisk formateret som en data-URL med følgende struktur:

1data:[<media type>][;base64],<data>
2

For eksempel kan et base64-kodet PNG-billede se således ud:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

Komponenterne i dette format er:

data: - URL-skematik
image/png - MIME-typen for dataene
;base64 - Kodningsmetoden
, - En afgrænser mellem headeren og dataene
De faktiske base64-kodede data

Dekodningsproces

Når en base64 billedstreng dekodes, sker følgende trin:

Strengen parses for at identificere, om den indeholder et data-URL-præfiks
Hvis et præfiks findes, udtrækkes MIME-typen for at bestemme billedformatet
Base64-dataportionen isoleres og dekodes til binære data
De binære data konverteres til en Blob eller et objekt-URL, der kan vises som et billede

Hvis input ikke inkluderer et data-URL-præfiks, forsøger dekoderen at behandle det som rå base64-data og udleder billedtypen fra den dekodede binære header eller standardiserer til PNG.

Understøttede Billedformater

Dette værktøj understøtter alle almindelige webbilledformater:

Format	MIME-type	Typiske Anvendelsestilfælde
JPEG	image/jpeg	Fotos, komplekse billeder med mange farver
PNG	image/png	Billeder, der kræver gennemsigtighed, screenshots, grafik
GIF	image/gif	Enkle animationer, billeder med begrænset farve
WebP	image/webp	Moderne format med bedre kompression end JPEG/PNG
SVG	image/svg+xml	Vektorgrafik, skalerbare ikoner og illustrationer

Anvendelsestilfælde

Base64-kodede billeder har flere praktiske anvendelser inden for webudvikling og derudover:

Indlejring af billeder i HTML/CSS/JS: Reducerer HTTP-anmodninger ved at inkludere billeder direkte i din kode, hvilket kan forbedre indlæsningstider for små billeder.
E-mail skabeloner: Sikrer, at billeder vises korrekt i e-mailklienter, der blokerer for eksterne billeder som standard.
Enkeltfil-applikationer: Opretter selvstændige HTML-applikationer, hvor alle ressourcer er indlejret i en enkelt fil.
API-svar: Inkluderer billeddata direkte i JSON-svar uden at kræve separate billede-endepunkter.
Data-URI'er i CSS: Indlejrer små ikoner og baggrundsbilleder direkte i CSS-filer.
Canvas-manipulationer: Lettere at gemme og overføre canvas-billeddata.
Offline-applikationer: Gemmer billeder som tekststrenge i localStorage eller IndexedDB.

Ydelsesovervejelser

Selvom base64-kodning tilbyder bekvemmelighed, kommer det med ulemper:

Forøget filstørrelse: Base64-kodning øger datastørrelsen med cirka 33%.
Ingen browser-caching: Indlejrede billeder kan ikke caches separat som eksterne billedfiler.
Parsing-overhead: Browsere skal dekode base64-strengen, før de gengiver.
Vedligeholdelsesudfordringer: Indlejrede billeder er sværere at opdatere end refererede filer.

For optimal ydeevne anbefales base64-kodning generelt kun for små billeder (under 10KB). Større billeder er normalt bedre tjent som separate filer, der kan caches og optimeres korrekt.

Alternativer

Flere alternativer til base64-kodning findes til forskellige anvendelsestilfælde:

SVG inline indlejring: For vektorgrafik giver inline SVG ofte bedre ydeevne og fleksibilitet end base64-kodede SVG.
WebP og moderne billedformater: Disse giver bedre kompression end base64-kodede JPEG/PNG.
Billedsprites: Kombinerer flere små billeder til en enkelt fil og bruger CSS-positionering.
CDN'er (Content Delivery Networks): For produktionssider er det ofte mere effektivt at servere optimerede billeder fra en CDN.
Datakompression: For overførsel af store mængder binære data er specialiserede kompressionsalgoritmer som gzip eller Brotli mere effektive end base64.

Kodeeksempler

Her er eksempler på at arbejde med base64-kodede billeder i forskellige programmeringssprog:

1// Konverter et billede til base64 i 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  // Få som data URL (base64-streng)
11  return canvas.toDataURL('image/png');
12}
13
14// Vis et base64 billede
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // Håndter strenge uden data URL-præfiks
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

1import base64
2from PIL import Image
3from io import BytesIO
4
5# Konverter et billede til 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# Konverter base64 til billede og gem
12def base64_to_image(base64_string, output_path):
13    # Fjern data URL-præfiks hvis til stede
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# Eksempel på brug
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Print start af strengen
24
25base64_to_image(base64_str, "output.jpg")
26

1<?php
2// Konverter et billede til base64 i 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// Konverter base64 til billede og gem
10function base64ToImage($base64String, $outputPath) {
11    // Udtræk den base64 kodede binære data
12    $imageData = explode(',', $base64String);
13    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14    
15    // Dekod og gem
16    $data = base64_decode($imageData);
17    file_put_contents($outputPath, $data);
18}
19
20// Eksempel på brug
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Print start af strengen
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26

1import 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    // Konverter et billede til 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    // Konverter base64 til billede og gem
20    public static void base64ToImage(String base64String, String outputPath) throws IOException {
21        // Fjern data URL-præfiks hvis til stede
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 start af strengen
36        
37        base64ToImage(base64Image, "output.jpg");
38    }
39}
40

1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7    // Konverter et billede til 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    // Konverter base64 til billede og gem
18    public static void Base64ToImage(string base64String, string outputPath)
19    {
20        // Fjern data URL-præfiks hvis til stede
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 start af strengen
34        
35        Base64ToImage(base64Image, "output.jpg");
36    }
37}
38

1require 'base64'
2
3# Konverter et billede til 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# Konverter base64 til billede og gem
11def base64_to_image(base64_string, output_path)
12  # Fjern data URL-præfiks hvis til stede
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# Eksempel på brug
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Print start af strengen
25
26base64_to_image(base64_image, 'output.jpg')
27

1' Excel VBA-funktion til at kode en fil til base64
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' Brug i Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28

HTML Implementering

Her er hvordan man indlejrer et base64 billede direkte i HTML:

1<!-- Indlejring af et base64 billede direkte i HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodet billede">
3
4<!-- Brug af CSS med et base64 baggrundsbillede -->
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>
13

Historie

Base64-kodning har sine rødder i udviklingen af elektroniske mailsystemer i 1970'erne. Det blev designet til at løse problemet med at overføre binære data gennem systemer, der kun var designet til at håndtere ASCII-tekst.

Kodningssystemet blev formaliseret i 1987 med offentliggørelsen af RFC 989, som definerede standarden for Privacy Enhanced Mail (PEM). Dette blev senere opdateret i RFC 1421 og andre relaterede standarder. Begrebet "base64" stammer fra det faktum, at kodningen bruger 64 forskellige ASCII-tegn til at repræsentere binære data.

I forbindelse med webudvikling blev base64-kodede billeder populære med fremkomsten af data-URI'er, som først blev foreslået i RFC 2397 i 1998. Dette tillod binære data at blive inkluderet direkte i HTML, CSS og andre webdokumenter.

Brugen af base64-kodede billeder i webudvikling blev mere udbredt i midten af 2000'erne, da udviklere søgte måder at reducere HTTP-anmodninger og forbedre indlæsningstider. Teknikken blev især taget i brug under stigningen af mobil webudvikling, hvor det var afgørende at minimere anmodninger på langsommere mobile forbindelser.

I dag forbliver base64-kodning et vigtigt værktøj i webudvikling, selvom dens brug er blevet mere målrettet, efterhånden som bedste praksis har udviklet sig. Moderne tilgange har tendens til at bruge base64-kodning selektivt til små, kritiske billeder, mens der udnyttes mere effektive leveringsmetoder som HTTP/2 til større aktiver.

Referencer

💬

Feedback

💬

Klik på feedback toasten for at begynde at give feedback om dette værktøj

🔗

Relaterede værktøjer

Opdag flere værktøjer, der kan være nyttige for dit workflow