Obraz na Base64 w kodzie strony
Mała ikona w arkuszu stylów nie potrzebuje osobnego żądania do serwera. Wystarczy zapisać ją jako tekst. Plik PNG, JPG, GIF, WebP, BMP lub SVG zamienisz tu na taki tekst, a wklejony ciąg Base64 z powrotem na plik.
Jak zamienić obraz na Base64
- Zostaw wybrany przycisk „Obraz na Base64”.
- Upuść obraz w polu albo kliknij pole i wybierz plik.
- Sprawdź podgląd i liczby.
- Kliknij „Kopiuj” przy potrzebnym polu albo „Pobierz .txt”, aby zapisać ten tekst.
Pięć wyników z jednego pliku
Po wczytaniu obrazu zobaczysz podgląd, nazwę pliku, typ MIME, rozmiar w bajtach i wymiary w pikselach. Poniżej jest pięć pól, każde z własnym przyciskiem „Kopiuj”: data URI, surowy Base64, znacznik HTML <img>, reguła CSS background-image i obraz Markdown. Nazwa pliku trafia do tekstu alternatywnego w HTML i Markdown, a cudzysłowy i nawiasy są w niej zabezpieczone. Po otwarciu strony wczytany jest mały obraz przykładowy, więc pola nie są puste.
Skąd bierze się o jedną trzecią większy tekst
Base64 zapisuje 3 bajty jako 4 znaki, więc tekst jest o ok. 33 % większy od pliku. Narzędzie pokazuje dokładną wartość dla Twojego obrazu. Powyżej 100 KB tekstu pojawia się ostrzeżenie: obraz wstawiony w kod zwiększa plik HTML lub CSS i nie trafia osobno do pamięci podręcznej. Przy zdjęciach zwykle lepszy jest zwykły plik.
Z Base64 z powrotem do pliku, limit 20 MB
Wybierz „Base64 na obraz” i wklej pełny data URI albo sam Base64. Narzędzie przyjmuje alfabet bezpieczny dla URL (- i _), brak dopełnienia = oraz znaki nowej linii. Data URI bez ;base64 jest czytany jako tekst z kodowaniem procentowym. Typ wykrywa się po pierwszych bajtach (PNG, JPEG, GIF, WebP, BMP) lub po początku <svg. Gdy data URI podaje inny typ niż bajty, narzędzie to zgłasza i ufa bajtom. Pobrany plik nazywa się image.png, image.jpg itd.
Limit to 20 MB przy kodowaniu i dekodowaniu. Większy plik jest odrzucany przed odczytem. Przy bardzo długim tekście pola pokazują pierwsze 100 000 znaków, ale kopiowanie i pobieranie używają całości. Nic nie opuszcza przeglądarki: plik jest czytany przez API plików, podgląd korzysta z lokalnego adresu blob, żadne żądanie nie jest wysyłane i nic nie jest zapisywane. Schowek służy tylko po kliknięciu „Kopiuj”.