Slika u Base64 – data URI, CSS i HTML

Pretvarač slike u Base64

Pretvori sliku u Base64 ili data URI sa CSS i HTML kodom spremnim za lepljenje, ili dekodiraj Base64 nazad u sliku sa pregledom. Besplatno, privatno.

Slika → Base64

Prevuci sliku ovde ili klikni da je izabereš Tvoji fajlovi ostaju na tvom uređaju: nikada se ne otpremaju.

Izlaz Rezultat

Base64 → slika

Base64 tekst ili data URI

Kako da pretvoriš sliku u Base64

U odeljku Slika → Base64 prevuci sliku na polje za otpuštanje ili klikni na njega da je izabereš (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
Izaberi Izlaz: Data URI (data:image/png;base64,…), Samo Base64, CSS background-image ili HTML oznaka, koja sadrži i širinu i visinu slike.
Klikni na Kopiraj, ili na Preuzmi kao .txt za duge rezultate.

Red ispod polja za otpuštanje pokazuje stvarni format (čita se iz bajtova fajla, a ne iz imena), dimenzije, veličinu fajla i dužinu data URI-ja.

Kako da pretvoriš Base64 nazad u sliku

U odeljku Base64 → slika nalepi tekst u polje Base64 tekst ili data URI. Možeš da nalepiš običan Base64 niz, ceo data URI, pa čak i celo CSS pravilo ili oznaku <img>: data URI se pronalazi unutar njih. Prelomi redova i razmaci se ignorišu, a radi i Base64 prilagođen URL-ovima (sa - i _).
Klikni na Dekodiraj sliku. Pojavljuju se pregled, tip, dimenzije i veličina.
Klikni na Preuzmi sliku da je sačuvaš sa ispravnom ekstenzijom fajla.

Tip se proverava pomoću „magičnih bajtova“, potpisa na početku svakog formata slike (na primer 89 50 4E 47 za PNG ili FF D8 FF za JPEG). Ako data URI tvrdi da je image/jpeg, a sadrži PNG, alat ti to javlja i koristi stvarni tip. Sve što nije prepoznata slika se odbija, a ograničenje je 20 MB podataka slike.

Kako radi Base64

Base64 pretvara svaka 3 bajta fajla u 4 znaka za štampu iz skupa A–Z, a–z, 0–9, + i /, sa = kao dopunom na kraju. Zato je kodirani tekst oko 33% veći od fajla: ikonica od 30 KB postaje oko 40 KB teksta. Data URI dodaje kratko zaglavlje, data:<tip>;base64,, da pregledač zna kako da ga pročita.

Kada ugraditi slike kao data URI

Data URI su zgodni za:

male ikonice, logotipe i pozadine u CSS-u, da se uštedi jedan zahtev;
HTML e-poštu i HTML dokumente u jednom fajlu koji moraju da rade bez spoljnih fajlova;
JSON API-je i konfiguracione fajlove koji mogu da nose samo tekst.

Loše su rešenje za velike fotografije. Tekst je za trećinu veći od fajla, ne može da se kešira odvojeno od stranice ili stilskog fajla koji ga sadrži i usporava iscrtavanje. Iznad otprilike 10 do 100 KB običan fajl slike uz dobro keširanje obično pobeđuje, zbog čega alat prikazuje podsetnik za slike veće od 100 KB.

Sve se izvršava u tvom pregledaču: slike i nalepljeni tekst nikada se ne otpremaju.

Česta pitanja

Da li je Base64 način da se slika kompresuje ili zaštiti?

Ne. Base64 povećava podatke za oko 33%, a svako može da ga dekodira. On samo pretvara binarne podatke u tekst koji može da putuje tamo gde binarni podaci ne mogu.

Zašto se moj data URI ne prikazuje?

Najčešći uzroci su nedostajući ili pogrešan tip u zaglavlju, razmaci ili navodnici nalepljeni usred niza, ili skraćen tekst. Nalepi ga u Base64 → slika: alat prijavljuje nevažeće znakove i proverava stvarni tip.

Mogu li da koristim SVG kao data URI?

Da. SVG može da se kodira u Base64 kao svaka slika. Za SVG je data URI kodiran kao URL (data:image/svg+xml,%3Csvg…) često kraći; ovaj alat dekodira oba oblika.

Da li radi sa HEIC ili AVIF slikama?

Kodiranje radi sa svakim fajlom slike. Pregled se pojavljuje samo ako tvoj pregledač može da prikaže format, ali Base64 tekst i preuzimanje su uvek ispravni.

Postoji li ograničenje veličine?

Da, 20 MB podataka slike u oba smera. Duži nizovi usporavaju pregledače i retko su dobra ideja na veb stranici.