Przeciągnij obraz lub kliknij, aby zaznaczyć
PNG, JPEG, GIF, WebP, SVG, BMP
Jak to działa
Konwertuje obraz na ciąg Base64 w postaci Data URI (data:image/…;base64,…), który możesz osadzić bezpośrednio w HTML lub CSS bez osobnego pliku ani dodatkowego żądania HTTP.
Wynik zajmuje około 33% więcej niż oryginalny plik, dlatego najlepiej zarezerwować go dla małych obrazów: ikon, logo, wzorów lub placeholderów.
W trybie dekodowania przyjmuje ciąg Base64 lub pełny Data URI, wykrywa typ obrazu na podstawie pierwszych bajtów i pokazuje pobieralny podgląd.
Przykłady
logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Prefiks data:image/png;base64, wskazuje typ. Każdy zakodowany PNG zaczyna się od iVBORw0KGgo, co odpowiada jego sygnaturze pliku.background-image: url("data:image/png;base64,iVBORw0KGgo…");Data URI można użyć bez zmian wewnątrz reguły CSS, aby osadzić obraz bez zewnętrznego pliku.Przypadki użycia
- Osadzać małe ikony lub logo w CSS/HTML za pomocą data URI, unikając dodatkowych żądań.
- Zapisać obraz wewnątrz JSON, pliku konfiguracyjnego lub bazy danych.
- Wysyłać obrazy przez API lub e-maile (MIME), które akceptują tylko tekst.
- Odzyskać i podejrzeć obraz z ciągu Base64 lub Data URI.
Najczęstsze pytania
Czy warto konwertować wszystkie obrazy na Base64?
Nie. Zwiększa rozmiar o około 33%, a przeglądarka nie może buforować obrazu osobno. Jest idealne dla małych obrazów, ale w przypadku dużych prawie zawsze lepszy jest osobny plik.
Jakie formaty obrazów obsługuje?
Dowolny przy kodowaniu (PNG, JPEG, GIF, WebP, BMP, SVG). Przy dekodowaniu automatycznie wykrywa typ na podstawie pierwszych bajtów pliku.
Dlaczego mój Data URI jest tak długi?
Ponieważ Base64 reprezentuje każde 3 bajty 4 znakami, tekst rośnie o około 33% w stosunku do oryginalnego pliku binarnego. To normalne, zwłaszcza przy obrazach.
Czy mój obraz jest wysyłany na serwer?
Nie. Obraz jest odczytywany i kodowany w całości w przeglądarce; nigdy nie opuszcza Twojego komputera.