> PNG | encode | data-uri <
// Koduj obrazy PNG na ciągi Base64 i identyfikatory data URI — przezroczystość alfa zachowana, działa w całości w Twojej przeglądarce
Upuść tutaj PNG lub kliknij, aby wybrać
Kliknij, aby przeglądać pliki PNG
Alfa zachowana
Kanał alfa PNG, paleta oraz fragmenty gAMA/tRNS są kodowane bajt po bajcie — bez ponownej kompresji, bez utraty jakości.
100% po stronie klienta
Twój PNG nigdy nie opuszcza przeglądarki. Kodowanie odbywa się lokalnie za pomocą FileReader + btoa() — bez podróży do serwera i z powrotem.
Kopiuj i wklej
Uzyskaj zgodny ze standardami identyfikator data:image/png;base64,… gotowy do HTML, CSS, e-maili, ładunków JSON i wbudowanych SVG.
// FAQ — PNG NA BASE64
P: Czym jest kodowanie PNG na Base64?
O: Konwertuje binarną zawartość pliku .png na ciąg ASCII przy użyciu alfabetu Base64 zdefiniowanego w RFC 4648. Zakodowany tekst można wstawić bezpośrednio do znacznika HTML <img>, reguły CSS background-image, wiadomości e-mail, ładunku API JSON lub dowolnego innego transportu wyłącznie tekstowego. Same bajty PNG pozostają niezmienione — każdy fragment IHDR, IDAT, tRNS i IEND jest kodowany i może zostać dokładnie odtworzony.
P: Jak zakodować PNG na Base64 w przeglądarce?
O: Przeciągnij swój PNG do strefy upuszczania (lub kliknij, aby przeglądać). Narzędzie odczytuje plik za pomocą FileReader.readAsDataURL(), co już zwraca gotowy do użycia identyfikator data:image/png;base64,…. Wybierz Data URI, jeśli chcesz wkleić go bezpośrednio do <img src="…">, lub Tylko ładunek Base64, jeśli Twoje API/baza danych oczekuje surowej części Base64 bez prefiksu data:image/png;base64,.
P: Czy kodowanie PNG na Base64 powoduje utratę przezroczystości lub jakości?
O: Nie. Base64 to czysta transformacja z formy binarnej na tekst — każdy bajt oryginalnego PNG jest zachowany, w tym kanał alfa, paleta i profil kolorów (fragmenty iCCP/sRGB). Gdy zdekodujesz ciąg z powrotem, plik jest identyczny bit po bicie z oryginałem. Skrót SHA-256 zdekodowanego PNG będzie zgodny z oryginałem. Dlatego Base64 jest właściwym narzędziem do osadzania ikon, logo i zrzutów ekranu, gdzie liczy się dokładność pikseli.
P: O ile większy staje się PNG po zakodowaniu w Base64?
O: Base64 używa 4 znaków na każde 3 bajty wejściowe, więc zakodowany ciąg jest ~33% większy niż oryginalny plik PNG. Dokładny rozmiar to 4 × ⌈n / 3⌉ znaków, gdzie n to rozmiar PNG w bajtach. PNG o rozmiarze 10 KB staje się ~13,6 KB tekstu Base64. Ponieważ kompresja HTTP (gzip, Brotli) całkiem dobrze radzi sobie z tekstem Base64, narzut przesyłania przez sieć jest w praktyce zwykle bliższy 10–15%.
P: Jak wygląda PNG zakodowany w Base64?
O: Każdy ciąg Base64 dla PNG zaczyna się od iVBORw0KGgo. Ten prefiks to 8-bajtowa sygnatura PNG 89 50 4E 47 0D 0A 1A 0A ponownie zakodowana do Base64. Zatem iVBORw0KGgoAAAANSUhEUg... to zawsze PNG, a zobaczenie tego prefiksu to szybka kontrola wizualna, że Twoje dane są nienaruszone. Opakowany jako data URI wygląda tak: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
P: Jak osadzić PNG jako Base64 w HTML?
O: Wklej pełny identyfikator data URI do atrybutu src znacznika <img>: <img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Przeglądarka dekoduje ładunek Base64 i renderuje PNG dokładnie tak, jakby został załadowany z adresu URL. Nie jest wykonywane żadne dodatkowe żądanie HTTP, co jest przydatne dla ikon na ścieżce krytycznej, podpisów e-mail i aplikacji typu offline-first.
P: Jak użyć PNG w Base64 jako tła CSS?
O: Opakuj identyfikator data URI w funkcję url(): .icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
W celu ponownego użycia zapisz go we właściwości niestandardowej CSS: :root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
Tła wbudowane eliminują jedno żądanie HTTP na ikonę, ale powiększają plik CSS, więc używaj ich tylko dla małych ikon (< 4 KB).
P: Jak zakodować PNG na Base64 w JavaScript / Node / Python / PHP?
O:
JavaScript (przeglądarka): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))
P: Kiedy powinienem używać PNG w Base64 zamiast zwykłego pliku obrazu?
O: Używaj identyfikatorów data URI PNG w Base64, gdy:
• obraz ma < 4 KB (aby zaoszczędzić podróż HTTP)
• musisz osadzić go w e-mailu HTML (wielu klientów blokuje zdalne obrazy)
• dostarczasz raport lub pulpit HTML w jednym pliku
• przechowujesz obraz wewnątrz ładunku JSON lub kolumny bazy danych
Preferuj zewnętrzny plik .png, gdy obraz jest duży, używany ponownie na wielu stronach lub wymaga osobnego buforowania CDN.
P: Czy kodowanie Base64 działa z przezroczystością PNG i PNG z paletą?
O: Tak. Ponieważ Base64 to transformacja bit po bicie, każdy tryb kolorów PNG jest obsługiwany jednakowo:
• RGBA / truecolor + alfa — kolor 32-bitowy, pełna przezroczystość
• Paleta (PLTE) + tRNS — pliki PNG z paletą indeksowaną z 1-bitową przezroczystością
• Skala szarości + alfa — 8/16-bitowa skala szarości z alfą
• 16-bitowe pliki PNG deep color — pliki PNG w stylu HDR używane w obrazowaniu medycznym i wizualizacji naukowej
Wszystkie te formaty przechodzą czysto przez round-trip Base64 i wyświetlają się poprawnie w przeglądarkach, które rozumieją PNG.
P: Czy PNG zakodowany w Base64 jest zaszyfrowany lub prywatny?
O: Nie. Base64 to kodowanie, a nie szyfrowanie. Każdy, kto może odczytać ciąg, może go zdekodować z powrotem do oryginalnego PNG w milisekundach. Jeśli zrzut ekranu zawiera hasło, token API lub dane osobowe, zakodowanie go jako Base64 go nie chroni — użyj prawdziwej warstwy szyfrowania (AES-GCM, age, PGP) na wyjściu Base64 lub przesyłaj obraz przez TLS do serwera, który stosuje kontrolę dostępu.
P: Jaki jest maksymalny rozmiar PNG, który mogę tutaj zakodować?
O: Nie ma sztucznego limitu. Ponieważ kodowanie działa lokalnie, limitem jest pamięć Twojej przeglądarki — zwykle 100 MB+ na komputerze i 40–60 MB na urządzeniu mobilnym. W przypadku bardzo dużych plików PNG (obrazy medyczne lub satelitarne w wysokiej rozdzielczości) odczytujemy plik fragmentami i wywołujemy btoa() na każdym fragmencie, aby główny wątek pozostał responsywny. Jeśli Twój obraz jest większy niż ~100 MB, rozważ strumieniowanie go bezpośrednio z kodera po stronie serwera zamiast ładowania go do przeglądarki.
P: PNG na Base64 vs JPG na Base64 — czego powinienem użyć?
O: Używaj PNG → Base64 dla logo, ikon interfejsu, zrzutów ekranu, diagramów i wszystkiego z przezroczystością lub ostrymi krawędziami (tekst, wykresy). PNG jest bezstratny i obsługuje alfę. Używaj JPG → Base64 dla fotografii lub obrazów z wieloma kolorami, gdzie kompresja stratna jest akceptowalna. Pliki JPEG są zwykle 5–20× mniejsze niż PNG dla zdjęć, więc ładunek Base64 jest znacznie krótszy. Zasada praktyczna: jeśli obraz pochodzi z aparatu lub zawiera fotograficzne gradienty, użyj JPG; w przeciwnym razie PNG.