Postępuj zgodnie z tym przykładem, a następnie dostosuj te same ustawienia do własnego obrazu. Otwórz Konwerter obrazu na Base64.
Wybierz obraz i wyświetl podgląd jego tożsamości
Otwórz konwerter obrazu na Base64. Wybierz obraz lub wypróbuj próbkę. Przykład używa 512 × 512 pikseli favicon-orbit.png, który zawiera 202,491 bajtów. Edytor pokazuje obraz nad jego kodem, dzięki czemu możesz potwierdzić, że wybrano właściwy zasób.
PNG, JPG, WebP, GIF, BMP i AVIF są obsługiwane, jeśli Twoja przeglądarka potrafi je zdekodować do podglądu. Maksymalny rozmiar pliku to 25 MB, z limitami 60 megapikseli i 16,000 pikseli na bok. Znaczniki SVG nie są akceptowane przez ten konwerter rastrowy.
Narzędzie odczytuje oryginalne bajty pliku. Nie używa podglądu do przebudowy obrazu, zmiany jego rozmiaru ani ponownej kompresji. Istniejące metadane i animacja GIF są zatem zachowane w zakodowanych danych.
Przed kodowaniem użyj Zmień rozmiar obrazu lub Kompresor obrazu, jeśli potrzebujesz mniejszego zasobu. Samo Base64 nie zmniejsza rozmiaru obrazu.
Wybierz reprezentację, której oczekuje Twój projekt
Otwórz Ustawienia i wybierz obraz HTML w sekcji Format kodu dla tego przykładu. Wynikiem jest tag img zawierający adres URL danych Base64. Atrybut alt jest początkowo pusty; napisz przydatny tekst alternatywny, gdy obraz przekazuje informacje.
Adres URL danych zaczyna się od prefiksu takiego jak data:image/png;base64, po którym następują zakodowane dane. Plain Base64 zawiera tylko dane. Tło CSS zawija adres URL danych w deklarację background-image. Te reprezentacje służą różnym celom, więc skopiuj formę wymaganą przez Twoją aplikację, zamiast zmieniać tylko nazwę pliku.
Panel kodu aktualizuje się natychmiast po zmianie formatu kodu. Ikona kopiowania kopiuje bieżącą reprezentację i wyświetla potwierdzenie skopiowania. Gdy dostęp do schowka jest zablokowany, kod zostaje zaznaczony do ręcznego skopiowania.
Pełny znacznik HTML img nie jest tym samym, co adres URL danych. Używaj tylko wartości src, gdy pole wymaga adresu URL.
Przykład w tym przewodniku
Wypróbuj przykład: favicon-orbit.png, 512 × 512 px, 202,491 bajtów. Wybierz obraz HTML w formacie kodu. Wybierz Start i pobierz favicon-orbit-base64.txt.
- Oryginał PNG
- 512 × 512 px · 202,491 bajtów
- Wyjście tekstowe HTML
- 270,029 bajtów
- Kodowanie
- Oryginalne bajty; brak ponownej kompresji
Pobierz kod i sprawdź jego rozmiar
Wybierz Start, a następnie Pobierz. Przykład zapisuje favicon-orbit-base64.txt zawierający kod obrazu HTML. Jego 270,029 bajtów to więcej niż 202,491 bajtów źródła. Porównanie w artykule pokazuje rzeczywisty początek pobranego tekstu, skrócony tylko dla czytelności.
Base64 zazwyczaj konwertuje trzy bajty źródłowe na cztery znaki tekstowe, dodając około jedną trzecią przed małym opakowaniem. Osadzenie małej ikony może uczynić dokument samowystarczalnym, ale umieszczanie dużych ciągów obrazów wewnątrz HTML lub CSS również powiększa ten dokument i uniemożliwia buforowanie obrazu jako osobnego pliku.
Kodowanie to nie szyfrowanie. Każdy, kto posiada pełny ciąg Base64, może odzyskać oryginalny obraz. Traktuj kod z taką samą ostrożnością jak źródło, jeśli zawiera on prywatne informacje.
Skrócony fragment w tym artykule ma charakter objaśniający. Użyj pełnego pobranego TXT lub skopiuj pełny kod z narzędzia.
Często zadawane pytania
Czy kodowanie zmniejszy jakość obrazu?
Nie. Kodowanie zachowuje oryginalne bajty. Nie zmienia rozmiaru, nie kompresuje ani nie przerysowuje obrazu.
Dlaczego ciąg Base64 jest większy niż obraz?
Base64 reprezentuje trzy bajty wejściowe za pomocą czterech znaków tekstowych, więc zazwyczaj dodaje około jednej trzeciej przed opakowaniem lub prefiksem.
Czy animacje GIF są zachowywane?
Kodowanie zachowuje oryginalne bajty GIF, w tym animację. Podgląd może pokazywać nieruchomą klatkę, podczas gdy zakodowane dane zachowują wszystkie klatki.
Czy Base64 jest bezpieczny dla poufnych obrazów?
Base64 nie jest szyfrowaniem. Zachowaj ciąg znaków w tajemnicy, jeśli obraz źródłowy jest prywatny. Sam konwerter przetwarza go lokalnie w Twojej przeglądarce.
Zmień odpowiedni obraz w odpowiedni kod.
Wypróbuj przykład lub użyj własnego pliku i sprawdź wynik przed udostępnieniem.
