Kodirati sliko v Base64 / Data URI

URI podatkov je URL, ki neposredno vsebuje podatke vira namesto kažejo na oddaljeno datoteko. Njegova splošna oblika je podatki:[][;base64],. Za sliko imamo običajno data:image/png;base64,iVBORw0KGgo…. Vir je vdelan v HTML, CSS ali JSON in naložen brez dodatne zahteve HTTP.

Pogoste motivacije:

• Zmanjšajte zahteve HTTP: integrirajte ikono neposredno v CSS, namesto da bi jo naložili poleg dokumenta
• E-poštni podpis z vgrajeno sliko: ni nevarnosti, da bi bila slika blokirana kot oddaljena vsebina
• Spletne komponente / spletni delavci: kjer nalaganje zunanjega vira pogosto predstavlja težavo obsega ali CORS
• Lokalna shramba (LocalStorage, IndexedDB, zbirka podatkov): serializirajte sličico avatarja v niz
• Samostojni izrezki: samostojna datoteka HTML brez zunanjih odvisnosti

Nekateri konkretni konteksti, kjer je kodiranje slik Base64 upravičeno:

• Ikone SVG v vrstici v CSS (background-image: url("data:image/svg+xml;base64,…"))
• Prilagojeni e-poštni podpisi z logotipom
• Hitra izdelava prototipov samostojne strani v skupni rabi po e-pošti
• Samostojne spletne komponente (ena datoteka, ki jo je mogoče namestiti)
• Ustvarjanje PDF-ja na strani brskalnika (jsPDF) z vdelanimi sličicami
• Preskusni podatki (posnetki), ki vsebujejo slike

Trije koraki:

1. Naložite svojo sliko (PNG, JPG, SVG, WebP, GIF) prek spustnega območja
2. Kliknite »Kodiraj«
3. Kopirajte dobljeni podatkovni URI z namenskim gumbom in ga prilepite v svoj HTML, CSS ali JSON

Base64 ni srebrna krogla. Nekateri previdnostni ukrepi:

• Base64 poveča velikost za ~33 %: 4 znaki ASCII za vsake 3 binarne bajte
• Kodiranih slik brskalnik ne shranjuje posebej; znova se naložijo s HTML/CSS, ki jih vsebuje
• Prednost za slike, manjše od 10 KB; Poleg tega je zunanja datoteka na splošno bolj učinkovita
• Za SVG raje kodirajte URL (prek encodeURIComponent) namesto Base64: rezultat je krajši in ga je mogoče razčleniti kot besedilo
• Sodobna orodja za gradnjo (Webpack, Vite) avtomatizirajo izbiro Base64 proti Base64. zunanjo datoteko prek nastavljive velikosti praga

HTML:

CSS:

.icon {
  ozadje: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") brez ponavljanja;
  širina: 16px;
  višina: 16px;
}

JSON (lažni podatki):

{
  "uporabnik": {
    "ime": "Adrien",
    “avatar”: “data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…”
  }
}

Kakšna je razlika med Base64 in binarnim?

Binarno predstavlja neobdelane bajte datoteke. Base64 je kodiranje, ki preoblikuje te bajte v 64 natisljivih znakih ASCII (A-Z, a-z, 0-9, +, /). Besedilni konteksti (HTML, JSON, e-pošta) ne ne more prenašati dvojiškega zapisa; Base64 rešuje to težavo na račun 33-odstotnega povečanja velikosti.

Zakaj je moj podatkovni URI tako dolg?

30 KB velika slika v binarni obliki postane ~40 KB v Base64. In vsak znak je bajt ASCII, tako da, veriga je dolga. To je neločljivo povezano s kodiranjem. Za velike slike shranite zunanjo datoteko.

Ali vsi brskalniki podpirajo podatkovne URI?

Da, brez izjeme med sodobnimi brskalniki (Chrome, Firefox, Safari, Edge od IE8 celo). Omejitve zgodovinski: IE8 omejen na 32 KB. Danes na spletu ni več skrbi.

Kako dekodirati podatkovni URI?

Naš dekodirnik slik Base64 deluje ravno nasprotno: prilepite svoj podatkovni URI, pripravite slikovno datoteko (PNG, JPG, SVG, WebP) za nalaganje ali shranjevanje.

Base64 v primerjavi s kodiranjem URL za SVG?

Za SVG kodiranje URL (s encodeURIComponent) ustvari krajši niz kot Base64 in ostane berljiv kot besedilo. To je priporočena izbira v CSS pri integraciji SVG v vrstico. Za binarne formate (PNG, JPG) ostaja Base64 obvezen.

Ali kodiranje Base64 vpliva na kakovost slike?

Ne. Kodiranje je brez izgub: je binarni bajt ↔ bijekcija niza Base64. Piksli originalni so strogo ohranjeni. Samo velikost prenesene datoteke se poveča za 33 %.