Obraz na Base64
Upuść dowolny obraz do tego konwertera obrazu na Base64, aby otrzymać data URI i gotowe do wklejenia fragmenty kodu HTML, CSS i JavaScript. Osadzone obrazy oszczędzają żądania HTTP przy małych ikonach i są niezbędne w jednoplikowych stronach HTML, szablonach e-mail i aplikacjach offline.
Jak przekonwertować Obraz na Base64 online
- Wybierz plik obrazu lub wklej URL obrazu.
- Wybierz wynik: data URI,
<img>, tło CSS, favicon, JSON i inne. - Kliknij Koduj obraz do Base64.
- Obejrzyj podgląd obrazu i skopiuj kod.
Więcej konwerterów Obraz na Base64
Formaty wyjściowe
Wybierz, w jakiej postaci ma zostać zwrócony wynik. Konwerter może zwrócić:
- txt: sam ciąg Base64, gotowy do wklejenia w kod, pole bazy danych lub żądanie API.
- uri: kompletny URI
data:, który możesz wkleić w pasek adresu przeglądarki lub użyć wszędzie tam, gdzie akceptowany jest URL. - html img: znacznik
<img>z data URI wsrc. - css background image: regułę CSS z
background-image: url(data:...). - html favicon: znacznik
<link rel="icon">dla osadzonej favicony. - html hyperlink: link
<a>, który pobiera lub otwiera osadzony plik. - html iframe: element
<iframe>, który wyświetla zawartość bezpośrednio na stronie. - javascript image: JavaScript tworzący obiekt
Image. - javascript popup: JavaScript otwierający zawartość w nowym oknie.
- json: obiekt JSON z nazwą pliku, typem MIME i danymi.
- xml: element XML z danymi w sekcji CDATA.
Kiedy osadzać obrazy jako Base64?
Osadzaj małe obrazy (poniżej ok. 5–10 KB), takie jak ikony, logo i placeholdery, aby oszczędzić żądania. Unikaj osadzania dużych zdjęć: zwiększają rozmiar HTML/CSS, nie mogą być osobno cache'owane i opóźniają renderowanie. Szczegóły znajdziesz w artykule data URI w praktyce.
Najczęściej zadawane pytania
Jak przekonwertować obraz na Base64?
Wybierz obraz, ustaw "Data URI" lub "<img>" jako wynik i kliknij "Koduj obraz do Base64". Skopiuj wynik do kodu HTML lub CSS.
Jakie formaty obrazów są obsługiwane?
Dowolny format obsługiwany przez przeglądarkę: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF i inne.
Jak użyć obrazu Base64 w HTML?
Umieść data URI w atrybucie src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Komentarze (0)
Pytania, pomysły lub błąd w „Obraz na Base64”? Zostaw komentarz, oceń narzędzie lub odpowiedz innym.
Brak komentarzy. Podziel się opinią jako pierwszy!