Opis
To narzędzie zamienia binarne dane obrazu na ciąg Base64, który możesz wkleić do HTML, CSS, JSON, wiadomości e-mail albo testowych danych aplikacji. Przydaje się wtedy, gdy obraz ma być zapisany jako tekst, na przykład w konfiguracji, szablonie lub polu bazy danych. Obsługuje popularne formaty obrazów, o ile przeglądarka potrafi je odczytać. Wynikiem może być sam Base64 albo pełny adres data URL z prefiksem MIME, np. data:image/png;base64,... .
Zastosowania
- Logo w nagłówku newsletteraZamień małe logo PNG lub SVG na tekst, aby osadzić je w szablonie wiadomości bez zewnętrznego hostingu.
- Obraz w pliku JSONPrzygotuj payload JSON z małą ikoną lub miniaturą jako Base64 do testu API albo lokalnej próbki.
- Favicon do demo bez plikówPrzekształć kompaktową faviconę w data URL dla prototypu, w którym nie chcesz zarządzać dodatkowymi plikami.
- Przekazanie obrazu jako tekstSkopiuj zakodowany obraz do notatki, zgłoszenia lub wiadomości, gdy odbiorca potrzebuje dokładnych danych obrazu.
Jak to dziala
- 1
Wczytaj obraz albo wklej jego data URL.
- 2
Przeglądarka odczyta plik lokalnie.
- 3
Dane obrazu zostaną zakodowane do Base64.
- 4
Skopiuj Base64 lub data URL i użyj tam, gdzie trzeba.
Przyklady
Logo PNG do HTML
Wejscie: obraz: PNG 48×48, ciemne logo na przezroczystym tle
Wynik: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABX...
Użyj pełnego data URL w tagu img albo jako background-image w CSS.
Miniatura JPEG produktu
Wejscie: obraz: JPEG 320×240, zdjęcie produktu na zewnątrz
Wynik: /9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTEhIVFhUXFxgYGBgYGBcYFxgXFxgYGBgYFxgYHSggGBolGxgXITEhJSkrLi4uGB8zODMtNygtLisBCgoKDg0OGhAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLv/AABEIAJ8BPgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgcBAv/EADsQAAIBAgQDBgQEBgIDAAAAAAECAwQRAAUSITFBBhMiUWEUMnGBkaGxwdHwFCNS8RQjYnKC0eEV/8QAGgEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EACIRAQEAAgICAQUAAAAAAAAAAAABAhEDIRIxBEFRImETcf/aAAwDAQACEQMRAD8A9z2...
Zachowaj sam Base64, jeśli system docelowy sam doda prefiks MIME.
Mała ikona SVG do prototypu
Wejscie: obraz: ikona SVG 24×24 w formie data URL
Wynik: PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+...
Przydatne, gdy potrzebujesz tekstowej wersji małej ikony.
FAQ
Czy muszę zachować prefiks MIME?
Tylko wtedy, gdy potrzebujesz pełnego data URL. Jeśli wystarczy sam zakodowany fragment, skopiuj wyłącznie część Base64.
Dlaczego wynik jest dłuższy niż nazwa pliku?
Base64 zapisuje dane binarne jako tekst, więc ciąg zwykle zajmuje więcej miejsca niż oryginalny plik obrazu.
Czy mogę wkleić dowolny data URL obrazu?
Tak, jeśli jest poprawny i przeglądarka potrafi zdekodować osadzone dane obrazu.
Co jeśli obraz jest bardzo duży?
Narzędzie nadal go zakoduje, ale wynik może być nieporęczny i trudny do użycia w kodzie lub wiadomości.
Dlaczego wynik nie zaczyna się od data:image/... ?
Zwykle oznacza to, że skopiowano tylko sam Base64. Jeśli potrzebny jest pełny data URL, dopisz prefiks MIME ręcznie.