CodeKitHubCe este acest instrument?
Base64 este un mod de a reprezenta date binare — cum ar fi octeții bruți ai unei imagini — ca text simplu, folosind doar litere, cifre și câteva simboluri. Fiind text simplu, o imagine codată Base64 poate fi înglobată direct în HTML, CSS sau JSON în loc să fie referențiată ca fișier separat.
Un „URL data” înfășoară acest text Base64 cu un prefix scurt (data:image/png;base64,) care spune browserului ce tip de fișier este, astfel încât poate fi introdus direct într-un atribut src sau url() și randat fără nicio cerere suplimentară.
De ce să-l folosești?
- Obții ambele formate deodată — URL-ul data complet pentru HTML/CSS și Base64 brut (fără prefix) pentru înglobare în JSON sau fișiere de configurare.
- Fără drum dus-întors la server: elimină o cerere HTTP pentru pictograme mici, avatare sau imagini inline.
- Păstrează exact octeții originali ai fișierului — fără reencodare sau pierdere de calitate, spre deosebire de instrumentele care decodează și re-salvează imaginea.
- Afișează diferența de dimensiune, ca să știi ce sacrifici pentru comoditate.
- Privat: fișierul este citit local cu API-ul FileReader al browserului și nu părăsește niciodată dispozitivul tău.
Cum se folosește
- Dă clic pe zona de încărcare sau trage un fișier imagine peste ea.
- Copiază URL-ul data complet dacă lipești într-un <img src> sau background-image CSS.
- Copiază Base64 brut (fără prefix data:) dacă înglobezi valoarea în JSON, YAML sau alt format de configurare care deja cunoaște tipul fișierului.
- Verifică nota despre dimensiune — textul Base64 este cu aproximativ o treime mai mare decât fișierul binar original.
Exemplu
Intrare
Un fișier pictogramă PNG de 12 KB.Rezultat
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB de text) plus același șir fără prefixul data:.Creșterea de aproximativ 33% a dimensiunii este inerentă codării Base64 (3 octeți de date binare devin 4 caractere de text) — nu este o eroare a instrumentului.
Unde este folosit fiecare format
| Format | Utilizare tipică |
|---|---|
| URL data complet | HTML <img src="...">, CSS background-image: url(...), imagini email inline |
| Base64 brut | Payload-uri API JSON, fișiere YAML/config, câmpuri BLOB din baze de date, protocoale binare personalizate |
Base64 și dimensiunea imaginii — compromisul în practică
Suplimentul de aproximativ 33% înseamnă că înglobarea Base64 este cel mai bine păstrată pentru resurse mici: o pictogramă de 2 KB devine un inofensiv ~2.7 KB de text inline, dar o fotografie de 500 KB devine ~665 KB de text stând inline în HTML-ul tău, ceea ce încetinește parsarea și nu poate fi pus separat în cache față de pagină.
Dacă înglobezi multe imagini sau imagini mai mari, cântărește beneficiul unei cereri economisite față de costul greutății paginii — și ia în considerare comprimarea mai întâi.
Întrebări frecvente
De ce este șirul Base64 mult mai mare decât fișierul meu imagine?
Base64 codează fiecare 3 octeți de date binare ca 4 caractere text, ceea ce reprezintă un supliment fix de aproximativ 33%. Pentru o imagine de 100 KB, așteaptă-te la aproximativ 133 KB de text Base64. Acest lucru este normal și inevitabil — este costul reprezentării datelor binare ca text sigur și portabil.
Care este diferența dintre URL-ul data și șirul Base64 brut?
URL-ul data include un prefix data:image/png;base64, care spune unui browser sau randator ce tip MIME decodează textul următor. Lipește URL-ul data complet într-un src HTML sau url() CSS. Base64 brut (tot ce urmează după virgulă) este ceea ce vrei atunci când un sistem cunoaște deja tipul fișierului separat — de exemplu un câmp JSON precum { "format": "png", "data": "<base64 brut>" }.
Când ar trebui să înglobez o imagine ca Base64 în loc să fac link către un fișier?
Înglobarea Base64 este utilă pentru imagini mici, reutilizate frecvent (pictograme, logo-uri, grafice UI mici) unde economisirea unei cereri HTTP depășește penalizarea de aproximativ 33% a dimensiunii, sau în contexte unde un fișier separat nu e practic, cum ar fi email-urile inline sau exporturile HTML într-un singur fișier. Pentru fotografii mari sau orice reutilizat pe multe pagini, un fișier legat normal cu cache-uire în browser este aproape întotdeauna mai bun.
Convertirea în Base64 schimbă sau comprimă imaginea mea?
Nu. Base64 este o codare text fără pierderi a exact octeților originali — nu atinge pixeli, rezoluție sau compresie. Dacă vrei un fișier mai mic, comprimă imaginea mai întâi cu un compresor de imagini, apoi convertește rezultatul comprimat în Base64.
Este imaginea mea încărcată undeva?
Nu. Fișierul este citit direct în browserul tău folosind API-ul FileReader și codat local — nu este niciodată trimis prin rețea.