Base64 Bildavkodare och Visare | Konvertera Base64 till Bilder
Avkoda och förhandsgranska base64-kodade bildsträngar omedelbart. Stöder JPEG, PNG, GIF och andra vanliga format med felhantering för ogiltiga inmatningar.
Base64 Bildavkodare och Visare
Klistra in en base64-kodad bildsträng och avkoda den för att se bilden.
Bildförhandsvisning
Ingen bild att visa. Klistra in en base64-sträng för att se den avkodad automatiskt.
Stöder JPEG, PNG, GIF och andra vanliga bildformat.
Instruktioner
1. Klistra in en base64-kodad bildsträng i textområdet ovan.
2. Bilden kommer att avkodas automatiskt medan du skriver, eller klicka på knappen 'Avkoda Bild'.
3. Den avkodade bilden kommer att visas i förhandsvisningsområdet nedan.
Obs: Strängen bör börja med 'data:image/' för bästa resultat, men verktyget kommer att försöka avkoda strängar utan denna prefix också.
Dokumentation
Base64 Bilddecoder och visare
Introduktion
Base64 är ett binärt till text-kodningsschema som representerar binär data i ett ASCII-strängformat. Det används ofta för att bädda in bilddata direkt inom HTML, CSS, JavaScript, JSON och andra textbaserade format där binär data inte kan inkluderas direkt. Detta verktyg gör att du kan avkoda base64-kodade bildsträngar och se de resulterande bilderna direkt i din webbläsare.
Base64-kodning ökar datastorleken med cirka 33 % jämfört med den ursprungliga binären, men det möjliggör att bilder kan inkluderas direkt i textbaserade dokument utan att kräva separata filnedladdningar. Detta kan vara särskilt användbart för små bilder som ikoner, logotyper eller enkla grafik där bekvämligheten med inbäddning överväger storleksökningen.
Vårt Base64 Bilddecoder-verktyg erbjuder ett enkelt gränssnitt där du kan klistra in en base64-kodad bildsträng och omedelbart se den avkodade bilden. Det stöder alla vanliga bildformat inklusive JPEG, PNG, GIF, WebP och SVG, och kan hantera både data-URL-format (med data:image/...
prefix) och råa base64-strängar.
Tekniska detaljer
Base64 Kodningsformat
Base64-kodning konverterar binär data till en uppsättning av 64 ASCII-tecken (A-Z, a-z, 0-9, + och /), med = som används för padding. För bilder på webben formateras base64-data vanligtvis som en data-URL med följande struktur:
1data:[<media type>][;base64],<data>
2
Till exempel kan en base64-kodad PNG-bild se ut så här:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
Komponenterna i detta format är:
data:
- URL-schematimage/png
- MIME-typen för datan;base64
- kodningsmetoden,
- en avgränsare mellan rubriken och datan- Den faktiska base64-kodade datan
Avkodningsprocess
Vid avkodning av en base64 bildsträng sker följande steg:
- Strängen analyseras för att identifiera om den innehåller en data-URL-prefix
- Om en prefix finns, extraheras MIME-typen för att bestämma bildformatet
- Den base64-dataparten isoleras och avkodas till binär data
- Den binära datan konverteras till en Blob eller en objekt-URL som kan visas som en bild
Om inmatningen inte inkluderar en data-URL-prefix försöker avkodaren att behandla den som rå base64-data och härleder bildtypen från den avkodade binärhuvudet eller standardiserar till PNG.
Stödda bildformat
Detta verktyg stöder alla vanliga webbildformat:
Format | MIME-typ | Typiska användningsområden |
---|---|---|
JPEG | image/jpeg | Fotografier, komplexa bilder med många färger |
PNG | image/png | Bilder som kräver transparens, skärmdumpar, grafik |
GIF | image/gif | Enkla animationer, bilder med begränsad färg |
WebP | image/webp | Modernt format med bättre kompression än JPEG/PNG |
SVG | image/svg+xml | Vektorgrafik, skalbara ikoner och illustrationer |
Användningsfall
Base64-kodade bilder har flera praktiska tillämpningar inom webbutveckling och bortom:
-
Inbäddning av bilder i HTML/CSS/JS: Minskar HTTP-förfrågningar genom att inkludera bilder direkt i din kod, vilket kan förbättra sidladdningstider för små bilder.
-
E-postmallar: Säkerställer att bilder visas korrekt i e-postklienter som blockerar externa bilder som standard.
-
Enstaka filapplikationer: Skapar självständiga HTML-applikationer där alla resurser är inbäddade inom en enda fil.
-
API-svar: Inkluderar bilddata direkt i JSON-svar utan att kräva separata bildändpunkter.
-
Data-URIs i CSS: Inbäddning av små ikoner och bakgrundsbilder direkt i CSS-filer.
-
Canvas-manipulationer: Underlättar sparande och överföring av canvas-bilddata.
-
Offline-applikationer: Lagrar bilder som textsträngar i localStorage eller IndexedDB.
Prestandahänsyn
Även om base64-kodning erbjuder bekvämlighet, kommer det med avvägningar:
- Ökad filstorlek: Base64-kodning ökar datastorleken med cirka 33 %.
- Ingen webbläsarcaching: Inbäddade bilder kan inte cachas separat som externa bildfiler.
- Parseringsöverhuvud: Webbläsare måste avkoda base64-strängen innan de renderar.
- Underhållsutmaningar: Inbäddade bilder är svårare att uppdatera än refererade filer.
För optimal prestanda rekommenderas base64-kodning vanligtvis endast för små bilder (under 10KB). Större bilder tjänas vanligtvis bättre som separata filer som kan cachas och optimeras korrekt.
Alternativ
Flera alternativ till base64-kodning finns för olika användningsfall:
-
SVG inline-inbäddning: För vektorgrafik ger inline SVG ofta bättre prestanda och flexibilitet än base64-kodad SVG.
-
WebP och moderna bildformat: Dessa ger bättre kompression än base64-kodade JPEG/PNG.
-
Bildspriter: Kombinera flera små bilder till en enda fil och använd CSS-positionering.
-
CDN:er (Content Delivery Networks): För produktionssajter är det ofta mer effektivt att servera optimerade bilder från en CDN.
-
Datakompression: För överföring av stora mängder binär data är specialiserade komprimeringsalgoritmer som gzip eller Brotli mer effektiva än base64.
Kodexempel
Här är exempel på att arbeta med base64-kodade bilder i olika programmeringsspråk:
1// Konvertera en bild till base64 i JavaScript (webbläsare)
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-sträng)
11 return canvas.toDataURL('image/png');
12}
13
14// Visa en base64-bild
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Hantera strängar utan data-URL-prefix
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# Konvertera en bildfil till 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# Konvertera base64 till bild och spara
12def base64_to_image(base64_string, output_path):
13 # Ta bort data-URL-prefix om det finns
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# Exempelanvändning
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Skriv ut början av strängen
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// Konvertera en bildfil till 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// Konvertera base64 till bild och spara
10function base64ToImage($base64String, $outputPath) {
11 // Extrahera den base64-kodade binära datan
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Avkoda och spara
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Exempelanvändning
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Skriv ut början av strängen
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 // Konvertera en bildfil till 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 // Konvertera base64 till bild och spara
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Ta bort data-URL-prefix om det finns
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 början av strängen
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
40
1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Konvertera en bildfil till 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 // Konvertera base64 till bild och spara
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Ta bort data-URL-prefix om det finns
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 början av strängen
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# Konvertera en bildfil till 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# Konvertera base64 till bild och spara
11def base64_to_image(base64_string, output_path)
12 # Ta bort data-URL-prefix om det finns
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# Exempelanvändning
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Skriv ut början av strängen
25
26base64_to_image(base64_image, 'output.jpg')
27
1' Excel VBA-funktion för att koda en fil till 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' Användning i Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28
HTML-implementering
Här är hur man bäddar in en base64-bild direkt i HTML:
1<!-- Inbäddning av en base64-bild direkt i HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodad bild">
3
4<!-- Använda CSS med en base64-bakgrundsbild -->
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
Historia
Base64-kodning har sina rötter i utvecklingen av elektroniska postsystem på 1970-talet. Det var utformat för att lösa problemet med att överföra binär data genom system som var utformade för att hantera endast ASCII-text.
Kodningsschemat formaliserades 1987 med publiceringen av RFC 989, som definierade Privacy Enhanced Mail (PEM) standarden. Detta uppdaterades senare i RFC 1421 och andra relaterade standarder. Termen "base64" kommer själv från att kodningen använder 64 olika ASCII-tecken för att representera binär data.
I sammanhanget av webbutveckling blev base64-kodning för bilder populärt med uppkomsten av data-URIs, som först föreslogs i RFC 2397 1998. Detta möjliggjorde att binär data kunde inkluderas direkt i HTML, CSS och andra webbdokument.
Användningen av base64-kodade bilder inom webbutveckling blev mer utbredd under mitten av 2000-talet när utvecklare sökte sätt att minska HTTP-förfrågningar och förbättra sidladdningstider. Tekniken omfamnades särskilt under uppkomsten av mobil webbutveckling, där det var avgörande att minimera förfrågningar på långsammare mobila anslutningar.
Idag förblir base64-kodning ett viktigt verktyg inom webbutveckling, även om dess användning har blivit mer riktad när bästa praxis har utvecklats. Moderna tillvägagångssätt tenderar att använda base64-kodning selektivt för små, kritiska bilder medan de utnyttjar mer effektiva leveransmetoder som HTTP/2 för större tillgångar.
Referenser
Återkoppling
Klicka på feedback-toasten för att börja ge feedback om detta verktyg
Relaterade verktyg
Upptäck fler verktyg som kan vara användbara för din arbetsflöde