Rad s Base64 kodiranjem slika
Base64 kodiranje je postupak pretvorbe binarnih podataka, kao što su slikovne datoteke, u tekstualni oblik koji se sastoji od skupa od 64 znaka. Ovaj tekstualni oblik omogućuje izravno ugrađivanje slikovnih podataka u tekstualne dokumente poput HTML-a, CSS-a ili XML-a.
Glavna prednost pretvorbe slika u Base64 tekstualni format je mogućnost smanjenja broja HTTP zahtjeva koje preglednik mora izvršiti prilikom učitavanja web stranice. Kada je slika ugrađena izravno u kôd, preglednik je preuzima zajedno s HTML ili CSS datotekom, bez potrebe za otvaranjem zasebne veze prema poslužitelju za tu slikovnu datoteku. To je iznimno korisno za male ikone, logotipe ili grafičke elemente unutar predložaka e-pošte, gdje vanjske slike često mogu biti blokirane ili uzrokovati kašnjenja u prikazivanju.
Međutim, Base64 kodiranje ima i svoje nedostatke. Proces kodiranja povećava veličinu podataka za otprilike jednu trećinu (oko 33%) u usporedbi s izvornom binarnom datotekom. Također, slike ugrađene u HTML ili CSS ne mogu se predmemorirati (cache) neovisno o samom kôdu stranice. Ako se velika slika kodira u Base64, to može značajno usporiti učitavanje i obradu web stranice.
Podržani formati i tehnička ograničenja alata
Ovaj alat omogućuje dvosmjernu pretvorbu: kodiranje slikovnih datoteka u Base64 tekst te dekodiranje Base64 tekstualnih nizova natrag u slikovne datoteke.
Kodiranje (Slika → Base64)
Prilikom pretvorbe slike u tekst, podržani su sljedeći slikovni formati:
- PNG
- JPG
- GIF
- WebP
- SVG
- AVIF
- BMP
- ICO
- TIFF
Maksimalna dopuštena veličina datoteke za kodiranje iznosi 5 MB. Alat samo kodira izvorne bajtove slike i ne vrši nikakve izmjene na samoj slici – nema kompresije, izrezivanja, promjene veličine niti pretvorbe u druge formate (poput pretvaranja SVG-a u PNG). Ako se u sučelje ispusti više slika odjednom, alat obrađuje samo prvu sliku.
Dekodiranje (Base64 → Slika)
Prilikom pretvorbe teksta u sliku, alat prihvaća standardne i URL-sigurne (URL-safe) Base64 nizove, uključujući i one koji sadrže razmake ili prijelome redaka. Unos može biti u obliku čistog Base64 niza ili u obliku cjelovitog data:image/... URI-ja. Maksimalna duljina tekstualnog unosa za dekodiranje iznosi 8 MB. Alat automatski prepoznaje vrstu slike na temelju dekodiranih podataka.
Privatnost i lokalna obrada podataka
Obrada podataka u ovom alatu odvija se u potpunosti unutar web preglednika korisnika. Kada odaberete slikovnu datoteku ili zalijepite tekstualni niz, pretvorba se izvršava lokalno pomoću resursa Vašeg računala. Slikovne datoteke i tekstualni nizovi ne prenose se na poslužitelje BroBroGo, čime se osigurava da Vaši podaci ostaju privatni na Vašem uređaju.
Upotreba izlaznih formata u web razvoju
Nakon što alat izvrši pretvorbu slike u tekst, generiraju se različiti oblici izlaza pod oznakom "Izlaz":
- Data URI: Generira cjeloviti niz koji započinje s
data:image/[format];base64,.... Ovaj format spreman je za izravno kopiranje i ugradnju. - Base64: Prikazuje isključivo čisti Base64 niz, bez metapodataka o vrsti datoteke i bez prefiksa.
- CSS: Formatira sliku kao vrijednost unutar CSS svojstva
background-image. Primjerice:background-image: url("data:image/png;base64,..."); - HTML: Formatira sliku unutar standardnog HTML taga
<img>. Primjerice:<img src="data:image/png;base64,..." />
Sučelje također prikazuje informacije o broju znakova u generiranom nizu pod oznakom "Izlazni znakovi" te dimenzije slike pod oznakom "Veličina slike".
Rješavanje pogrešaka i poruke sustava
Tijekom rada s alatom mogu se pojaviti određene pogreške u slučaju neispravnih ulaznih podataka ili prekoračenja tehničkih ograničenja. U nastavku su navedene točne poruke sustava i njihovo značenje:
- "Ta datoteka nije podržana slika." – Pojavljuje se ako pokušate učitati datoteku u formatu koji alat ne podržava.
- "Ta je slika veća od
{max}. Pokušajte s manjom." – Pojavljuje se ako slikovna datoteka prelazi ograničenje od 5 MB. - "Nije moguće pročitati tu datoteku." – Sustav javlja ovu pogrešku ako datoteka ne može biti učitana s lokalnog diska zbog oštećenja ili problema s pravima pristupa.
- "To nije valjan Base64." – Pojavljuje se prilikom dekodiranja ako uneseni tekstualni niz sadrži znakove koji ne pripadaju Base64 abecedi ili ima neispravnu strukturu.
- "Ovaj se Base64 ne dekodira u prepoznatljivu sliku." – Pojavljuje se kada je Base64 niz tehnički ispravno napisan, ali dekodirani binarni podaci ne sadrže prepoznatljivo zaglavlje slikovne datoteke.
- "Taj je unos predug. Neka bude manji od
{max}." – Pojavljuje se ako tekstualni unos za dekodiranje premašuje granicu od 8 MB. - "Podaci o slici su dekodirani, ali se slika ne može prikazati." – Ova se poruka prikazuje ako je dekodiranje uspješno obavljeno, ali preglednik ne može renderirati slikovne podatke na zaslonu.
Prilikom uspješnog dekodiranja teksta u sliku, datoteku možete preuzeti klikom na gumb "Preuzmi sliku". Datoteka će biti spremljena na Vaše računalo pod nazivom koji počinje s brobrogo-slika. nakon čega slijedi odgovarajući nastavak formata (npr. .png ili .jpg).
Često postavljana pitanja (FAQ)
Što je Base64 data URI slika?
To je slika kodirana kao tekst, pa se može nalaziti izravno unutar HTML-a ili CSS-a umjesto da se učitava iz zasebne datoteke. Time se štedi mrežni zahtjev, što je praktično za sitne ikone i predloške e-pošte.
Trebam li na ovaj način ugrađivati velike slike izravno u kôd?
Bolje ne. Base64 povećava podatke za otprilike trećinu i ne može se predmemorirati odvojeno od stranice, stoga ga koristite samo za male elemente, a velike slike povezujte kao uobičajene datoteke.
Može li se Base64 niz ponovno pretvoriti u datoteku?
Da. Prebacite se na Base64 → Slika, zalijepite data URI ili čisti Base64 niz, a alat će prepoznati vrstu slike, prikazati njezin pregled i omogućiti Vam preuzimanje datoteke. Datoteka će se preuzeti pod nazivom brobrogo-slika. s odgovarajućim nastavkom formata.