Podgląd obrazu i informacje
Surowy ciąg Base64
Base64-encoded data (no prefix)
Data URI
Complete data URI (data:image/...;base64,...)
Tło CSS
CSS background-image property
Znacznik obrazu HTML
Ready-to-use <img> element
Konwertuj dowolny obraz do ciągu zakodowanego w Base64 natychmiast. Uzyskaj data URI, fragmenty tła CSS oraz znaczniki <img> HTML — wszystko przetwarzane w przeglądarce bez przesyłania na serwer.
Kodowanie Base64 to tylko jeden element układanki. OneStepToRank zapewnia pełny zestaw narzędzi i inteligencję optymalizacyjną, aby zdominować wyniki lokalnego wyszukiwania.
Rozpocznij za darmoBase64 encoding to metoda konwertowania danych binarnych na zwykły tekst ASCII przy użyciu 64 znaków drukowalnych. Zastosowane do obrazów, daje ciąg tekstowy reprezentujący cały plik obrazu. Ten ciąg może być osadzony bezpośrednio w HTML za pomocą znacznika <img> i atrybutu src, w CSS poprzez właściwość background-image lub w ładunkach JSON dla komunikacji API. Kodowanie używa znaków A-Z, a-z, 0-9, + i /, a = służy jako wypełnienie. Każde 3 bajty danych binarnych generują 4 znaki wyjściowe Base64, co sprawia, że zakodowany wynik jest około 33 % większy niż oryginalny plik.
data URI (Uniform Resource Identifier) osadza zawartość pliku bezpośrednio w samym adresie URL przy użyciu składni data:[mediatype];base64,[data]. Dla obrazów oznacza to możliwość umieszczenia całego obrazu w HTML lub CSS bez potrzeby osobnego pliku na serwerze. Eliminuje to żądanie HTTP, co może być korzystne dla małych obrazów, takich jak ikony, logotypy i sprite’y UI. Wadą jest zwiększenie rozmiaru dokumentu HTML lub CSS, brak możliwości niezależnego buforowania w przeglądarce oraz fakt, że data URI są około jedną trzecią większe niż oryginalny plik binarny. Zasadniczo obrazy poniżej 5‑10 KB są dobrymi kandydatami do wbudowania, natomiast większe powinny być serwowane jako osobne pliki z odpowiednimi nagłówkami buforowania dla lepszej wydajności.
Choć eliminacja żądań HTTP może przyspieszyć początkowe renderowanie strony, osadzanie dużych obrazów jako ciągów Base64 ma kilka wad. Plik HTML lub CSS staje się znacznie większy, co opóźnia pobieranie dokumentu. Przeglądarka nie może buforować obrazu oddzielnie od zawierającego go dokumentu. Dodatkowo narzut 33 % rozmiaru oznacza większy transfer danych w porównaniu z bezpośrednim serwowaniem pliku binarnego. Dla krytycznych ścieżek renderowania małe obrazy wbudowane mogą skrócić postrzegany czas ładowania, eliminując blokujące żądania. Jednak dla obrazów treściowych, banerów hero czy dowolnych obrazów powyżej kilku kilobajtów, lepszą wydajność zapewnia serwowanie zoptymalizowanych plików binarnych z buforowaniem CDN i nowoczesnymi formatami, takimi jak WebP lub AVIF. Stosuj kodowanie Base64 strategicznie dla małych, często używanych zasobów, które korzystają z mniejszej liczby żądań.