Obraz do Base64
Base64 koduje bajty obrazu jako tekst ASCII do wklejenia w src img HTML, url() CSS lub payload JSON. Przydatne dla drobnych ikon, data URI w prototypach i API oczekujących inline obrazów. Kodowanie odbywa się lokalnie — nic nie jest wysyłane.
Jak zakodować obraz do Base64
1. Prześlij plik obrazu (trzymaj mały — poniżej ~100 KB ma sens).
2. Skopiuj wygenerowany ciąg Base64 lub pełny data URL.
3. Wklej do HTML, CSS lub konfiguracji.
4. Przetestuj w docelowym środowisku — niektóre klienty e-mail limitują data URI.
Przykłady kodowania
Inline logo w HTML e-mail
Logo PNG 2 KB jako data:image/png;base64,... omija blokowanie zewnętrznych obrazów w restrykcyjnych skrzynkach firmowych.
Tło CSS w prototypie
Wklej teksturę Base64 do jednoplikowego demo bez hostingu zasobów.
Fixtura testowa API
Dołącz mały JPEG Base64 w body JSON do testu endpointu uploadu obrazu.
Kiedy Base64 obrazów pomaga
• Dla bardzo małych zasobów, gdzie jedno żądanie HTTP kosztuje więcej niż narzut inline.
• Dla offline prototypów HTML w jednym pliku.
• Gdy zewnętrzny hosting jest niedostępny w zamkniętym środowisku.
Kiedy unikać Base64 obrazów
• Dla dużych zdjęć — Base64 rośnie ~33% i puchnie cache HTML.
• Gdy dostępne są CDN i responsywne srcset.
• Gdy wiele klientów e-mail blokuje data URI — użyj hostowanych obrazów.
Base64 w budżetach wydajności
Inline usuwa round-tripy, ale blokuje osobne cache obrazu w przeglądarce. Używaj oszczędnie dla krytycznych drobnych ikon above the fold; duże media lazy-loaduj normalnie.
Dziwactwa klientów e-mail
Outlook desktop historycznie ograniczał data URI. Testuj Gmail, Apple Mail i Outlook przed poleganiem na inline obrazach w kampaniach.
Bezpieczeństwo
Nie wklejaj niezaufanego Base64 do stron bez zrozumienia treści — to nadal wykonywalny kontekst w HTML. Koduj tylko własne zasoby.
Najczęstsze pytania
Dlaczego Base64 jest większy niż plik?
Kodowanie używa 4 znaków na 3 bajty — ok. 33% narzutu plus prefix data URL.
Co to data URL?
Format: data:image/png;base64,iVBORw0KG... — typ MIME plus zakodowany payload.
Maks. rozmiar dla e-mail?
Trzymaj wzrost wiadomości poniżej 10–20 KB; wiele klientów ma problem z ogromnymi inline obrazami.
Dekodować z powrotem do pliku?
Użyj enkodera/dekodera Base64, by odwrócić ASCII na binarny, jeśli trzeba.
Czy obrazy są wysyłane?
Nie — FileReader czyta lokalnie w przeglądarce.
SVG do Base64?
Możliwe dla małego tekstu SVG; formaty rastrowe są częstsze dla data URI.