Base64 Image Encoder

Kódování obrázků do Base64 Data URI pro HTML a CSS

Přetáhněte obrázek sem nebo klikněte pro nahrání

Podporuje PNG, JPG, SVG, WebP, GIF, AVIF

Co je Base64 kódování obrázků?

Base64 kódování obrázků převádí binární data obrázku na ASCII řetězec, který lze vložit přímo do HTML, CSS nebo JSON bez odkazování na externí soubor. Výsledkem je data URI — samostatný řetězec začínající data:image/png;base64, za nímž následují Base64-kódované bajty obrázku. Prohlížeče zacházejí s data URI přesně jako s externími URL obrázků: dekódují Base64 payload a vykreslí obrázek přímo.

Tato technika je definována v RFC 2397 (schéma data URI) a RFC 4648 (Base64 kódování). Při Base64 kódování obrázku se každé 3 bajty binárních dat pixelů převedou na 4 ASCII znaky, čímž se velikost dat zvýší přibližně o 33 %. Navzdory tomuto nárůstu eliminují vložené obrázky HTTP požadavek na každý prvek — což je výrazná optimalizace u malých obrázků (ikony, loga, sledovací pixely 1×1), kde by latence samostatného požadavku převýšila náklady na extra bajty.

Data URI jsou podporovány ve všech moderních prohlížečích, e-mailových klientech (s určitými omezeními) a v libovolném kontextu, který přijímá standardní syntaxi URI. Hojně se využívají v jednostránkových aplikacích, šablonách HTML e-mailů, SVG sprites a deklaracích CSS background-image, kde snížení celkového počtu síťových požadavků zlepšuje vnímanou dobu načítání.

Proč používat tento Base64 Image Encoder?

Tento nástroj převede libovolný obrázek na hotové data URI přímo ve vašem prohlížeči — bez nahrávání, bez serveru, bez nutnosti mít účet.

Okamžitá konverze
Přetáhněte obrázek nebo vyberte soubor a kompletní data URI se zobrazí ihned. Žádné čekání na zpracování serverem — vše řeší FileReader API lokálně.
🔒
Zpracování s důrazem na soukromí
Vaše obrázky nikdy neopustí vaše zařízení. Kódování probíhá zcela v prohlížeči pomocí nativní metody FileReader.readAsDataURL(). Žádná data nejsou odesílána na žádný server.
🌐
Podpora všech hlavních formátů
Přijímá PNG, JPEG, SVG, WebP, GIF, ICO, BMP a jakýkoli jiný obrazový formát, který váš prohlížeč podporuje. Typ MIME je automaticky detekován ze souboru.
📦
Výstup připravený ke zkopírování
Výstupem je kompletní řetězec data URI — vložte jej přímo do atributu src HTML tagu img, deklarace CSS url(), nebo JSON payloadu bez jakéhokoli ručního formátování.

Případy použití Base64 kódování obrázků

Frontendový vývoj
Vložte malé ikony a prvky uživatelského rozhraní přímo do HTML nebo CSS a eliminujte tak HTTP požadavky. Snižuje se tím latence vodopádu pro kritické obrázky nad ohybem stránky, což zlepšuje skóre Largest Contentful Paint (LCP).
Šablony HTML e-mailů
Mnozí e-mailoví klienti ve výchozím nastavení blokují externí obrázky. Vložené Base64 obrázky se zobrazí okamžitě, aniž by příjemce musel klikat na „načíst obrázky“, což zlepšuje míru otevření a vizuální konzistenci.
Jednostránkové aplikace
Zabalte malé prvky jako data URI do JavaScriptu nebo CSS a snižte tak celkový počet síťových požadavků. Webpack i Vite podporují automatické Base64 vkládání pro prvky pod konfigurovatelnou prahovou velikostí.
API a JSON payloady
Kódujte uživatelské avatary, podpisy nebo miniatury jako Base64 řetězce a vkládejte je přímo do JSON API odpovědí. Odpadá tak potřeba samostatného endpointu pro hosting malých obrázků.
Dokumentace a Markdown
Vložte diagramy nebo snímky obrazovky jako data URI do Markdown souborů nebo README dokumentů. Obrázky putují společně s dokumentem a zobrazí se správně bez externího hostingu.
Testování a prototypování
Používejte Base64 data URI jako zástupné obrázky v testovacích fixtures, Storybook stories nebo prototypových HTML souborech. Není třeba nastavovat statický souborový server ani spravovat obrazové prvky v rané fázi vývoje.

Struktura Data URI

Data URI kóduje formát obrázku a binární obsah do jednoho řetězce. Porozumění jeho struktuře pomáhá při programatickém sestavování nebo parsování data URI:

ČástPopis
data:URI scheme identifier
image/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

Porovnání obrazových formátů pro Base64 kódování

Volba obrazového formátu ovlivňuje výslednou velikost Base64, podporu v prohlížečích a vlastnosti vykreslování. Použijte formát, který nejlépe odpovídá typu vašeho obsahu:

FormátTyp MIMEPrůhlednostNejlepší pro
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

Příklady kódu

Jak převést obrázky na Base64 data URI v populárních jazycích a prostředích:

JavaScript (browser)
// 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..."
Python
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}'
Node.js
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')}`
}
CLI (bash)
# 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)"

Časté dotazy

Jaká je maximální velikost obrázku pro Base64 kódování?
V samotné specifikaci Base64 neexistuje žádný pevný limit. Podpora data URI v prohlížečích se liší: většina moderních prohlížečů zvládne data URI o velikosti několika megabajtů. Base64 kódování však zvyšuje velikost o 33 %, takže obrázek o velikosti 1 MB se stane přibližně 1,33 MB textu. Pro obrázky větší než 10–20 KB je efektivnější jejich servírování jako samostatných souborů se správným ukládáním do mezipaměti.
Snižuje Base64 kódování kvalitu obrázku?
Ne. Base64 je bezeztrátové kódování — převádí binární data na text bez změny obsahu. Dekódovaná data jsou bajt po bajtu identická s původním souborem. Jakákoli ztráta kvality pochází ze samotného obrazového formátu (např. komprese JPEG), nikoli z Base64 kódování.
Proč je Base64-kódovaný výstup větší než původní obrázek?
Base64 reprezentuje 3 bajty binárních dat pomocí 4 ASCII znaků, což vede k nárůstu velikosti o 33 %. Data URI navíc přidává předponu (např. data:image/png;base64,) o délce přibližně 25–30 znaků. U malých obrázků (do 2–5 KB) je tento nárůst vyvážen eliminací HTTP požadavku. U větších obrázků činí velikostní penalizace externe servírované soubory efektivnější volbou.
Mohu použít Base64 obrázky v CSS background-image?
Ano. Použijte data URI jako hodnotu funkce url(): background-image: url('data:image/png;base64,...'). Toto funguje ve všech moderních prohlížečích. Nejúčinnější je to pro malé, často používané vzory pozadí nebo ikony, kde se vyplatí eliminovat HTTP požadavek i za cenu mírně většího souboru CSS.
Je Base64 kódování obrázků bezpečné pro citlivé obrázky?
Base64 je kódování, nikoli šifrování. Kdokoli, kdo vidí data URI, jej může zpět dekódovat na původní obrázek. Nespoléhejte se na Base64 jako ochranu důvěrných obrázků. Tento nástroj zpracovává obrázky zcela ve vašem prohlížeči — žádná data nejsou odesílána na žádný server — ale výsledné data URI je prostý text čitelný kýmkoli, kdo má přístup ke zdrojovému kódu vašeho HTML nebo CSS.
Jak převést Base64 data URI zpět na soubor obrázku?
V JavaScriptu použijte fetch() s data URI, zavolejte blob() na odpovědi a vytvořte odkaz pro stažení. V Pythonu rozdělte řetězec na čárce, dekódujte část Base64 pomocí base64.b64decode() a zapište bajty do souboru. Můžete také využít nástroj Base64 Image Decoder na tomto webu.
Mám Base64 kódovat všechny obrázky na svém webu?
Ne. Base64 vkládání je výhodné pro malé obrázky (ikony, loga, pixely 1×1), kde režie HTTP požadavku převyšuje 33% nárůst velikosti. Pro větší obrázky používejte samostatné soubory se správnými cache hlavičkami — prohlížeč je může nezávisle ukládat do mezipaměti a načítat paralelně. Běžná prahová hodnota je 2–8 KB: obrázky pod touto velikostí těží z vkládání, zatímco větší obrázky by měly být servírovány jako externí soubory.