Utilia
Kategorije ▾
Jezik: hr ▾

Pretvarač slike u Base64

Pretvori sliku u Base64 ili data URI s gotovim CSS-om i HTML-om ili dekodiraj Base64 natrag u sliku s pregledom. Besplatno, privatno, bez slanja.

Slika → Base64

Base64 → slika

Kako pretvoriti sliku u Base64

  1. U odjeljku Slika → Base64 povuci sliku na zonu za ispuštanje ili klikni na nju za odabir (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Odaberi Izlaz: Data URI (data:image/png;base64,…), Samo Base64, CSS background-image ili HTML oznaka , koja nosi i širinu i visinu slike.
  3. Klikni Kopiraj ili Preuzmi kao .txt za duge rezultate.

Redak ispod zone za ispuštanje daje stvarni format (pročitan iz bajtova datoteke, a ne iz njezina imena), dimenzije, veličinu datoteke i duljinu data URI-ja.

Kako pretvoriti Base64 natrag u sliku

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

Vrsta se provjerava „magičnim bajtovima“, potpisom na početku svakog slikovnog formata (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 na to upozori i koristi stvarnu vrstu. Sve što nije prepoznata slika odbija se, a ograničenje je 20 MB podataka slike.

Kako radi Base64

Base64 pretvara svaka 3 bajta datoteke u 4 ispisiva znaka iz skupa 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:<type>;base64,, da preglednik zna kako ga pročitati.

Kada slike ugraditi kao data URI

Data URI-ji su praktični za:

  • male ikone, logotipe i pozadine u CSS-u, radi uštede jednog zahtjeva;
  • HTML e-poštu i jednodatotečne HTML dokumente koji moraju raditi bez vanjskih datoteka;
  • JSON API-je i konfiguracijske datoteke koje mogu nositi samo tekst.

Slabo odgovaraju velikim fotografijama. Tekst je za trećinu veći od datoteke, ne može se zasebno spremati u predmemoriju odvojeno od stranice ili stilskog predloška koji ga sadrži i odgađa iscrtavanje. Iznad otprilike 10 do 100 KB obična slikovna datoteka poslužena s dobrim predmemoriranjem 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 poslužitelj.

Česta pitanja

Je li Base64 način sažimanja ili zaštite slike?

Ne. Base64 podatke povećava za oko 33 %, a svatko ih može dekodirati. On samo pretvara binarne podatke u tekst koji može putovati ondje gdje binarni podaci ne mogu.

Zašto se moj data URI ne prikazuje?

Najčešći uzroci su nedostajuća ili pogrešna vrsta u zaglavlju, razmaci ili navodnici zalijepljeni usred niza ili skraćeni tekst. Zalijepi ga u Base64 → slika: alat javlja nevaljane znakove i provjerava stvarnu vrstu.

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 za URL (data:image/svg+xml,%3Csvg…) često kraći; ovaj alat dekodira oba oblika.

Radi li s HEIC ili AVIF slikama?

Kodiranje radi sa svakom slikovnom datotekom. Pregled se pojavljuje samo ako tvoj preglednik može prikazati format, ali Base64 tekst i preuzimanje uvijek su ispravni.

Postoji li ograničenje veličine?

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

Slični alati