Jak używać
- Przeciągnij plik PNG na pole upuszczania, kliknij, aby go wybrać, lub wklej zrzut ekranu ze schowka.
- Pozostaw opcję „Zachowaj oryginał”, aby zakodować oryginalne bajty PNG, albo ustaw „Maks. szerokość”, aby zmniejszyć duży obraz.
- Porównaj oryginalny rozmiar z rozmiarem po zakodowaniu wyświetlanym dla obrazu.
- Skopiuj lub pobierz wynik: data URI, czysty Base64, znacznik img, CSS lub Markdown.
PNG i Base64
PNG (Portable Network Graphics, typ MIME image/png) to bezstratny format rastrowy z pełnym kanałem alfa, dlatego zwykle wybiera się go do ikon, logo, diagramów i zrzutów ekranu. Każdy plik PNG zaczyna się tą samą 8-bajtową sygnaturą, więc każdy data URI z obrazem PNG zaczyna się tak samo: data:image/png;base64,iVBORw0KGgo....
Base64 nie zmienia pikseli. Po zdekodowaniu ciągu otrzymuje się plik identyczny bajt w bajt, z tymi samymi kolorami i tymi samymi przezroczystymi obszarami.
Dobre zastosowania data URI z PNG
- Małe ikony interfejsu i logo, które wymagają przezroczystego tła.
- Zrzuty ekranu w samodzielnych raportach HTML, zgłoszeniach błędów lub eksportowanej dokumentacji.
- Wykresy i kody QR generowane na serwerze i zwracane w odpowiedzi JSON.
- Obrazy tworzone za pomocą
canvas.toDataURL(), która domyślnie zwraca właśnie data URI w formacie PNG.
Ze zdjęciami jest inaczej. PNG zapisuje je bezstratnie, przez co pliki są duże; JPEG lub WebP dadzą znacznie krótszy ciąg.
Zmniejsz plik PNG przed kodowaniem
Każdy bajt usunięty z pliku PNG to oszczędność około 1,33 znaku Base64. Najpierw przepuść plik przez optymalizator, taki jak oxipng lub zopflipng (bezstratnie) albo pngquant (redukcja palety). Sprawdź też wymiary w pikselach: ikonę wyeksportowaną w rozmiarze trzykrotnie większym niż wyświetlany zwykle można zmniejszyć opcją „Maks. szerokość”.
Konwersja na WebP zachowuje przezroczystość i często daje znacznie mniejszy plik. Konwersja na JPEG usuwa przezroczystość, więc przezroczyste obszary zostają wypełnione jednolitym kolorem. Ponowne kodowanie do PNG w przeglądarce nie optymalizuje kompresji, dlatego wynik może być większy niż dobrze zoptymalizowany oryginał; przed skopiowaniem porównaj rozmiary.
Korzystanie z wyniku
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Wiersz poleceń: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngNajczęściej zadawane pytania
Czy Base64 zachowuje przezroczystość PNG?
Tak. Base64 koduje bajty pliku bez zmian, więc kanał alfa zostaje zachowany. Przezroczystość traci się tylko wtedy, gdy obraz zostanie przekonwertowany na JPEG.
Dlaczego każdy ciąg Base64 z obrazem PNG zaczyna się od iVBORw0KGgo?
Te znaki to sygnatura pliku PNG zapisana w Base64. Jeśli ciąg, który ma zawierać PNG, zaczyna się inaczej, jest to inny format albo dane są uszkodzone.
Czy można wkleić zrzut ekranu bezpośrednio?
data:image/png.Jak duże pliki PNG warto osadzać jako Base64?
Popularna praktyczna zasada mówi o kilku kilobajtach, maksymalnie około 10 KB. Większe obrazy lepiej serwować jako osobne pliki, które przeglądarka może buforować i wczytywać równolegle.