Zakódovat obrázek do Base64 / Data URI

Data URI je URL, která obsahuje přímo data zdroje místo odkazu na vzdálený soubor. Obecný tvar je data:[<mediatype>][;base64],<data>. Pro obrázek typicky máme data:image/png;base64,iVBORw0KGgo…. Zdroj je vložen do HTML, CSS nebo JSON a načten bez jakéhokoli dodatečného HTTP požadavku.

Časté motivace:

• Redukce HTTP požadavků: integrace ikony přímo do CSS místo dodatečného načítání
• Inline emailový podpis: žádné riziko, že bude obrázek blokován jako vzdálený obsah
• Web Components / Web Workers: kde načtení externího zdroje často způsobuje problém se scope nebo CORS
• Lokální úložiště (LocalStorage, IndexedDB, databáze): serializace miniaturního avataru jako řetězec
• Self-contained snippets: HTML soubor, který si vystačí sám, bez externí závislosti

Některé konkrétní kontexty, kde se base64 kódování obrázku ospravedlňuje:

• Inline SVG ikony v CSS (background-image: url("data:image/svg+xml;base64,…"))
• Personalizované emailové podpisy s logem
• Rychlé prototypování autonomní stránky sdílené e-mailem
• Autonomní web components (jediný nasaditelný soubor)
• Generování PDF na straně prohlížeče (jsPDF) s vloženými miniaturami
• Testovací data (mocks) obsahující obrázky

Tři kroky:

1. Nahrajte obrázek (PNG, JPG, SVG, WebP, GIF) přes drop zónu
2. Klikněte na « Kódovat »
3. Zkopírujte výslednou Data URI věnovaným tlačítkem a vložte ji do svého HTML, CSS nebo JSON

Base64 není zázračné řešení. Několik opatření:

• Base64 zvětšuje velikost o ~33 %: 4 ASCII znaky na každé 3 binární bajty
• Kódované obrázky nejsou cachovány samostatně prohlížečem; načítají se s HTML/CSS, které je obsahuje
• Preferovat pro obrázky menší než 10 KB; nad to je externí soubor obvykle efektivnější
• Pro SVG preferovat URL kódování (přes encodeURIComponent) místo Base64: výsledek je kratší a zůstává parsovatelný jako text
• Moderní build nástroje (Webpack, Vite) automatizují volbu Base64 vs. externí soubor přes konfigurovatelný velikostní práh

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Jaký je rozdíl mezi Base64 a binárním?

Binární reprezentuje surové bajty souboru. Base64 je kódování, které transformuje tyto bajty do 64 tisknutelných ASCII znaků (A-Z, a-z, 0-9, +, /). Textové kontexty (HTML, JSON, email) nemohou přenášet binární data; Base64 řeší tento problém za cenu 33 % větší velikosti.

Proč je moje Data URI tak dlouhá?

Obrázek o 30 KB v binární podobě se v Base64 stane ~40 KB. A každý znak je jeden ASCII bajt, takže ano, řetězec je dlouhý. Je to inherentní kódování. Pro velké obrázky raději externí soubor.

Podporují všechny prohlížeče Data URI?

Ano, bez výjimky v moderních prohlížečích (Chrome, Firefox, Safari, Edge dokonce od IE8). Historické limity: IE8 měl strop 32 KB. Dnes na webu žádná starost.

Jak dekódovat Data URI?

Náš dekodér Base64 obrázků dělá opačnou operaci: vložte vaši Data URI, získejte obrázek (PNG, JPG, SVG, WebP) připravený k nahrání nebo uložení.

Base64 vs. URL kódování pro SVG?

Pro SVG produkuje URL kódování (s encodeURIComponent) kratší řetězec než Base64 a zůstává čitelné jako text. To je doporučená volba v CSS při vkládání inline SVG. Pro binární formáty (PNG, JPG) zůstává Base64 povinný.

Ovlivňuje Base64 kódování kvalitu obrázku?

Ne. Kódování je bezztrátové: je to bijekce binární bajt ↔ Base64 řetězec. Pixely originálu jsou striktně zachovány. Pouze velikost přenášeného souboru roste o 33 %.