Zamień obraz na Base64

Konwerter obrazu do Base64 online – osadzaj grafiki bezpośrednio w HTML i CSS

Konwerter obrazu do Base64 (ang. image to Base64) zamienia plik JPG, PNG, WebP, GIF, SVG, BMP, ICO lub AVIF na ciąg znaków Base64 oraz gotowy Data URI, który wklejasz bezpośrednio w kod HTML, arkusz stylów CSS albo plik JSON. Obraz wgrywasz z dysku lub podajesz jego adres URL. Kod Base64 jest o ok. 33% większy od pliku, dlatego ta technika opłaca się głównie przy małych grafikach (do ok. 10 KB), gdzie oszczędzasz osobne żądanie HTTP.

Dlaczego konwertować obraz do Base64

Im mniej zapytań HTTP przeglądarka musi wykonać, tym szybciej użytkownik zobaczy gotową stronę. To szczególnie ważne na urządzeniach mobilnych oraz przy słabszym połączeniu, gdzie każde dodatkowe żądanie powoduje dodatkowe opóźnienie.

Jednym ze sposobów optymalizacji jest ograniczenie liczby osobnych plików graficznych. Małe ikony, logotyp w nagłówku lub tło niewielkiego elementu interfejsu można po prostu osadzić bezpośrednio w HTML lub CSS jako kod Base64. Dzięki temu przeglądarka nie musi wysyłać osobnego żądania, aby pobrać taki zasób.

Narzędzie generuje gotowy kod, który możesz wkleić bezpośrednio do dokumentu HTML lub arkusza stylów CSS. Nie musisz ręcznie pisać prefiksu Data URI ani ustalać typu MIME: format jest rozpoznawany z zawartości pliku, a nie z jego rozszerzenia, więc PNG zapisany jako „.jpg” dostanie poprawny nagłówek image/png.

Czym jest obraz Base64 i schemat Data URI

Obraz zakodowany Base64 to zwykły plik graficzny zamieniony na ciąg znaków tekstowych. Base64 używa 64 znaków (A–Z, a–z, 0–9, + i /): każde 3 bajty pliku zapisuje jako 4 znaki, a końcówkę dopełnia znakiem =. Ten ciąg umieszcza się w tak zwanym schemacie Data URI, który pozwala osadzić dane w linii bezpośrednio w kodzie strony. Przeglądarka wyświetla taki obraz tak samo, jak gdyby pobrała go z osobnego pliku na serwerze.

Schemat Data URI ma prostą strukturę. Po data: wskazuje typ danych, potem sposób kodowania ;base64,, a na końcu zawiera właściwy ciąg Base64. Całość mieści się w jednym adresie, który można wykorzystać na przykład w atrybucie src znacznika <img> lub jako wartość background-image w CSS.

Jak działa nasz konwerter obrazu do Base64

Narzędzie przyjmuje obraz z urządzenia albo z adresu URL, zamienia go na Base64 i od razu dokłada nagłówek Data URI z właściwym typem MIME, abyś mógł wkleić wynik w kod bez dodatkowych zmian. Po konwersji widzisz rozmiar pliku i rozmiar kodu Base64 w KB, narzut w procentach, liczbę znaków Data URI, wymiary obrazu w pikselach i wykryty format. Plik do 10 KB zostaje oznaczony jako dobry do osadzenia, większy – jako kandydat na zwykły plik.

Jak zamienić obraz na Base64 krok po kroku

1. Przygotuj obraz, który chcesz osadzić w HTML lub CSS, na przykład małe logo, ikonę lub tło przycisku. Jeśli waży więcej niż kilka KB, najpierw go zmniejsz lub skompresuj.
2. Wybierz źródło: „Plik z urządzenia” albo „Adres URL obrazu”.
3. Przeciągnij plik do pola lub kliknij „Wybierz plik”. Przy adresie URL wklej bezpośredni link do pliku graficznego, a nie do strony, na której obraz jest wyświetlany.
4. Kliknij „Zamień na Base64”.
5. Wybierz postać wyniku (Data URI, sam Base64, HTML <img> lub CSS tło) i skopiuj kod przyciskiem „Kopiuj”.
6. Wklej kod w odpowiednie miejsce w projekcie i zapisz zmiany w pliku HTML, CSS lub w konfiguracji komponentu.

Zmiana postaci wyniku nie wymaga ponownej konwersji. Dla plików do 1 MB pod wynikiem pojawia się podgląd obrazu zbudowany z wygenerowanego kodu: jeśli obraz się wyświetla, Data URI jest poprawny.

Przykład: ikona PNG o rozmiarze 2 345 B

Plik ma 2 345 bajtów, czyli 2,3 KB. Base64 potrzebuje 4 × ⌈2345 / 3⌉ = 4 × 782 = 3 128 znaków (3,1 KB), więc narzut wynosi 33,4%. Data URI z prefiksem data:image/png;base64, ma 3 128 + 22 = 3 150 znaków. Ikona mieści się w progu 10 KB, więc narzędzie oznaczy ją jako dobrą do osadzenia w kodzie.

Przykłady użycia obrazu Base64 w HTML i CSS

Obraz zakodowany w Base64 wstawiasz w te same miejsca co zwykły plik, tylko bez trzymania osobnego zasobu na serwerze.

Obraz Base64 w znaczniku IMG

Zamiast wskazywać ścieżkę do pliku na serwerze, wstawiasz Data URI jako wartość atrybutu src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo firmy" width="64" height="64">

Przeglądarka potraktuje taki zapis tak samo jak klasyczny obrazek. Różnica polega na tym, że nie musi wykonywać osobnego zapytania HTTP po plik, ponieważ dane są już osadzone w kodzie strony. Narzędzie wstawia pusty atrybut alt="": uzupełnij go opisem obrazu, chyba że grafika jest czysto dekoracyjna.

Obraz Base64 w CSS jako tło

Bardzo popularne jest także osadzanie obrazów w Base64 bezpośrednio w arkuszu stylów jako tło przycisku, ikonka w menu czy element ozdobny:

.btn-with-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
background-repeat: no-repeat;
background-position: left center;
padding-left: 32px;
}

Taki zapis pozwala przenieść cały komponent w jednym pliku CSS. Styl, marginesy i grafika ikony znajdują się w jednym miejscu, co ułatwia przenoszenie komponentu między projektami.

Korzyści dla wydajności i czasu ładowania strony

Główna motywacja stosowania obrazów Base64 to zmniejszenie liczby żądań HTTP. Każdy osobny plik graficzny to osobne żądanie, nagłówki, odpowiedź serwera i miejsce w kolejce pobierania. Przy wielu małych ikonach ten koszt staje się odczuwalny.

Osadzając obraz w kodzie HTML lub CSS, sprawiasz, że przeglądarka pobiera go razem z plikiem źródłowym. Ceną jest brak osobnego cache: obraz osadzony w HTML jest pobierany od nowa przy każdym wczytaniu tej strony, a ten sam kod wklejony na kilku podstronach przesyła się kilka razy.

Kiedy warto, a kiedy lepiej nie używać Base64

Konwersja obrazu do Base64 opłaca się w konkretnych sytuacjach. Zawsze dobrze jest świadomie wybrać, kiedy zastosować osadzenie w kodzie, a kiedy pozostać przy klasycznych plikach graficznych na serwerze.

Dobry moment na użycie Base64

• Małe obrazki i ikonki, zwykle do ok. 10 KB.
• Zasoby, które rzadko się zmieniają.
• Komponenty osadzane, na przykład widgety wklejane na obce strony.
• Elementy interfejsu ładowane wcześnie: logo, ikony w nawigacji, przyciski w nagłówku.

Kiedy zostać przy klasycznym pliku

• Duże zdjęcia, bannery i grafiki ważące kilkaset kilobajtów lub więcej.
• Obrazy, które często się zmieniają i są podmieniane bez modyfikacji kodu strony.
• Grafiki używane na wielu podstronach, które lepiej pobrać raz i trzymać w cache przeglądarki.
• Strony z polityką CSP, która nie dopuszcza data: w img-src, oraz e-maile – część klientów poczty blokuje obrazy w Data URI.

W praktyce najlepsza jest mieszanka. Małe grafiki i ikony można osadzać jako Base64, a duże zdjęcia i multimedia nadal serwować jako osobne pliki, które lepiej współpracują z cache przeglądarki oraz CDN.