Codarea unei imagini în Base64 / Data URI

O Data URI este un URL care conține direct datele unei resurse în loc să indice spre un fișier la distanță. Forma sa generală este data:[<mediatype>][;base64],<data>. Pentru o imagine, avem tipic data:image/png;base64,iVBORw0KGgo…. Resursa este încorporată în HTML, CSS sau JSON și încărcată fără nicio cerere HTTP suplimentară.

Motivațiile curente:

• Reducerea cererilor HTTP: integrarea unei icoane direct în CSS în loc de a o încărca pe lângă document
• Semnătură email cu imagine inline: niciun risc ca imaginea să fie blocată ca conținut la distanță
• Web Components / Web Workers: unde încărcarea unei resurse externe pune adesea o problemă de scope sau de CORS
• Storage local (LocalStorage, IndexedDB, bază de date): serializarea unei miniaturi de avatar într-un string
• Self-contained snippets: un fișier HTML care se autosuficie, fără dependență externă

Câteva contexte concrete unde codarea Base64 a imaginii se justifică:

• Icoane SVG inline în CSS (background-image: url("data:image/svg+xml;base64,…"))
• Semnături email personalizate cu logo
• Prototipare rapidă a unei pagini autonome partajate prin e-mail
• Web components autonome (un singur fișier deployabil)
• Generare de PDF pe partea browser (jsPDF) cu miniaturi încorporate
• Date de test (mocks) care conțin imagini

Trei etape:

1. Încarcă imaginea ta (PNG, JPG, SVG, WebP, GIF) prin zona de depunere
2. Apasă pe « Codează »
3. Copiază Data URI rezultantă cu butonul dedicat, și lipește-o în HTML, CSS sau JSON

Base64 nu este o soluție minune. Câteva precauții:

• Base64 crește dimensiunea cu ~33%: 4 caractere ASCII pentru fiecare 3 bytes binari
• Imaginile codate nu sunt puse în cache separat de către browser; sunt reîncărcate cu HTML/CSS-ul care le conține
• De preferat pentru imagini sub 10 KB; dincolo, un fișier extern este în general mai eficient
• Pentru SVG, preferă codarea URL (prin encodeURIComponent) mai degrabă decât Base64: rezultatul este mai scurt și rămâne parsabil ca text
• Instrumentele de build moderne (Webpack, Vite) automatizează alegerea Base64 vs. fișier extern printr-un prag de dimensiune configurabil

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Care este diferența dintre Base64 și binar?

Binarul reprezintă octeții bruți ai unui fișier. Base64 este o codare care transformă acești octeți în 64 de caractere ASCII imprimabile (A-Z, a-z, 0-9, +, /). Contextele text (HTML, JSON, email) nu pot transporta binar; Base64 rezolvă această problemă cu prețul unei creșteri de dimensiune de 33%.

De ce Data URI a mea este atât de lungă?

O imagine de 30 KB în binar devine ~40 KB în Base64. Și fiecare caracter este un byte ASCII, deci da, șirul este lung. Este inerent codării. Pentru imagini mari, păstrează un fișier extern.

Toate browserele suportă Data URI-urile?

Da, fără excepție printre browserele moderne (Chrome, Firefox, Safari, Edge din IE8 chiar). Limite istorice: IE8 plafona la 32 KB. Nicio grijă astăzi pe web.

Cum să decodezi o Data URI?

Decodorul nostru de imagini Base64 face operația inversă: lipește Data URI a ta, recuperează fișierul imagine (PNG, JPG, SVG, WebP) gata de încărcat sau de salvat.

Base64 vs. URL encoding pentru SVG-uri?

Pentru SVG, URL encoding (cu encodeURIComponent) produce un șir mai scurt decât Base64 și rămâne lizibil ca text. Este alegerea recomandată în CSS când integrezi un SVG inline. Pentru formatele binare (PNG, JPG), Base64 rămâne obligatoriu.

Codarea Base64 afectează calitatea imaginii?

Nu. Codarea este lossless: este o bijecție octet binar ↔ șir Base64. Pixelii de origine sunt strict păstrați. Doar dimensiunea fișierului transportat crește cu 33%.