Jak przekonwertować obraz na Base64
- Upuść obraz na pole, kliknij, aby go wybrać, lub wklej go ze schowka skrótem Ctrl+V.
- Wybierz format wyjściowy: data URI, czysty Base64, HTML, CSS, Markdown lub JSON.
- Kliknij Kopiuj i wklej kod do pliku HTML, arkusza CSS, szablonu e-maila lub żądania API.
Kiedy warto osadzać obrazy jako Base64?
Obrazy osadzone w Base64 oszczędzają jedno żądanie HTTP, co przydaje się w przypadku małych ikon, podpisów e-mail, jednoplikowych dokumentów HTML i danych przesyłanych do API. Ponieważ Base64 jest o około 33% większy od oryginalnego pliku i nie może być osobno buforowany, zdjęcia oraz wszystko, co waży więcej niż kilka kilobajtów, lepiej zostawić jako zwykłe pliki graficzne.
Formaty wyjściowe w skrócie
- Data URI –
data:image/png;base64,…do atrybutówsrci CSS. - Tylko Base64 – czysty ciąg dla API i baz danych.
- HTML / CSS / Markdown – kompletne fragmenty kodu do bezpośredniego wklejenia.
- JSON – nazwa pliku, typ MIME i dane w jednym obiekcie.
Najczęściej zadawane pytania
Czy konwersja do Base64 zwiększa rozmiar obrazu?
Tak, mniej więcej o jedną trzecią. Plik PNG o rozmiarze 30 KB zamienia się w około 40 KB tekstu Base64. Jeśli rozmiar ma znaczenie, najpierw skompresuj lub zmniejsz obraz.
Jakie formaty obrazów mogę konwertować?
Każdy format, który potrafi otworzyć Twoja przeglądarka: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF i inne. Właściwy typ MIME jest automatycznie dodawany do data URI.
Jak użyć obrazu Base64 w CSS?
Wybierz format CSS i wklej wynik do swojej reguły, na przykład .logo { background-image: url("data:image/png;base64,…"); }.