Pretvarač Slika ⇔ Base64

Pretvorite između slikovnih datoteka i Base64 (Data URI)

Kodirajte slike u Base64 Data URI ili dekodirajte Base64 nizove natrag u slike. Podržava formate PNG, JPEG, GIF i WebP. Jednostavna operacija povlačenjem i ispuštanjem. Sva obrada se obavlja u Vašem pregledniku – podaci se ne pohranjuju niti prenose.

Kako Koristiti

Pretvorite u 3 jednostavna koraka:

Odaberite način pretvorbe
Odaberite karticu 'Slika → Base64' ili 'Base64 → Slika'.
Unesite svoje podatke
Za način slike: povucite i ispustite ili odaberite slikovnu datoteku. Za Base64 način: zalijepite svoj Base64 niz.
Koristite rezultat
Rezultati pretvorbe prikazuju se odmah. Kopirajte Base64 gumbom za kopiranje ili preuzmite sliku gumbom za preuzimanje.

Zaštita Privatnosti: Sva obrada se obavlja u Vašem pregledniku. Podaci o slici nikada se ne šalju niti pohranjuju na bilo kojem poslužitelju.

Pretvarač Slika ⇔ Base64

📁

Povucite i ispustite slikovnu datoteku ovdje, ili kliknite za odabir

Podržani formati: PNG, JPEG, GIF, WebP, SVG (preporučuje se max. 10MB)

Pregled

Naziv datoteke

Veličina datoteke

Dimenzije

Format

Base64 Kodirani Rezultat (Data URI)

Unesite Base64 niz

Pregled

Praktični Slučajevi Korištenja za Base64 Pretvorbu Slika

Base64 kodiranje slika se obično koristi u web razvoju u sljedeće svrhe:

1. Ugradnja slika u HTML ili CSS

Ugradite male ikone ili logotip slike izravno u HTML <img> oznake ili CSS background-image svojstva kako biste smanjili HTTP zahtjeve i poboljšali brzinu učitavanja stranice. Posebno korisno kao alternativa fontovima ikona.

2. Alternativa CSS spriteovima

Umjesto kombiniranja više malih slika u jednu 'CSS sprite' datoteku, kodirajte svaku sliku u Base64 i ugradite je u CSS radi lakšeg upravljanja.

3. Ugradnja slika u HTML e-poštu

Neki klijenti e-pošte blokiraju učitavanje vanjskih slika. Ugradnja važnih slika (kao što su logotipi) kao Data URIs osigurava njihovo pouzdano prikazivanje.

4. Prijenos slika putem REST API-ja

Prilikom slanja/primanja podataka o slici putem JSON API-ja, Base64 kodiranje omogućuje rukovanje binarnim podacima kao tekstualnim formatom. Prenesite slike u jednostavnom JSON formatu bez višedijelne komunikacije.

5. Izvanmrežne aplikacije

U Progressive Web Apps (PWA) ili Electron aplikacijama, ugradnja Base64-kodiranih slika u HTML osigurava pouzdano prikazivanje slika čak i u izvanmrežnim okruženjima.

6. Razvoj mobilnih aplikacija

Korištenje Base64-kodiranih slika u višeplatformskim okvirima kao što su React Native, Ionic i Flutter objedinjuje rukovanje slikama na svim platformama.

Što je Data URI? Razumijevanje Mehanizma

Data URI (koji se također naziva Data URL) je URL shema koja omogućuje ugradnju malih datoteka poput slika ili fontova izravno u HTML ili CSS. Pretvara sadržaj datoteke u tekst pomoću Base64 kodiranja i predstavlja ga kao dio URL-a.

Data URI Format

Data URI je napisan u sljedećem formatu:

data:[MIME tip];[metoda kodiranja],[kodirani podaci]

Primjer (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Prednosti Data URI-ja

Smanjeni HTTP zahtjevi: Nema potrebe za vanjskim zahtjevima datoteka, što poboljšava brzinu učitavanja stranice
Pakiranje jedne datoteke: Kompletan u jednoj HTML ili CSS datoteci za jednostavnu distribuciju i upravljanje
Pouzdano prikazivanje: Izbjegava prekinute ili blokirane vanjske veze slika

Nedostaci Data URI-ja

Povećana veličina datoteke: Base64 kodiranje povećava veličinu podataka za približno 33%
Niža učinkovitost predmemorije: Ažuriranje slika zahtijeva ponovno preuzimanje cijele HTML/CSS datoteke
Smanjena čitljivost: Izvorni kod postaje dugačak i teže ga je održavati

Najbolje Prakse

Kada koristiti Data URI

✅ Male ikone ili logotipi (preporučuje se 5KB ili manje)
✅ Često korištene ukrasne slike (pozadine gumba itd.)
✅ Važne slike koje zahtijevaju izvanmrežnu podršku

Kada NE koristiti Data URI

❌ Velike slike (10KB+): Veličina datoteke postaje prevelika
❌ Slike koje se često ažuriraju: Loša učinkovitost predmemorije
❌ Slike koje se ponovno koriste na više stranica: Duplicirano ugrađivanje na svakoj stranici

⚠️ Općenito, preporučuje se korištenje Data URI za male slike (5KB ili manje). Za veće slike, standardne <img> oznake ili učitavanje vanjskih datoteka su učinkovitije.

Često Postavljana Pitanja (FAQ)

Koji formati slika su podržani?

Mogu se pretvoriti svi formati slika koje podržava preglednik, uključujući PNG, JPEG, GIF, WebP i SVG. PNG i JPEG su najčešći.

Postoji li ograničenje veličine za pretvorbu slika?

Ne postoji tehničko ograničenje, ali radi performansi i memorije preglednika, preporučuje se 10MB ili manje. Praktično, slike od 5KB ili manje su najučinkovitije.

Koliko se povećava veličina slike kod Base64 kodiranja?

Base64 kodiranje povećava veličinu datoteke na približno 133% izvornika (oko 33% povećanja). Na primjer, slika od 9KB postaje Base64 niz od približno 12KB.

Mogu li se prozirne PNG slike Base64 pretvoriti?

Da, prozirne PNG slike mogu se pretvoriti takve kakve jesu. Podaci o prozirnosti se čuvaju, tako da se ispravno prikazuju s prozirnošću kada su ugrađene u HTML ili CSS.

Kako ugraditi Base64 niz u HTML?

Zalijepite izravno u src atribut <img> oznake. Primjer: <img src="data:image/png;base64,iVBORw0KG...">

Kako ga koristiti kao background-image u CSS-u?

Zalijepite unutar funkcije url() ovako: background-image: url('data:image/png;base64,iVBORw0KG...');

Pohranjuju li se učitane slike na poslužitelju?

Ne, sva obrada se obavlja u Vašem pregledniku. Podaci o slici se nikada ne prenose na poslužitelj.

Mogu li ovo koristiti za komercijalne web stranice?

Da, ovaj je alat potpuno besplatan i može se slobodno koristiti za komercijalne i nekomercijalne svrhe.