Kodiranje slike u Base64 / Data URI

Podatkovni URI je URL koji izravno sadrži podatke o resursu umjesto pokažite na udaljenu datoteku. Njegov opći oblik je podaci:[][;base64],. Za sliku, obično imamo data:image/png;base64,iVBORw0KGgo…. Resurs je ugrađen u HTML, CSS ili JSON i učitava se bez ikakvog dodatnog HTTP zahtjeva.

Uobičajene motivacije:

• Smanjite HTTP zahtjeve: integrirajte ikonu izravno u CSS umjesto da je učitavate uz dokument
• Potpis e-pošte s ugrađenom slikom: nema rizika da slika bude blokirana kao udaljeni sadržaj
• Web-komponente/web-radnici: gdje učitavanje vanjskog resursa često predstavlja problem opsega ili CORS-a
• Lokalna pohrana (LocalStorage, IndexedDB, baza podataka): serijalizirajte minijaturu avatara u niz
• Samostalni isječci: samostalna HTML datoteka, bez vanjskih ovisnosti

Neki konkretni konteksti u kojima je Base64 kodiranje slike opravdano:

• SVG ugrađene ikone u CSS-u (background-image: url("data:image/svg+xml;base64,…"))
• Personalizirani potpisi e-pošte s logotipom
• Brza izrada prototipova samostalne stranice koja se dijeli e-poštom
• Samostalne web komponente (jedna datoteka koja se može postaviti)
• Generacija PDF-a na strani preglednika (jsPDF) s ugrađenim minijaturama
• Testni podaci (mokovi) koji sadrže slike

Tri koraka:

1. Učitajte svoju sliku (PNG, JPG, SVG, WebP, GIF) putem padajuće zone
2. Kliknite na "Kodiraj"
3. Kopirajte dobiveni podatkovni URI pomoću namjenskog gumba i zalijepite ga u svoj HTML, CSS ili JSON

Base64 nije srebrni metak. Neke mjere opreza:

• Base64 povećava veličinu za ~33%: 4 ASCII znaka za svaka 3 binarna bajta
• Kodirane slike preglednik ne sprema zasebno u predmemoriju; ponovno se učitavaju s HTML/CSS-om koji ih sadrži
• Preferirano za slike manje od 10 KB; osim toga, vanjska datoteka općenito je učinkovitija
• Za SVG dajte prednost URL kodiranju (putem encodeURIComponent) umjesto Base64: rezultat je kraći i ostaje raščlanjiv poput teksta
• Moderni alati za izradu (Webpack, Vite) automatiziraju izbor Base64 naspram Base64. vanjske datoteke putem podesive veličine praga

HTML:

CSS:

.icon {
  pozadina: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") bez ponavljanja;
  širina: 16px;
  visina: 16px;
}

JSON (lažni podaci):

{
  "korisnik": {
    "ime": "Adrien",
    "avatar": "podaci:slika/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Koja je razlika između Base64 i binarnog?

Binarno predstavlja neobrađene bajtove datoteke. Base64 je kodiranje koje transformira te bajtove u 64 ispisiva ASCII znaka (A-Z, a-z, 0-9, +, /). Tekstualni konteksti (HTML, JSON, e-pošta) ne ne može nositi binarno; Base64 rješava ovaj problem po cijenu povećanja veličine od 33%.

Zašto je moj Data URI tako dugačak?

Slika od 30 KB u binarnom obliku postaje ~40 KB u Base64. I svaki znak je ASCII bajt, pa da, lanac je dug. To je svojstveno kodiranju. Za velike slike čuvajte vanjsku datoteku.

Podržavaju li svi preglednici podatkovne URI-je?

Da, bez iznimke među modernim preglednicima (Chrome, Firefox, Safari, Edge od IE8 čak). Ograničenja povijesni: IE8 ograničen na 32 KB. Nema više briga danas na webu.

Kako dekodirati Data URI?

Naš Base64 dekoder slike radi suprotno: zalijepite URI podataka, pripremite slikovnu datoteku (PNG, JPG, SVG, WebP) za učitavanje ili spremanje.

Base64 naspram URL kodiranja za SVG?

Za SVG, URL kodiranje (s encodeURIComponent) proizvodi kraći niz od Base64 i ostaje čitljiv kao tekst. Ovo je preporučeni izbor u CSS-u kada integrirate SVG inline. Za binarne formate (PNG, JPG), Base64 ostaje obavezan.

Utječe li Base64 kodiranje na kvalitetu slike?

Ne. Kodiranje je bez gubitaka: to je binarni bajt ↔ bijekcija niza Base64. pikseli originalni su strogo očuvani. Samo se veličina prenesene datoteke povećava za 33%.