Koder obrazów Base64

Czym jest kodowanie obrazu w Base64?

Kodowanie obrazu w Base64 konwertuje binarne dane obrazu na ciąg ASCII, który można osadzić bezpośrednio w HTML, CSS lub JSON bez odwoływania się do zewnętrznego pliku. Wynikiem jest data URI — samowystarczający ciąg zaczynający się od data:image/png;base64, po którym następują bajty obrazu zakodowane w Base64. Przeglądarki traktują data URI dokładnie tak jak zewnętrzne adresy URL obrazów: dekodują ładunek Base64 i renderują obraz inline.

Technika ta jest zdefiniowana przez RFC 2397 (schemat data URI) oraz RFC 4648 (kodowanie Base64). Gdy obraz jest kodowany w Base64, każde 3 bajty binarnych danych pikseli stają się 4 znakami ASCII, co zwiększa rozmiar ładunku o około 33%. Pomimo tego narzutu, obrazy inline eliminują żądanie HTTP dla każdego zasobu — istotna optymalizacja, gdy obrazy są małe (ikony, loga, piksele śledzące 1x1), a opóźnienie wynikające z osobnego żądania przekroczyłoby koszt dodatkowych bajtów.

Data URI są obsługiwane przez wszystkie nowoczesne przeglądarki, klientów poczty e-mail (z zastrzeżeniami) i każdy kontekst obsługujący standardową składnię URI. Są szeroko stosowane w aplikacjach jednostronicowych, szablonach HTML do wiadomości e-mail, duszach SVG oraz deklaracjach CSS background-image, gdzie zmniejszenie łącznej liczby żądań sieciowych poprawia odczuwany czas ładowania.

Dlaczego warto używać tego kodera obrazów Base64?

To narzędzie konwertuje dowolny obraz na gotowy do użycia data URI bezpośrednio w przeglądarce — bez przesyłania, bez serwera, bez konta.

Przypadki użycia kodowania obrazu w Base64

Struktura data URI

Data URI koduje format obrazu i zawartość binarną w jednym ciągu. Zrozumienie jego struktury pomaga przy programowym tworzeniu lub parsowaniu data URI:

Porównanie formatów obrazów do kodowania Base64

Wybór formatu obrazu wpływa na rozmiar wyjścia Base64, obsługę przez przeglądarki i charakterystykę renderowania. Użyj formatu najlepiej dopasowanego do rodzaju treści:

Przykłady kodu

Jak konwertować obrazy na Base64 data URI w popularnych językach i środowiskach:

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Często zadawane pytania