Whiz Tools

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å.

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:

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

Till exempel kan en base64-kodad PNG-bild se ut så här:

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

Komponenterna i detta format är:

  • data: - URL-schemat
  • image/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:

  1. Strängen analyseras för att identifiera om den innehåller en data-URL-prefix
  2. Om en prefix finns, extraheras MIME-typen för att bestämma bildformatet
  3. Den base64-dataparten isoleras och avkodas till binär data
  4. 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:

FormatMIME-typTypiska användningsområden
JPEGimage/jpegFotografier, komplexa bilder med många färger
PNGimage/pngBilder som kräver transparens, skärmdumpar, grafik
GIFimage/gifEnkla animationer, bilder med begränsad färg
WebPimage/webpModernt format med bättre kompression än JPEG/PNG
SVGimage/svg+xmlVektorgrafik, skalbara ikoner och illustrationer

Användningsfall

Base64-kodade bilder har flera praktiska tillämpningar inom webbutveckling och bortom:

  1. 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.

  2. E-postmallar: Säkerställer att bilder visas korrekt i e-postklienter som blockerar externa bilder som standard.

  3. Enstaka filapplikationer: Skapar självständiga HTML-applikationer där alla resurser är inbäddade inom en enda fil.

  4. API-svar: Inkluderar bilddata direkt i JSON-svar utan att kräva separata bildändpunkter.

  5. Data-URIs i CSS: Inbäddning av små ikoner och bakgrundsbilder direkt i CSS-filer.

  6. Canvas-manipulationer: Underlättar sparande och överföring av canvas-bilddata.

  7. 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:

  1. SVG inline-inbäddning: För vektorgrafik ger inline SVG ofta bättre prestanda och flexibilitet än base64-kodad SVG.

  2. WebP och moderna bildformat: Dessa ger bättre kompression än base64-kodade JPEG/PNG.

  3. Bildspriter: Kombinera flera små bilder till en enda fil och använd CSS-positionering.

  4. CDN:er (Content Delivery Networks): För produktionssajter är det ofta mer effektivt att servera optimerade bilder från en CDN.

  5. 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:

// Konvertera en bild till base64 i JavaScript (webbläsare)
function imageToBase64(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);
  
  // Få som data-URL (base64-sträng)
  return canvas.toDataURL('image/png');
}

// Visa en base64-bild
function displayBase64Image(base64String) {
  const img = new Image();
  
  // Hantera strängar utan data-URL-prefix
  if (!base64String.startsWith('data:')) {
    base64String = `data:image/png;base64,${base64String}`;
  }
  
  img.src = base64String;
  document.body.appendChild(img);
}
import base64
from PIL import Image
from io import BytesIO

# Konvertera en bildfil till base64
def image_to_base64(image_path):
    with open(image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read())
        return encoded_string.decode('utf-8')

# Konvertera base64 till bild och spara
def base64_to_image(base64_string, output_path):
    # Ta bort data-URL-prefix om det finns
    if ',' in base64_string:
        base64_string = base64_string.split(',')[1]
    
    image_data = base64.b64decode(base64_string)
    image = Image.open(BytesIO(image_data))
    image.save(output_path)

# Exempelanvändning
base64_str = image_to_base64("input.jpg")
print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Skriv ut början av strängen

base64_to_image(base64_str, "output.jpg")
<?php
// Konvertera en bildfil till base64 i PHP
function imageToBase64($path) {
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    return 'data:image/' . $type . ';base64,' . base64_encode($data);
}

// Konvertera base64 till bild och spara
function base64ToImage($base64String, $outputPath) {
    // Extrahera den base64-kodade binära datan
    $imageData = explode(',', $base64String);
    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
    
    // Avkoda och spara
    $data = base64_decode($imageData);
    file_put_contents($outputPath, $data);
}

// Exempelanvändning
$base64Image = imageToBase64('input.jpg');
echo substr($base64Image, 0, 50) . "...\n"; // Skriv ut början av strängen

base64ToImage($base64Image, 'output.jpg');
?>
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.util.Base64;

public class Base64ImageUtil {
    
    // Konvertera en bildfil till base64
    public static String imageToBase64(String imagePath) throws IOException {
        File file = new File(imagePath);
        byte[] fileContent = Files.readAllBytes(file.toPath());
        String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
        String base64String = Base64.getEncoder().encodeToString(fileContent);
        
        return "data:image/" + extension + ";base64," + base64String;
    }
    
    // Konvertera base64 till bild och spara
    public static void base64ToImage(String base64String, String outputPath) throws IOException {
        // Ta bort data-URL-prefix om det finns
        if (base64String.contains(",")) {
            base64String = base64String.split(",")[1];
        }
        
        byte[] decodedBytes = Base64.getDecoder().decode(base64String);
        
        try (FileOutputStream fos = new FileOutputStream(outputPath)) {
            fos.write(decodedBytes);
        }
    }
    
    public static void main(String[] args) throws IOException {
        String base64Image = imageToBase64("input.jpg");
        System.out.println(base64Image.substring(0, 50) + "..."); // Skriv ut början av strängen
        
        base64ToImage(base64Image, "output.jpg");
    }
}
using System;
using System.IO;
using System.Text.RegularExpressions;

class Base64ImageConverter
{
    // Konvertera en bildfil till base64
    public static string ImageToBase64(string imagePath)
    {
        byte[] imageBytes = File.ReadAllBytes(imagePath);
        string base64String = Convert.ToBase64String(imageBytes);
        
        string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
        return $"data:image/{extension};base64,{base64String}";
    }
    
    // Konvertera base64 till bild och spara
    public static void Base64ToImage(string base64String, string outputPath)
    {
        // Ta bort data-URL-prefix om det finns
        if (base64String.Contains(","))
        {
            base64String = base64String.Split(',')[1];
        }
        
        byte[] imageBytes = Convert.FromBase64String(base64String);
        File.WriteAllBytes(outputPath, imageBytes);
    }
    
    static void Main()
    {
        string base64Image = ImageToBase64("input.jpg");
        Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Skriv ut början av strängen
        
        Base64ToImage(base64Image, "output.jpg");
    }
}
require 'base64'

# Konvertera en bildfil till base64
def image_to_base64(image_path)
  extension = File.extname(image_path).delete('.')
  base64_data = Base64.strict_encode64(File.read(image_path))
  "data:image/#{extension};base64,#{base64_data}"
end

# Konvertera base64 till bild och spara
def base64_to_image(base64_string, output_path)
  # Ta bort data-URL-prefix om det finns
  if base64_string.include?(',')
    base64_string = base64_string.split(',')[1]
  end
  
  File.open(output_path, 'wb') do |file|
    file.write(Base64.decode64(base64_string))
  end
end

# Exempelanvändning
base64_image = image_to_base64('input.jpg')
puts base64_image[0, 50] + '...' # Skriv ut början av strängen

base64_to_image(base64_image, 'output.jpg')
' Excel VBA-funktion för att koda en fil till base64
Function FileToBase64(filePath As String) As String
    Dim fileNum As Integer
    Dim fileData() As Byte
    Dim objXML As Object
    Dim objNode As Object
    
    fileNum = FreeFile
    Open filePath For Binary Access Read As fileNum
    ReDim fileData(LOF(fileNum) - 1)
    Get fileNum, , fileData
    Close fileNum
    
    Set objXML = CreateObject("MSXML2.DOMDocument")
    Set objNode = objXML.createElement("b64")
    
    objNode.DataType = "bin.base64"
    objNode.nodeTypedValue = fileData
    
    FileToBase64 = objNode.Text
    
    Set objNode = Nothing
    Set objXML = Nothing
End Function

' Användning i Excel:
' =FileToBase64("C:\path\to\image.jpg")

HTML-implementering

Här är hur man bäddar in en base64-bild direkt i HTML:

<!-- Inbäddning av en base64-bild direkt i HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodad bild">

<!-- Använda CSS med en base64-bakgrundsbild -->
<style>
.base64-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
  width: 100px;
  height: 100px;
}
</style>
<div class="base64-bg"></div>

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

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
Feedback