Obraz na Base64
Zakoduj obraz jako data URI Base64 do CSS lub HTML.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
- Rozmiar pliku
- —
- Rozmiar po kodowaniu
- —
Duży obraz: tak duży data URI obciąża stronę. Powyżej kilkudziesięciu KB lepiej użyć zwykłego pliku.
Przetwarzane lokalnie: obraz nie opuszcza urządzenia.
Zakoduj obraz do Base64 w dwie sekundy
Data URI pozwala osadzić obraz bezpośrednio w kodzie, bez zewnętrznego pliku. Upuść obraz, wybierz format wyjściowy — surowe data URI, właściwość CSS lub znacznik HTML — i skopiuj wynik.
-
Upuść obraz
PNG, JPG, WebP, GIF, SVG… każdy format obrazu jest akceptowany i zachowywany bez zmian: bez ponownego kodowania, bez strat.
-
Wybierz wyjście
Surowe data URI, gotowe do wklejenia background-image CSS lub kompletny znacznik <img> HTML.
-
Skopiuj
Jedno kliknięcie w Kopiuj i kod jest w schowku, z rozmiarami przed/po na ekranie.
Kiedy używać (a kiedy unikać) Base64
| Sytuacja | Data URI? | Dlaczego |
|---|---|---|
| Ikona lub logo < 10 KB | Tak | Oszczędza żądanie HTTP, natychmiastowe wyświetlanie |
| E-mail HTML | Tak | Zewnętrzne obrazy są często domyślnie blokowane |
| Zdjęcie lub baner > 100 KB | Nie | +33 % wagi, brak osobnego cache, wolniejsze renderowanie |
| Obraz powtarzany na wielu stronach | Nie | Zwykły plik jest buforowany tylko raz |
Wskazówka: dla ikon wektorowych inline SVG (wklejony bezpośrednio do HTML) jest często lżejszy i ostrzejszy niż wersja Base64.
Najczęstsze pytania
Czym jest data URI?
To adres URL zawierający bezpośrednio dane pliku, w formie data:image/png;base64,iVBOR… Można go użyć wszędzie tam, gdzie oczekiwany jest URL obrazu: atrybut src, background-image w CSS, favicon…
Po co kodować obraz do Base64?
Aby osadzić obraz bezpośrednio w HTML, CSS lub JSON — bez osobnego pliku i dodatkowego żądania HTTP. Przydatne dla małych ikon, e-maili HTML lub samodzielnych prototypów.
Czy Base64 zwiększa rozmiar pliku?
Tak, o około 33 % względem oryginalnego pliku binarnego. To cena reprezentacji tekstowej. Kompresja gzip/brotli na serwerze część odzyskuje, ale dla dużych obrazów zwykły plik pozostaje wydajniejszy.
Do jakiego rozmiaru to dobry pomysł?
Z reguły zarezerwuj data URI dla obrazów poniżej kilkudziesięciu KB (ikony, logo, drobne wzory). Powyżej tego rozdyma strony, uniemożliwia osobne buforowanie i spowalnia renderowanie.
Czy mój obraz jest gdzieś wysyłany?
Nie. Odczyt i kodowanie wykonuje API FileReader Twojej przeglądarki. Obraz nigdy nie opuszcza urządzenia.