Jak korzystać z narzędzia
- 1.Aby zakodować obraz, zostaw wybrany tryb „Obraz na Base64” i upuść obraz na stronę, wklej go ze schowka albo kliknij „Wybierz obraz”.
- 2.Skopiuj potrzebną wersję: data URI do
srcluburl(), sam Base64 dla API albo gotowy znacznik HTML lub regułę CSS. Dla plików SVG dostępny jest też krótszy data URI w kodowaniu URL. - 3.Aby zdekodować dane, przełącz na „Base64 na obraz” i wklej data URI lub czysty Base64. Zadziała też kod CSS lub HTML, który go zawiera.
- 4.Sprawdź podgląd, format i rozmiar, a potem kliknij „Pobierz”, aby zapisać obraz z właściwym rozszerzeniem.
Czym jest data URI
Data URI umieszcza cały plik w adresie URL, dzięki czemu strona może wyświetlić obraz bez osobnego pobierania. Składnia to data:[<media type>][;base64],<data>, np. data:image/png;base64,iVBORw0KGgo…. Typ MIME mówi przeglądarce, czym są dane, a ;base64 oznacza, że dane są zakodowane w Base64, a nie zapisane jako tekst w kodowaniu URL.
Base64 zapisuje każde 3 bajty pliku jako 4 zwykłe znaki ASCII, dlatego wynik jest o około jedną trzecią większy od obrazu. Gzip i Brotli odzyskują część tej różnicy podczas przesyłania strony, ale przeglądarka i tak musi zdekodować cały tekst.
Kiedy osadzanie obrazu pomaga, a kiedy szkodzi
Osadzanie opłaca się przy bardzo małych obrazach: ikonach, drobnych tłach i placeholderach o rozmiarze kilobajta lub dwóch, gdy osobne żądanie kosztowałoby więcej niż same bajty. Przydaje się też w jednoplikowych raportach HTML, danych testowych oraz w API i dokumentach JSON, które oczekują obrazu w postaci tekstu.
Przy większych obrazach zwykle spowalnia strony. Obrazu nie da się osobno zapisać w pamięci podręcznej, więc jest pobierany od nowa z każdą stroną lub arkuszem stylów, który go zawiera; w CSS opóźnia też renderowanie, bo przeglądarka czeka na cały arkusz. W HTTP/2 dodatkowe żądania są tanie, więc powyżej kilku kilobajtów lepszym wyborem jest zwykły plik obrazu.
E-mail to szczególny przypadek: Gmail i Outlook nie wyświetlają obrazów w data URI, dlatego newslettery powinny linkować obrazy umieszczone na serwerze albo dołączać je jako załączniki inline (CID).
Krótszy data URI dla SVG
SVG to tekst, więc w ogóle nie potrzebuje Base64. Data URI SVG w kodowaniu URL, taki jak data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, jest zwykle o 15–25% krótszy, lepiej się kompresuje i pozostaje czytelny w Twoim CSS.
Zakodować trzeba tylko kilka znaków: <, > i przede wszystkim # (zapisywany jako %23), który w przeciwnym razie kończyłby adres URL, np. w kolorze fill='%23f00'. To narzędzie dodatkowo usuwa zbędne białe znaki i zamienia cudzysłowy na apostrofy, aby URI zmieścił się w url("…") bez dalszego kodowania.
Pytania i odpowiedzi
Czy mój obraz jest gdzieś wysyłany?
Nie. Obraz jest odczytywany i kodowany przez Twoją przeglądarkę na Twoim urządzeniu, a wklejony Base64 jest tam także dekodowany. Nic nie trafia do nestoo ani nikogo innego.
Dlaczego wersja Base64 jest większa niż plik obrazu?
Base64 zapisuje każde 3 bajty jako 4 znaki z 64-znakowego alfabetu, więc tekst jest o około 33% większy od pliku, a do tego dochodzi krótki prefiks data:image/…;base64,. To cena za przechowywanie danych binarnych jako zwykłego tekstu.
Jak użyć data URI w HTML, CSS, Markdown lub JSON?
W HTML wstaw go do atrybutu src obrazu: <img src="data:image/png;base64,…" alt="">. W CSS użyj go w url(): background-image: url("data:…");. W JSON to zwykły ciąg znaków; wiele API oczekuje tylko części Base64, bez prefiksu data:. Markdown w zasadzie akceptuje , ale GitHub i wiele innych serwisów usuwa obrazy w data URI, więc tam podlinkuj obraz umieszczony na serwerze.
Jak duży może być obraz?
Narzędzie koduje obrazy do 20 MB, a przeglądarki potrafią wyświetlać data URI o rozmiarze kilku megabajtów. W praktyce ograniczaj osadzane obrazy do kilku kilobajtów: większe rozdmuchują HTML lub CSS i nie mogą być osobno przechowywane w pamięci podręcznej.
Jak zamienić data URI z powrotem na plik obrazu?
Przełącz na „Base64 na obraz” i wklej data URI lub sam Base64. Narzędzie rozpoznaje rzeczywisty format na podstawie samych danych, wyświetla podgląd i zapisuje plik z właściwym rozszerzeniem, nawet jeśli URI deklarował inny typ.