CodeKitHubŠto je ovaj alat?
Base64 je način prikazivanja binarnih podataka — poput sirovih bajtova slike — kao običnog teksta, koristeći samo slova, brojke i šačicu simbola. Budući da je obični tekst, Base64-kodirana slika može se ugraditi izravno unutar HTML-a, CSS-a ili JSON-a umjesto da se referencira kao zasebna datoteka.
"Data URL" omotava taj Base64 tekst malim prefiksom (data:image/png;base64,) koji pregledniku govori o kakvoj se vrsti datoteke radi, tako da se može staviti izravno u src ili url() atribut i prikazati bez dodatnog zahtjeva.
Zašto ga koristiti?
- Dobijte oba formata odjednom — potpuni data URL za HTML/CSS, i sirovi Base64 (bez prefiksa) za ugradnju u JSON ili konfiguracijske datoteke.
- Bez putovanja do poslužitelja: eliminira jedan HTTP zahtjev za male ikone, avatare ili ugrađene slike.
- Čuva izvorne bajtove datoteke točno — bez ponovnog kodiranja ili gubitka kvalitete, za razliku od alata koji dekodiraju i ponovno spremaju sliku.
- Prikazuje razliku u veličini tako da znate za što se odričete radi pogodnosti.
- Privatno: datoteka se čita lokalno pomoću FileReader API-ja preglednika i nikada ne napušta vaš uređaj.
Kako ga koristiti
- Kliknite područje za prijenos ili povucite slikovnu datoteku na njega.
- Kopirajte potpuni data URL ako ga lijepite u <img src> ili CSS background-image.
- Kopirajte sirovi Base64 (bez data: prefiksa) ako ugrađujete vrijednost unutar JSON-a, YAML-a ili drugog konfiguracijskog formata koji već zna vrstu datoteke.
- Provjerite napomenu o veličini — Base64 tekst je otprilike trećinu veći od izvorne binarne datoteke.
Primjer
Ulaz
PNG ikona od 12 KB.Izlaz
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teksta) plus isti niz bez data: prefiksa.Povećanje veličine od ~33% svojstveno je Base64 kodiranju (3 bajta binarnih podataka postaju 4 znaka teksta) — nije greška u alatu.
Gdje se svaki format koristi
| Format | Tipična upotreba |
|---|---|
| Potpuni data URL | HTML <img src="...">, CSS background-image: url(...), ugrađene slike u e-mailovima |
| Sirovi Base64 | JSON API payloadi, YAML/konfiguracijske datoteke, BLOB polja baze podataka, prilagođeni binarni protokoli |
Base64 i veličina slike — kompromis u praksi
Dodatni trošak od ~33% znači da je Base64 ugradnju najbolje zadržati za male resurse: ikona od 2 KB postaje bezopasnih ~2,7 KB ugrađenog teksta, ali fotografija od 500 KB postaje ~665 KB teksta koji sjedi ugrađen u vašem HTML-u, što usporava parsiranje i ne može se predmemorirati odvojeno od stranice.
Ako ugrađujete mnogo slika ili veće slike, odvagnite dobitak jednog uštećenog zahtjeva naspram troška težine stranice — i razmislite o prethodnoj kompresiji.
Često postavljana pitanja
Zašto je Base64 niz toliko veći od moje slikovne datoteke?
Base64 kodira svaka 3 bajta binarnih podataka kao 4 tekstualna znaka, što je fiksan dodatni trošak od ~33%. Za sliku od 100 KB, očekujte otprilike 133 KB Base64 teksta. To je normalno i neizbježno — cijena je to predstavljanja binarnih podataka kao sigurnog, prenosivog teksta.
Koja je razlika između data URL-a i sirovog Base64 niza?
Data URL uključuje prefiks data:image/png;base64, koji pregledniku ili renderu govori koji MIME tip dekodira sljedeći tekst. Zalijepite potpuni data URL u HTML src ili CSS url(). Sirovi Base64 (sve nakon zareza) je ono što vam treba kad sustav već odvojeno zna vrstu datoteke — na primjer JSON polje poput { "format": "png", "data": "<sirovi base64>" }.
Kad trebam ugraditi sliku kao Base64 umjesto povezivanja s datotekom?
Base64 ugradnja korisna je za male, često ponovno korištene slike (ikone, logotipe, sitnu UI grafiku) gdje ušteda jednog HTTP zahtjeva nadmašuje kaznu od ~33% veličine, ili u kontekstima gdje zasebna datoteka nije praktična, poput ugrađenih e-mailova ili izvoza jedne HTML datoteke. Za velike fotografije ili bilo što ponovno korišteno na mnogim stranicama, normalna povezana datoteka s predmemoriranjem preglednika gotovo je uvijek bolja.
Mijenja li ili komprimira pretvaranje u Base64 moju sliku?
Ne. Base64 je bezgubitno tekstualno kodiranje točnih izvornih bajtova — ne dira piksele, rezoluciju niti kompresiju. Ako želite manju datoteku, prvo komprimirajte sliku kompresorom slika, a zatim komprimirani rezultat pretvorite u Base64.
Šalje li se moja slika igdje?
Ne. Datoteka se čita izravno u vašem pregledniku pomoću FileReader API-ja i kodira lokalno — nikada se ne šalje putem mreže.