Konwertuj Obraz na Base64 Online
Koduj obrazy do tekstu Base64 dla CSS, HTML i wiadomości e-mail.
Do czego służy
Od obrazu do tekstu jednym kliknięciem
Bez serwera
Kodowanie odbywa się w Twojej przeglądarce. Twoje obrazy nigdy nie opuszczają Twojego urządzenia.
Gotowe do wklejenia
Generuje kompletny data URI z prefiksem MIME, gotowy do użycia w HTML, CSS lub JSON.
Wszystkie formaty
Obsługuje JPG, PNG, WebP, GIF, SVG i każdy obraz, który przeglądarka potrafi wyświetlić.
Natychmiastowo
Kodowanie jest natychmiastowe — bez przesyłania plików i oczekiwania na odpowiedź serwera.
Jak to działa
Trzy kroki, żadnych komplikacji
Prześlij swój obraz
Przeciągnij lub wybierz obraz, który chcesz zakodować. Obsługuje formaty JPG, PNG, WebP, GIF i SVG.
Skopiuj ciąg Base64
Narzędzie automatycznie generuje ciąg Base64 i kompletny data URI gotowy do użycia.
Użyj go w swoim kodzie
Wklej data URI do atrybutu src znacznika img, do właściwości CSS background-image lub do treści wiadomości HTML.
FAQ
Masz pytania?
Base64 to schemat kodowania, który konwertuje dane binarne (np. zawartość pliku obrazu) na ciąg drukowalnych znaków ASCII. Pozwala to na osadzanie danych obrazu bezpośrednio w formatach tekstowych, takich jak HTML, CSS lub JSON, bez odwoływania się do pliku zewnętrznego.
Base64 jest przydatny dla małych ikon w CSS (eliminuje dodatkowe żądanie HTTP), dla obrazów w wiadomościach HTML (niektórzy klienci poczty blokują zewnętrzne obrazy) oraz dla obrazów w aplikacjach działających bez serwera lub w środowiskach offline. Nie jest zalecany dla dużych obrazów.
Base64 reprezentuje każdą grupę 3 bajtów danych binarnych za pomocą 4 znaków ASCII. Oznacza to, że każdy bajt oryginalnych danych wymaga 1,33 bajtu w Base64, co skutkuje wzrostem rozmiaru o około 33%. Dodatkowo przeglądarka musi zdekodować ciąg przed renderowaniem, co generuje koszt obliczeniowy.
Data URI ma format: data:[typ MIME];base64,[dane]. Na przykład dla PNG: data:image/png;base64,iVBORw0KGgo... Typ MIME informuje przeglądarkę, jak interpretować dane. Popularne typy to image/png, image/jpeg, image/webp i image/svg+xml.
Negatywny dla dużych obrazów. Obrazy Base64 nie mogą być oddzielnie buforowane przez przeglądarkę (buforowane są razem z HTML lub CSS, które je zawierają), zwiększają rozmiar dokumentu i wymagają dekodowania. Dla małych obrazów, takich jak ikony (poniżej 2–3 KB), korzyść z wyeliminowania żądania HTTP może zrównoważyć koszt zwiększonego rozmiaru.
Base64 w tworzeniu stron: kiedy używać i kiedy unikać
Kodowanie Base64 zostało zdefiniowane w RFC 2045 (1996) jako część standardu MIME dla wiadomości e-mail. W kontekście internetowym mechanizm data URI (RFC 2397, 1998) umożliwił osadzanie danych obrazów bezpośrednio w HTML i CSS. Było to szczególnie cenne we wczesnych latach protokołu HTTP/1.1, gdy każde żądanie HTTP wiązało się ze znacznym kosztem opóźnienia, a zmniejszanie liczby żądań było kluczową techniką optymalizacji.
Wraz z pojawieniem się HTTP/2 i HTTP/3, które umożliwiają multipleksowanie żądań, argument wydajnościowy przemawiający za Base64 znacznie osłabł. Niemniej Base64 pozostaje standardowym rozwiązaniem do osadzania obrazów w wiadomościach HTML (gdzie klienci poczty często blokują zewnętrzne obrazy), w dokumentach PDF generowanych przez kod oraz w aplikacjach, które muszą być całkowicie samowystarczalne (jak aplikacje Electron lub lokalnie zapisane strony).
Praktyczna zasada w nowoczesnym tworzeniu stron: używaj Base64 dla obrazów mniejszych niż 2–3 KB (ikony SVG, loadery, małe elementy dekoracyjne), gdzie oszczędność na żądaniu HTTP uzasadnia narzut rozmiaru. Dla większych obrazów używaj plików odwoływanych przez URL i korzystaj z buforowania przeglądarki oraz multipleksowania HTTP/2.