Zakoduj obraz do Base64 / Data URI

Data URI to URL, który zawiera bezpośrednio dane zasobu zamiast wskazywać na zdalny plik. Jego ogólna forma to data:[<mediatype>][;base64],<data>. Dla obrazu zazwyczaj mamy data:image/png;base64,iVBORw0KGgo…. Zasób jest osadzony w HTML, CSS lub JSON i ładowany bez żadnego dodatkowego żądania HTTP.

Typowe motywacje:

• Zmniejszyć liczbę żądań HTTP: osadzić ikonę bezpośrednio w CSS zamiast ładować ją dodatkowo z dokumentem
• Sygnatura e-mail z obrazem inline: brak ryzyka, że obraz zostanie zablokowany jako zdalna treść
• Web Components / Web Workers: gdzie ładowanie zewnętrznego zasobu często stwarza problem zakresu lub CORS
• Storage lokalny (LocalStorage, IndexedDB, baza danych): serializacja miniatury awatara w postaci ciągu
• Self-contained snippets: plik HTML, który jest samowystarczalny, bez zewnętrznej zależności

Kilka konkretnych kontekstów, w których kodowanie Base64 obrazu jest uzasadnione:

• Ikony SVG inline w CSS (background-image: url("data:image/svg+xml;base64,…"))
• Spersonalizowane sygnatury e-mail z logo
• Szybkie prototypowanie samodzielnej strony udostępnianej przez e-mail
• Samodzielne web components (jeden plik do wdrożenia)
• Generowanie PDF po stronie przeglądarki (jsPDF) z osadzonymi miniaturami
• Dane testowe (mocki), które zawierają obrazy

Trzy kroki:

1. Prześlij swój obraz (PNG, JPG, SVG, WebP, GIF) przez obszar upuszczania
2. Kliknij „Koduj"
3. Skopiuj wynikowy Data URI dedykowanym przyciskiem i wklej go w swój HTML, CSS lub JSON

Base64 nie jest cudownym rozwiązaniem. Kilka uwag:

• Base64 zwiększa rozmiar o ~33%: 4 znaki ASCII na każde 3 bajty binarne
• Zakodowane obrazy nie są buforowane oddzielnie przez przeglądarkę, są przeładowywane wraz z zawierającym je HTML/CSS
• Preferowane dla obrazów poniżej 10 KB, powyżej zewnętrzny plik jest zazwyczaj bardziej wydajny
• Dla SVG preferuj kodowanie URL (przez encodeURIComponent) zamiast Base64: wynik jest krótszy i pozostaje parsowalny jako tekst
• Nowoczesne narzędzia do budowania (Webpack, Vite) automatyzują wybór Base64 vs zewnętrzny plik za pomocą konfigurowalnego progu rozmiaru

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…"
  }
}

Jaka jest różnica między Base64 a binarnym?

Binarne reprezentuje surowe bajty pliku. Base64 to kodowanie, które przekształca te bajty w 64 drukowalne znaki ASCII (A-Z, a-z, 0-9, +, /). Konteksty tekstowe (HTML, JSON, e-mail) nie mogą przenosić danych binarnych, Base64 rozwiązuje ten problem kosztem zwiększenia rozmiaru o 33%.

Dlaczego moja Data URI jest tak długa?

Obraz 30 KB w postaci binarnej staje się ~40 KB w Base64. A każdy znak to bajt ASCII, więc tak, ciąg jest długi. To jest właściwość kodowania. Dla dużych obrazów zachowaj zewnętrzny plik.

Czy wszystkie przeglądarki wspierają Data URI?

Tak, bez wyjątku wśród nowoczesnych przeglądarek (Chrome, Firefox, Safari, Edge a nawet IE8). Ograniczenia historyczne: IE8 miał limit 32 KB. Dziś nie ma już problemu w sieci.

Jak odkodować Data URI?

Nasz dekoder obrazów Base64 wykonuje operację odwrotną: wklej swoje Data URI, otrzymaj plik obrazu (PNG, JPG, SVG, WebP) gotowy do przesłania lub zapisania.

Base64 vs kodowanie URL dla SVG?

Dla SVG kodowanie URL (przez encodeURIComponent) produkuje krótszy ciąg niż Base64 i pozostaje czytelne jako tekst. To zalecany wybór w CSS przy osadzaniu SVG inline. Dla formatów binarnych (PNG, JPG) Base64 pozostaje obowiązkowe.

Czy kodowanie Base64 wpływa na jakość obrazu?

Nie. Kodowanie jest bezstratne: jest to bijekcja bajt binarny ↔ ciąg Base64. Oryginalne piksele są ściśle zachowane. Tylko rozmiar transportowanego pliku rośnie o 33%.