Pretvorite sliku u Base64 data URI koji možete zalepiti pravo u CSS, HTML img tag ili JSON. Ubacite fajl i kopirajte kodirani string — originalni format i providnost se čuvaju tačno, jer se fajl čita bajt po bajt umesto da se iscrtava. Nikada ne napušta vaš pregledač.
Kako radi
Pregledač čita vaš fajl preko FileReader API-ja i vraća data URI: kratak prefiks koji imenuje tip medija, pa bajtove fajla kodirane u Base64. Pošto Base64 koristi samo bezbedne tekstualne znakove, cela slika može živeti unutar stilova ili markapa bez posebnog zahteva. Kodiranje je tačno — isti format, kvalitet i metapodaci kao izvorni fajl, jer se ništa ne renderuje ponovo.
Base64 čini podatke otprilike 33% većim od sirovih bajtova, pa je ovo najbolje za male resurse — ikonice, logotipe, sitne pozadinske teksture — gde je ušteda HTTP zahteva vredna veličine. Za velike fotografije inline data URI naduva vaš CSS ili HTML i šteti kešu, pa je obična referenca na fajl obično bolja. Prikaz veličine pokazuje i dekodiranu veličinu u bajtovima i broj znakova radi procene.
Primeri iz prakse
Ugrađivanje ikonice u CSS
SVG ili PNG ikonica od 1 KB postaje data URI koji lepite u background-image: url(...). Ikonica se učitava sa stilovima, štedeći poseban zahtev.
Ugrađivanje logotipa u HTML mejl
Mejl klijenti često blokiraju povezane slike. Kodirajte mali logotip u Base64 i ubacite ga u img src pa se uvek prikazuje bez spoljašnjeg preuzimanja.
Test podaci u JSON-u
Treba vam primer slike unutar API fiksture. Kodirajte sitni čuvar mesta i zalepite data URI kao string vrednost u vašem JSON-u.
Česta pitanja
Šta je data URI?
To je način da se fajl ugradi direktno u tekst. String počinje nečim poput data:image/png;base64, praćeno slikom kodiranom u Base64. Pregledači ga tretiraju baš kao povezanu sliku, ali mu ne treba posebno preuzimanje.
Gde mogu da zalepim rezultat?
Bilo gde gde se prima URL ili string: CSS background-image, HTML img src, JSON ili JavaScript string, ili SVG href. Data URI je samostalan.
Zašto je Base64 veći od mog fajla?
Base64 predstavlja tri bajta sa četiri tekstualna znaka, pa je oko 33% veći od originala. To opterećenje je cena mogućnosti da se binarni podaci ugrade kao običan tekst.
Kada ne bi trebalo da koristim Base64 slike?
Za velike slike ili bilo šta što se ponovo koristi na više stranica. Ugrađivanje velike fotografije naduva vaš HTML ili CSS i sprečava pregledač da posebno kešira sliku. Data URI blista za male resurse specifične za stranicu.
Da li se kvalitet ili format slike menja?
Ne. Fajl se čita takav kakav jeste i kodira bajt po bajt, pa su format, kvalitet i metapodaci identični vašem originalu. Ovo nije konverter — obavija tačan fajl.
Koji tipovi slika su podržani?
Bilo koja slika koju vaš pregledač može da pročita — PNG, JPG, WebP, GIF, SVG i još. Tip medija u prefiksu se uzima iz samog fajla.
Da li čuva providnost?
Da. Pošto se ništa ne iscrtava ponovo, providne PNG, WebP i SVG slike ostaju providne tačno kakve su bile.
Kako da data URI vratim u fajl?
Koristite prateći alat Base64 u sliku: zalepite data URI i preuzmite ga kao običan fajl slike.
Da li se moje slike šalju na server?
Ne. Kodiranje se u potpunosti odvija u vašem pregledaču preko FileReader API-ja. Fajl nikada ne napušta vaš uređaj, i radi van mreže kada se stranica učita.
Srodni alati
Base64 u sliku
Dekodirajte Base64 string ili data URI nazad u sliku, pregledajte je i preuzmite fajl — sve u pregledaču. Ništa se ne šalje.
Alati za slike
Base64 kodiranje i dekodiranje
Kodirajte tekst u Base64 ili ga dekodirajte nazad, bezbedno za UTF-8 i URL varijantu. Radi u potpunosti u pregledaču.
Alati za programere
PNG u WebP konverter
Konvertujte PNG u znatno manji WebP u pregledaču, uz očuvanu providnost — podesiv kvalitet, grupno, bez slanja fajlova.
Alati za slike
Crno-bela slika
Pretvorite JPG, PNG i WebP slike u crno-bele u pregledaču, uz klizač jačine za delimičnu desaturaciju. Besplatno i potpuno lokalno.
Alati za slike
Okretanje slike
Preslikajte JPG, PNG i WebP slike vodoravno ili uspravno u pregledaču i preuzmite rezultat. Potpuno lokalno — ništa se ne šalje.
Alati za slike
Promena veličine slike
Promenite veličinu JPG, PNG i WebP slika na tačne dimenzije u pregledaču — zaključajte odnos stranica ili slobodno zadajte širinu i visinu. Ništa se ne šalje.
Alati za slike