Utilia
Kategórie ▾
Jazyk: sk ▾

Konvertor obrázkov na Base64

Konvertuj obrázok na Base64 alebo data URI s hotovým kódom pre CSS a HTML, alebo dekóduj Base64 späť na obrázok s náhľadom. Zadarmo, súkromne, bez nahrávania.

Obrázok → Base64

Base64 → obrázok

Ako konvertovať obrázok na Base64

  1. V časti Obrázok → Base64 presuň obrázok do vyznačenej oblasti alebo na ňu klikni a vyber ho (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Vyber Výstup: Data URI (data:image/png;base64,…), Iba Base64, CSS background-image alebo Značka HTML , ktorá obsahuje aj šírku a výšku obrázka.
  3. Klikni na Kopírovať, alebo pri dlhých výsledkoch na Stiahnuť ako .txt.

Riadok pod oblasťou na presúvanie udáva skutočný formát (zistený z bajtov súboru, nie z jeho názvu), rozmery, veľkosť súboru a dĺžku data URI.

Ako konvertovať Base64 späť na obrázok

  1. V časti Base64 → obrázok vlož text do poľa Text Base64 alebo data URI. Môžeš vložiť samotný reťazec Base64, úplné data URI, ba aj celé pravidlo CSS alebo značku <img>: data URI sa v nich nájde. Zalomenia riadkov a medzery sa ignorujú a funguje aj Base64 bezpečný pre URL (so znakmi - a _).
  2. Klikni na Dekódovať obrázok. Zobrazí sa náhľad, typ, rozmery a veľkosť.
  3. Kliknutím na Stiahnuť obrázok ho uložíš so správnou príponou súboru.

Typ sa overuje pomocou „magických bajtov“, teda signatúry na začiatku každého formátu obrázka (napríklad 89 50 4E 47 pre PNG alebo FF D8 FF pre JPEG). Ak data URI tvrdí, že ide o image/jpeg, ale obsahuje PNG, nástroj ťa upozorní a použije skutočný typ. Všetko, čo nie je rozpoznaný obrázok, sa odmietne, a limit je 20 MB obrazových údajov.

Ako funguje Base64

Base64 mení každé 3 bajty súboru na 4 tlačiteľné znaky z A–Z, a–z, 0–9, + a /, pričom na konci sa ako doplnok používa =. Preto je zakódovaný text asi o 33 % väčší než súbor: ikona s 30 KB sa zmení na približne 40 KB textu. Data URI pridáva krátku hlavičku data:<type>;base64,, aby prehliadač vedel, ako ho čítať.

Kedy vkladať obrázky ako data URI

Data URI sa hodia na:

  • malé ikony, logá a pozadia v CSS, aby sa ušetrila jedna požiadavka;
  • e-maily HTML a jednosúborové dokumenty HTML, ktoré musia fungovať bez externých súborov;
  • rozhrania API JSON a konfiguračné súbory, ktoré dokážu prenášať iba text.

Na veľké fotografie sa nehodia. Text je o tretinu väčší než súbor, nedá sa ukladať do vyrovnávacej pamäte oddelene od stránky alebo štýlu, ktorý ho obsahuje, a oneskoruje vykresľovanie. Nad zhruba 10 až 100 KB zvyčajne vyhrá bežný súbor s obrázkom s dobrým ukladaním do vyrovnávacej pamäte, a preto nástroj pri obrázkoch nad 100 KB zobrazí upozornenie.

Všetko beží v tvojom prehliadači: obrázky a vložený text sa nikdy nenahrávajú.

Často kladené otázky

Je Base64 spôsob, ako obrázok komprimovať alebo chrániť?

Nie. Base64 zväčší údaje asi o 33 % a dekódovať ich môže ktokoľvek. Iba mení binárne údaje na text, ktorý sa dá preniesť tam, kam binárne údaje nemožno.

Prečo sa moje data URI nezobrazuje?

Najčastejšími príčinami sú chýbajúci alebo nesprávny typ v hlavičke, medzery či úvodzovky vložené do stredu reťazca alebo useknutý text. Vlož ho do časti Base64 → obrázok: nástroj ohlási neplatné znaky a skontroluje skutočný typ.

Môžem použiť SVG ako data URI?

Áno. SVG sa dá zakódovať do Base64 ako každý iný obrázok. Pri SVG je často kratšie data URI s kódovaním URL (data:image/svg+xml,%3Csvg…); tento nástroj dekóduje obe formy.

Funguje to s obrázkami HEIC alebo AVIF?

Kódovanie funguje s ľubovoľným súborom obrázka. Náhľad sa zobrazí, iba ak formát vie zobraziť tvoj prehliadač, ale text Base64 a stiahnutý súbor sú vždy správne.

Existuje limit veľkosti?

Áno, 20 MB obrazových údajov v oboch smeroch. Väčšie reťazce spomaľujú prehliadače a na webovej stránke sú len zriedka dobrým nápadom.

Súvisiace nástroje