Jak używać
- Przeciągnij obrazy na pole upuszczania, kliknij je, aby wybrać pliki, albo wklej obraz ze schowka. Można dodać kilka plików naraz.
- Opcjonalnie wybierz w polu „Konwertuj na” format docelowy (PNG, JPEG lub WebP), dostosuj „Jakość” i ustaw „Maks. szerokość”.
- Sprawdź wymiary, oryginalny rozmiar i rozmiar po zakodowaniu, które są wyświetlane dla każdego obrazu.
- Skopiuj lub pobierz potrzebny wynik: data URI, czysty Base64, znacznik HTML img, CSS background-image lub Markdown.
Jak działa konwersja obrazu na Base64
Base64 zamienia bajty pliku graficznego na zwykły tekst złożony z 64 znaków. Każde 3 bajty stają się 4 znakami, więc tekst jest o około 33% większy niż plik. Data URI dodaje krótki prefiks z typem MIME, np. data:image/png;base64,, dzięki czemu przeglądarka może wyświetlić ten tekst wszędzie tam, gdzie oczekuje adresu URL obrazu.
Obraz jest odczytywany i kodowany lokalnie w przeglądarce. Nie trafia na żaden serwer, więc prywatne zrzuty ekranu i nieopublikowane projekty pozostają na urządzeniu.
Który wynik skopiować?
- Data URI do atrybutów
src, kodu JavaScript i pól JSON, które oczekują adresu URL. - Czysty Base64 dla interfejsów API, które przyjmują same zakodowane bajty, zwykle obok osobnego pola z typem MIME lub nazwą pliku.
- Znacznik HTML img do wklejenia bezpośrednio na stronę lub do szablonu.
- CSS background-image dla ikon i elementów dekoracyjnych w arkuszu stylów.
- Markdown do dokumentacji i notatek. Niektóre mechanizmy renderujące, w tym GitHub, nie wyświetlają obrazów zapisanych jako data URI.
Obsługiwane formaty w skrócie
Pierwsze znaki ciągu Base64 zdradzają typ pliku, ponieważ kodują sygnaturę formatu.
| Format | Typ MIME | Początek Base64 |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy lub PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | zmienny |
| TIFF | image/tiff | SUkqAA lub TU0AKg |
Kiedy osadzanie obrazu się opłaca
Data URI oszczędza jedno żądanie sieciowe i sprawia, że plik jest samowystarczalny. Sprawdza się w przypadku małych ikon i logo o rozmiarze kilku kilobajtów, jednoplikowych raportów HTML, drobnych rozmytych obrazów zastępczych oraz obrazów przesyłanych w JSON. Do dużych zdjęć się nie nadaje: rozmiar większy o jedną trzecią, brak osobnego buforowania w przeglądarce oraz cięższy plik HTML lub CSS, który musi zostać pobrany, zanim cokolwiek się wyświetli, zwykle kosztują więcej niż zaoszczędzone żądanie. Jeśli witryna wysyła nagłówek Content-Security-Policy, osadzone obrazy wymagają też wpisu data: w img-src.
Najczęściej zadawane pytania
Czy obrazy są przesyłane na serwer?
Nie. Przeglądarka odczytuje i koduje każdy plik lokalnie na urządzeniu. Nic nie jest wysyłane do base64.is ani nigdzie indziej.
Dlaczego tekst Base64 jest większy niż obraz?
Base64 używa 4 znaków na każde 3 bajty, więc wynik jest o około 33% większy, a do tego dochodzi prefiks data URI. Aby go skrócić, ustaw „Maks. szerokość” albo przekonwertuj obraz na WebP lub JPEG z niższą jakością.
Czy można przekonwertować kilka obrazów naraz?
Tak. Wybierz lub przeciągnij kilka plików. Każdy obraz otrzymuje własny podgląd, informacje o rozmiarze i wyniki, a każdy wynik ma przyciski „Kopiuj” i „Pobierz”.
Czy obrazy Base64 działają w wiadomościach e-mail HTML?
cid:.