Slika u Base64 – data URI, CSS i HTML

Pretvarač slike u Base64

Pretvori sliku u Base64 ili data URI s CSS i HTML kodom spremnim za lijepljenje, ili dekodiraj Base64 u sliku s pregledom. Besplatno, bez slanja.

Slika → Base64

Prevuci sliku ovdje ili klikni da je odabereš Tvoje datoteke ostaju na tvom uređaju: nikada se ne šalju.

Izlaz Rezultat

Base64 → slika

Base64 tekst ili data URI

Kako pretvoriti sliku u Base64

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

Red ispod polja za unos prikazuje stvarni format (očitan iz bajtova datoteke, a ne iz njenog naziva), dimenzije, veličinu datoteke i dužinu data URI-ja.

Kako pretvoriti Base64 nazad u sliku

U odjeljku Base64 → slika zalijepi tekst u Base64 tekst ili data URI. Možeš zalijepiti goli Base64 niz, cijeli data URI, pa čak i cijelo CSS pravilo ili oznaku <img>: data URI se pronalazi unutar njih. Prijelomi redova i razmaci se zanemaruju, a radi i Base64 prilagođen URL-ovima (sa - i _).
Klikni Dekodiraj sliku. Pojavljuju se pregled, tip, dimenzije i veličina.
Klikni Preuzmi sliku da je spremiš s ispravnom ekstenzijom datoteke.

Tip se provjerava pomoću „magičnih bajtova“, potpisa na početku svakog formata slike (na primjer 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 te upozori 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 datoteke u 4 znaka koji se mogu ispisati, uzeta iz A–Z, a–z, 0–9, + i /, uz = kao dopunu na kraju. Zato je kodirani tekst oko 33 % veći od datoteke: ikona od 30 KB postaje oko 40 KB teksta. Data URI dodaje kratko zaglavlje data:<tip>;base64, da preglednik zna kako da ga pročita.

Kada slike ugraditi kao data URI

Data URI su zgodni za:

male ikone, logotipe i pozadine u CSS-u, da se uštedi jedan zahtjev;
HTML e-poruke i HTML dokumente u jednoj datoteci koji moraju raditi bez vanjskih datoteka;
JSON API-je i konfiguracijske datoteke koje mogu nositi samo tekst.

Loše su rješenje za velike fotografije. Tekst je za trećinu veći od datoteke, ne može se keširati odvojeno od stranice ili stilskog dokumenta koji ga sadrži i usporava prikaz. Iznad otprilike 10 do 100 KB obična datoteka slike uz dobro keširanje obično pobjeđuje, zbog čega alat prikazuje podsjetnik za slike veće od 100 KB.

Sve radi u tvom pregledniku: slike i zalijepljeni tekst nikada se ne šalju na server.

Česta pitanja

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

Ne. Base64 povećava podatke za oko 33 %, a svako ih može dekodirati. On samo pretvara binarne podatke u tekst koji može putovati tamo gdje 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 zalijepljeni usred niza, ili skraćen tekst. Zalijepi ga u Base64 → slika: alat prijavljuje nevaljane znakove i provjerava stvarni tip.

Mogu li SVG koristiti kao data URI?

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

Radi li s HEIC ili AVIF slikama?

Kodiranje radi s bilo kojom datotekom slike. Pregled se pojavljuje samo ako tvoj preglednik može prikazati taj format, ali Base64 tekst i preuzimanje su uvijek ispravni.

Postoji li ograničenje veličine?

Da, 20 MB podataka slike, u oba smjera. Duži nizovi usporavaju preglednike i rijetko su dobra ideja na web stranici.