Zakódovať obrázok do Base64 / Data URI

Data URI je URL, ktorá obsahuje priamo dáta zdroja namiesto ukazovania na vzdialený súbor. Jeho všeobecná forma je data:[<mediatype>][;base64],<data>. Pre obrázok máme typicky data:image/png;base64,iVBORw0KGgo…. Zdroj je vložený do HTML, CSS alebo JSON a načítaný bez akejkoľvek dodatočnej HTTP požiadavky.

Bežné motivácie:

• Zníženie HTTP požiadaviek: integrovať ikonu priamo do CSS namiesto jej načítavania navyše k dokumentu
• Email podpis s inline obrázkom: žiadne riziko, že bude obrázok blokovaný ako vzdialený obsah
• Web Components / Web Workers: kde načítanie externého zdroja často spôsobuje scope alebo CORS problém
• Lokálne úložisko (LocalStorage, IndexedDB, databáza): serializovať avatar miniatúru ako string
• Self-contained snippets: HTML súbor, ktorý si vystačí sám, bez externej závislosti

Niekoľko konkrétnych kontextov, kde sa Base64 kódovanie obrázka ospravedlňuje:

• SVG ikony inline v CSS (background-image: url("data:image/svg+xml;base64,…"))
• Personalizované emailové podpisy s logom
• Rýchle prototypovanie autonómnej stránky zdieľanej e-mailom
• Autonómne Web components (jediný nasaditeľný súbor)
• Generovanie PDF na strane prehliadača (jsPDF) s vloženými miniatúrami
• Testovacie dáta (mocks) obsahujúce obrázky

Tri kroky:

1. Nahrajte váš obrázok (PNG, JPG, SVG, WebP, GIF) cez drop zónu
2. Kliknite na "Kódovať"
3. Skopírujte výsledné Data URI dedikovaným tlačidlom a vložte ho do vášho HTML, CSS alebo JSON

Base64 nie je zázračné riešenie. Niekoľko opatrení:

• Base64 zvyšuje veľkosť o ~33 %: 4 ASCII znaky pre každé 3 binárne byty
• Kódované obrázky nie sú prehliadačom samostatne cachované; sú znovu načítané s HTML/CSS, ktoré ich obsahuje
• Preferovať pre obrázky menšie ako 10 KB; nad tým je externý súbor zvyčajne efektívnejší
• Pre SVG preferovať URL kódovanie (cez encodeURIComponent) skôr než Base64: výsledok je kratší a zostáva parsovateľný ako text
• Moderné build nástroje (Webpack, Vite) automatizujú výber Base64 vs. externý súbor cez konfigurovateľnú prahovú veľkosť

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…"
  }
}

Aký je rozdiel medzi Base64 a binárnym?

Binárny reprezentuje surové bajty súboru. Base64 je kódovanie, ktoré transformuje tieto bajty na 64 tlačiteľných ASCII znakov (A-Z, a-z, 0-9, +, /). Textové kontexty (HTML, JSON, email) ne môžu prenášať binárny; Base64 rieši tento problém za cenu nárastu veľkosti o 33 %.

Prečo je moje Data URI také dlhé?

30 KB obrázok v binárnom sa stáva ~40 KB v Base64. A každý znak je ASCII byte, takže áno, reťazec je dlhý. Je to inherentné kódovaniu. Pre veľké obrázky ponechať externý súbor.

Podporujú všetky prehliadače Data URI?

Áno, bez výnimky medzi modernými prehliadačmi (Chrome, Firefox, Safari, Edge dokonca od IE8). Historické limity: IE8 obmedzoval na 32 KB. Žiadny problém dnes na webe.

Ako dekódovať Data URI?

Náš Base64 dekóder obrázkov robí opačnú operáciu: vložte vaše Data URI, získajte obrázkový súbor (PNG, JPG, SVG, WebP) pripravený na nahranie alebo uloženie.

Base64 vs. URL kódovanie pre SVG?

Pre SVG produkuje URL kódovanie (s encodeURIComponent) kratší reťazec ako Base64 a zostáva čitateľný ako text. Je to odporúčaná voľba v CSS pri integrácii inline SVG. Pre binárne formáty (PNG, JPG) zostáva Base64 povinný.

Ovplyvňuje Base64 kódovanie kvalitu obrázka?

Nie. Kódovanie je lossless: je to bijekcia binárny bajt ↔ Base64 reťazec. Pôvodné pixely sú striktne zachované. Iba veľkosť prenášaného súboru rastie o 33 %.