Base64 Bilde Dekoder og Visning | Konverter Base64 til Bilder
Dekod og forhåndsvis base64-kodede bildestrenger umiddelbart. Støtter JPEG, PNG, GIF og andre vanlige formater med feilhåndtering for ugyldige inndata.
Base64 Bilde Dekoder og Visning
Lim inn en base64-kodet bildestreng og dekod det for å se bildet.
Bilde Forhåndsvisning
Ingen bilde å vise. Lim inn en base64-streng for å se den dekodet automatisk.
Støtter JPEG, PNG, GIF og andre vanlige bildeformater.
Instruksjoner
1. Lim inn en base64-kodet bildestreng i tekstområdet over.
2. Bildet vil bli dekodet automatisk mens du skriver, eller klikk på 'Dekod Bilde'-knappen.
3. Det dekodede bildet vil vises i forhåndsvisningsområdet nedenfor.
Merk: Strengen bør starte med 'data:image/' for best resultat, men verktøyet vil også forsøke å dekode strenger uten dette prefikset.
Dokumentasjon
Base64 Bilde Dekoder og Visning
Introduksjon
Base64 er et binært-til-tekst kodingssystem som representerer binære data i et ASCII-strengformat. Det brukes ofte til å innebygge bildedata direkte i HTML, CSS, JavaScript, JSON og andre tekstbaserte formater der binære data ikke kan inkluderes direkte. Dette verktøyet lar deg dekode base64-kodede bildestrenger og se de resulterende bildene direkte i nettleseren din.
Base64-koding øker datastørrelsen med omtrent 33 % sammenlignet med den opprinnelige binære, men den gjør det mulig å inkludere bilder direkte i tekstbaserte dokumenter uten å kreve separate filnedlastinger. Dette kan være spesielt nyttig for små bilder som ikoner, logoer eller enkle grafikker der bekvemmeligheten av innebygging oppveier størrelsesøkningen.
Vårt Base64 Bilde Dekoder-verktøy gir et enkelt grensesnitt der du kan lime inn en base64-kodet bildestreng og umiddelbart se det dekodede bildet. Det støtter alle vanlige bildeformater inkludert JPEG, PNG, GIF, WebP og SVG, og kan håndtere både data-URL-format (med data:image/...
prefikset) og rå base64-strenger.
Tekniske Detaljer
Base64 Koding Format
Base64-koding konverterer binære data til et sett med 64 ASCII-tegn (A-Z, a-z, 0-9, +, og /), med = brukt til padding. For bilder på nettet er base64-data vanligvis formatert som en data-URL med følgende struktur:
1data:[<media type>][;base64],<data>
2
For eksempel, en base64-kodet PNG-bilde kan se slik ut:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
Komponentene i dette formatet er:
data:
- URL-skjemaetimage/png
- MIME-typen for dataene;base64
- Kodingmetoden,
- En avgrenser mellom overskriften og dataene- De faktiske base64-kodede dataene
Dekodingsprosess
Når en base64 bildestreng dekodes, skjer følgende trinn:
- Strengen blir analysert for å identifisere om den inneholder et data-URL-prefiks
- Hvis et prefiks eksisterer, blir MIME-typen ekstrahert for å bestemme bildeformatet
- Base64-dataparten isoleres og dekodes til binære data
- De binære dataene konverteres til en Blob eller et objekt-URL som kan vises som et bilde
Hvis inngangen ikke inkluderer et data-URL-prefiks, prøver dekoderen å behandle det som rå base64-data og utleder bildetype fra den dekodede binærhodet eller standardiserer til PNG.
Støttede Bildeformater
Dette verktøyet støtter alle vanlige web-bildeformater:
Format | MIME Type | Typiske Bruksområder |
---|---|---|
JPEG | image/jpeg | Bilder, komplekse bilder med mange farger |
PNG | image/png | Bilder som krever gjennomsiktighet, skjermbilder, grafikk |
GIF | image/gif | Enkle animasjoner, bilder med begrenset farge |
WebP | image/webp | Moderne format med bedre komprimering enn JPEG/PNG |
SVG | image/svg+xml | Vektorgrafikk, skalerbare ikoner og illustrasjoner |
Bruksområder
Base64-kodede bilder har flere praktiske bruksområder innen webutvikling og utover:
-
Innebygde bilder i HTML/CSS/JS: Reduserer HTTP-forespørslene ved å inkludere bilder direkte i koden din, noe som kan forbedre sideinnlastningstider for små bilder.
-
E-postmaler: Sørger for at bilder vises riktig i e-postklienter som blokkerer eksterne bilder som standard.
-
Enkeltfilapplikasjoner: Lager selvstendige HTML-applikasjoner der alle ressurser er innebygd i en enkelt fil.
-
API-responser: Inkluderer bildedata direkte i JSON-responser uten å kreve separate bilde-endepunkter.
-
Data-URI-er i CSS: Innebygger små ikoner og bakgrunnsbilder direkte i CSS-filer.
-
Canvas-manipuleringer: Fasiliterer lagring og overføring av canvas-bildedata.
-
Offline-applikasjoner: Lagrer bilder som tekststrenger i localStorage eller IndexedDB.
Ytelsesvurderinger
Selv om base64-koding tilbyr bekvemmelighet, kommer det med ulemper:
- Økt filstørrelse: Base64-koding øker datastørrelsen med omtrent 33 %.
- Ingen nettlesercaching: Innebygde bilder kan ikke caches separat som eksterne bildefiler.
- Parsing-overhead: Nettlesere må dekode base64-strengen før de kan gjengi.
- Vedlikeholdsutfordringer: Innebygde bilder er vanskeligere å oppdatere enn refererte filer.
For optimal ytelse anbefales base64-koding generelt bare for små bilder (under 10KB). Større bilder er vanligvis bedre tjent som separate filer som kan caches og optimaliseres ordentlig.
Alternativer
Flere alternativer til base64-koding eksisterer for forskjellige bruksområder:
-
SVG inline innebygging: For vektorgrafikk gir inline SVG ofte bedre ytelse og fleksibilitet enn base64-kodet SVG.
-
WebP og moderne bildeformater: Disse gir bedre komprimering enn base64-kodet JPEG/PNG.
-
Bilde-sprites: Kombinerer flere små bilder til en enkelt fil og bruker CSS-posisjonering.
-
CDN-er (Content Delivery Networks): For produksjonsnettsteder er det ofte mer effektivt å servere optimaliserte bilder fra en CDN.
-
Datakomprimering: For overføring av store mengder binære data er spesialiserte komprimeringsalgoritmer som gzip eller Brotli mer effektive enn base64.
Kodeeksempler
Her er eksempler på arbeid med base64-kodede bilder i forskjellige programmeringsspråk:
1// Konverter et bilde til base64 i JavaScript (nettleser)
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-bilde
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Håndter strenger uten data-URL-prefiks
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 bildefil 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 bilde og lagre
12def base64_to_image(base64_string, output_path):
13 # Fjern data-URL-prefiks hvis tilstede
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å bruk
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Skriv ut starten av strengen
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// Konverter et bildefil 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 bilde og lagre
10function base64ToImage($base64String, $outputPath) {
11 // Ekstraher den base64 kodede binære dataen
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekode og lagre
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Eksempel på bruk
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Skriv ut starten av 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 bildefil 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 bilde og lagre
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Fjern data-URL-prefiks hvis tilstede
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) + "..."); // Skriv ut starten av 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 bildefil 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 bilde og lagre
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Fjern data-URL-prefiks hvis tilstede
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) + "..."); // Skriv ut starten av strengen
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# Konverter et bildefil 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 bilde og lagre
11def base64_to_image(base64_string, output_path)
12 # Fjern data-URL-prefiks hvis tilstede
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å bruk
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Skriv ut starten av strengen
25
26base64_to_image(base64_image, 'output.jpg')
27
1' Excel VBA-funksjon for å 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' Bruk i Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28
HTML Implementering
Her er hvordan du kan innebygge et base64-bilde direkte i HTML:
1<!-- Innebygge et base64-bilde direkte i HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodet bilde">
3
4<!-- Bruke CSS med et base64 bakgrunnsbilde -->
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-koding har sine røtter i utviklingen av elektroniske postsystemer på 1970-tallet. Det ble designet for å løse problemet med å overføre binære data gjennom systemer som var designet for å håndtere bare ASCII-tekst.
Kodingssystemet ble formalisert i 1987 med publiseringen av RFC 989, som definerte standarden for Privacy Enhanced Mail (PEM). Dette ble senere oppdatert i RFC 1421 og andre relaterte standarder. Begrepet "base64" kommer fra det faktum at kodingen bruker 64 forskjellige ASCII-tegn for å representere binære data.
I konteksten av webutvikling fikk base64-kodede bilder økt popularitet med fremveksten av data-URI-er, som først ble foreslått i RFC 2397 i 1998. Dette tillot binære data å bli inkludert direkte i HTML, CSS og andre webdokumenter.
Bruken av base64-kodede bilder i webutvikling ble mer utbredt på midten av 2000-tallet ettersom utviklere søkte måter å redusere HTTP-forespørslene og forbedre innlastningstider. Teknikken ble spesielt omfavnet under oppgangen av mobil webutvikling, der det å minimere forespørslene var avgjørende for ytelse på tregere mobile tilkoblinger.
I dag forblir base64-koding et viktig verktøy innen webutvikling, selv om bruken har blitt mer målrettet ettersom beste praksiser har utviklet seg. Moderne tilnærminger har en tendens til å bruke base64-koding selektivt for små, kritiske bilder mens de utnytter mer effektive leveringsmetoder som HTTP/2 for større ressurser.
Referanser
Tilbakemelding
Klikk på tilbakemeldings-toast for å begynne å gi tilbakemelding om dette verktøyet
Relaterte verktøy
Oppdag flere verktøy som kan være nyttige for arbeidsflyten din