Fără încărcare, 100% local, fără cont

Convertor imagine → Base64

Codați orice imagine într-un URI de date Base64, sau lipiți un URI de date pentru a-l decoda înapoi într-o imagine. Copiați rezultatul sau luați fragmentul CSS url(). Nimic nu părăsește dispozitivul dumneavoastră.

Cum funcționează Imagine în Base64

Image to Base64 citește fișierul dumneavoastră de imagine și îl encodează ca un URI de date Base64 pe care îl puteți încorpora direct în HTML, CSS sau JSON fără a fi nevoie de o cerere de fișier separată. Conversia folosește API-ul FileReader în browserul dumneavoastră; niciun octet din imaginea dumneavoastră nu este trimis către un server. De asemenea, puteți lipi un șir Base64 înapoi pentru a-l decoda și a previzualiza imaginea, totul local.

Un URI de date Base64 este cu aproximativ 33% mai mare decât originalul binar, deoarece fiecare grup de trei octeți se extinde la patru caractere ASCII. Această creștere de dimensiune este compromisul așteptat pentru confortul încorporării unei imagini într-un document sau foaie de stil. Unealta vă arată atât șirul raw Base64, cât și un fragment gata de utilizat cu tag HTML img și un fragment CSS background-image pentru lipire rapidă în proiectul dumneavoastră.

Scris de Bastien Sulyan

Cum se folosește Imagine în Base64, pas cu pas

  1. Trasați un fișier de imagine în zona de încărcare sau dați clic pentru a naviga. Formate acceptate: JPEG, PNG, WebP, GIF, SVG.
  2. URI-ul de date Base64 apare imediat în câmpul de ieșire.
  3. Copiați șirul raw Base64, sau folosiți fragmentul pre-formatat cu tag HTML img sau fragmentul CSS background-image.
  4. Pentru a decoda, lipește un șir Base64 în câmpul de intrare și treci în modul decodificare pentru a previzualiza imaginea.
  5. Da clic pe butonul de copiere de lângă orice fragment pentru a-l copia în clipboard.

Cazuri de utilizare frecvente

  • Un dezvoltator front-end încorporează o pictograma mică ca URI de date într-un fișier CSS pentru a elimina o cerere HTTP suplimentară.
  • Un dezvoltator încorporează un spinner de încărcare mic ca atribut src Base64, astfel încât imaginea placeholder este disponibilă înainte ca pachetul JavaScript să se incarce.
  • Un inginer QA copiază Base64-ul unei imagini de test pentru a-l lipi direct într-un payload JSON pentru un test API.
  • Un constructor de șabloane email încorporează un logo de semnătură ca URI de date Base64 deoarece unii clienti de email blochează cererile de imagini externe.

Întrebări frecvente

De ce ieșirea Base64 este cu aproximativ o treime mai mare decât fișierul meu original?

Encodarea Base64 reprezintă fiecare trei octeti binari ca patru caractere ASCII (un raport de 4/3). O imagine de 100 KB în binar devine aproximativ 133 KB ca șir Base64. Aceasta este inerentă schemei de encodare, nu o limitare a uneltei.

Conținutul imaginii este transmis către un server în timpul encodarii?

Nu. API-ul FileReader citește fișierul binar de pe discul local și transmite rezultatul direct funcției de encodare JavaScript din interiorul tabului de browser. Datele imaginii nu părăsesc dispozitivul dumneavoastră.

Pot folosi ieșirea URI de date în orice context HTML sau CSS?

Da. Un URI de date care începe cu data:image/jpeg;base64, urmat de șirul encodat poate fi folosit ca atribut src al unui tag img sau ca valoarea url() într-o proprietate CSS background-image. Toate browserele moderne suportă URI-uri de date. URI-urile de date foarte mari pot incetini redarea paginii, deci încorporarea este de obicei rezervata pentru imagini mici de câteva kilobytes.

Suportă unealta GIF-uri animate?

Unealta encodează conținutul binar complet al oricarui fișier pe care îl furnizezi, inclusiv GIF-uri animate. URI-ul de date rezultat, când este folosit ca src al unui tag img, va reda animația în browserele care suportă animația GIF.

Cum fac în sens invers și decodific un șir Base64 înapoi la o imagine?

Treci unealta în modul decodificare, lipește șirul Base64 (cu sau fără prefixul data:), iar unealta îl va decoda și va oferi imaginea binara ca descărcare, afisand și o previzualizare.

Instrumente conexe

Păstrează totul local, explorează instrumente complementare.

Toate instrumentele de imagine