Obraz na Base64
Zamień obraz w ciąg Base64, który wkleisz prosto do HTML, CSS, JSON-a albo szablonu e-maila.
lub upuść go tutaj · do 50 MB, za darmo
Większe pliki? Pro konwertuje pliki do 500 MBPonad darmowe limity: pobieranie odblokujesz już od 1,99 €.
Przetwarzanie…
Twój plik jest gotowy
Za darmo · Bez rejestracji · Bez znaku wodnego · Twoje pliki nie opuszczają urządzenia
Obraz na Base64 w 3 krokach
- Wybierz obraz albo przeciągnij go na pole.
- Wybierz wynik: Data URI, sam Base64, CSS albo znacznik HTML.
- Kliknij Konwertuj na Base64, a potem skopiuj kod lub pobierz go jako plik .txt.
Kiedy osadzać obraz jako Base64
Base64 zapisuje bajty pliku jako zwykły tekst, więc obraz może znaleźć się wewnątrz strony HTML, arkusza stylów, danych JSON albo podpisu e-mail, zamiast być osobnym plikiem. Przy małych ikonach i logo oszczędza to jedno żądanie, a w niektórych API i polach formularzy, które przyjmują wyłącznie tekst, to jedyny sposób na przesłanie obrazu.
Ceną jest rozmiar: tekst Base64 jest o około jedną trzecią większy od obrazu i nie może być osobno zapisany w pamięci podręcznej. Używaj go dla obrazów o wielkości kilku kilobajtów, a zdjęcia trzymaj jako zwykłe pliki. Aby kod był jak najkrótszy, najpierw skompresuj obraz albo użyj SVG dla logo i ikon, które dodatkowo pozostają ostre w każdym rozmiarze.
Najczęściej zadawane pytania
Jak zamienić obraz na Base64?
Wybierz tutaj obraz, ustaw format wyniku i kliknij Konwertuj na Base64. Kod pojawi się w polu z przyciskiem Kopiuj, a możesz go też pobrać jako plik .txt. Działa z obrazami JPG, PNG, GIF, WebP, SVG, AVIF, BMP i ICO.
Czym jest data URI?
Data URI to tekst Base64 z krótkim przedrostkiem, który mówi przeglądarce, jaki to typ pliku, na przykład data:image/png;base64, a po nim kod. Możesz go użyć wszędzie tam, gdzie oczekiwany jest adres URL obrazu, na przykład w atrybucie src znacznika img albo w CSS url().
Jak użyć Base64 w HTML lub CSS?
Wybierz „Znacznik HTML <img>”, aby dostać gotowy element img, albo „CSS background-image”, aby dostać wiersz do wklejenia w regułę stylu. Oba zawierają pełny data URI, więc obraz wyświetla się bez osobnego pliku.
Dlaczego Base64 jest większy niż obraz?
Base64 używa 4 znaków tekstu na każde 3 bajty, więc kod jest o około 33 procent większy od pliku. Przy małych ikonach to nie problem, ale przy zdjęciach rozmiar szybko rośnie. Jeśli kod jest za długi, najpierw skompresuj obraz lub zmniejsz jego wymiary.
Czy mój obraz jest wysyłany na serwer?
Nie. Obraz jest odczytywany i kodowany w Twojej przeglądarce, na Twoim własnym urządzeniu, więc nigdy do nas nie trafia i nie jest nigdzie przechowywany. Po załadowaniu strony narzędzie działa dalej nawet bez połączenia z internetem.