Imagine în Base64
Base64 codifică octeți binari de imagine ca text ASCII pe care îl poți lipi în HTML img src, CSS url() sau JSON. Util pentru pictograme minuscule, URI-uri de date din prototipuri și API-uri care așteaptă imagini în linie.
Cum se codifică o imagine în Base64
1. Încărcați fișierul imagine (păstrează-l mic — sub ~100 KB este practic).
2. Copiază șirul Base64 generat sau adresa URL a datelor complete.
3. Lipește în HTML, CSS sau configurație.
4. Testați în mediul țintă — unii clienți de e-mail limitează URI-urile de date.
Exemple de codificare
Logo în linie în e-mail HTML
O siglă PNG de 2 KB ca data:image/png;base64,... evită blocarea imaginilor externe în căsuțele de e-mail stricte ale companiei.
Fundal CSS pentru prototip
Lipește o textură Base64 într-o demonstrație cu un singur fișier fără găzduire de active.
Dispozitiv de testare API
Includeți un mic JPEG Base64 într-un corp de solicitare JSON pentru testarea punctului final de încărcare a imaginii.
Când imaginile Base64 ajută
• Pentru active foarte mici în care o solicitare HTTP costă mai mult decât supraîncărcarea de dimensiune inline.
• Pentru prototipuri HTML offline cu un singur fișier.
• Când găzduirea externă nu este disponibilă în medii blocate.
Base64 în bugetele de performanță
Inlineing elimină călătoriile dus-întors, dar împiedică stocarea în cache a imaginii în browser separat. Folosește pentru pictograme minuscule critice deasupra pliului cu moderație; încărcați leneș mediile mari în mod normal.
Întrebări frecvente
De ce este Base64 mai mare decât fișierul?
Codificarea folosește 4 caractere pentru fiecare 3 octeți - aproximativ 33% supraîncărcare plus prefixul URL al datelor.
Ce este o adresă URL de date?
Format: data:image/png;base64,iVBORw0KG... — tip MIME plus încărcare utilă codificată.
Dimensiunea maximă pentru e-mail?
Menține creșterea totală a mesajelor sub 10–20 KB; mulți clienți se sufocă cu imagini uriașe în linie.
Decodați înapoi în fișier?
Folosește instrumentul de codificare/decodor Base64 pentru a inversa ASCII în binar dacă este necesar.
Sunt imaginile încărcate?
Nu — FileReader citește local în browser.