Base64
Image Data URL
⚠️ Large image may freez the browser
Szyfrowanie PNG do Base64 dla CSS
Konwertuj obrazy PNG na formaty Base64 lub DataURL. Wbuduj bezpośrednio w CSS lub JavaScript bez plików zewnętrznych. Większe pliki mogą wpłynąć na wydajność; zalecane są mniejsze rozmiary. Kodowanie Base64 usprawnia integrację z zasobami internetowymi, zmniejszając zależność od zasobów zewnętrznych. Format DataURL upraszcza strukturę kodu dla dynamicznego dostarczania zawartości.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Konwertuj obrazy na kod Base64
1
Wczytaj obraz PNG
Załaduj obraz PNG klikając lub przeciągając go do obszaru przesyłania.
2
Wybierz Format Kodowania
Wybierz zamiast tego zakładkę 'Base64' lub 'DataURL' aby wybrać pożądaną składnię kodowania.
3
Zobacz dane w formacie Base64
Reprezentacja Base64 lub DataURL Twojego obrazka pojawi się w obszarze tekstowym pod zakładkami.
4
Kopiuj Zapisany Tekst
Kliknij przycisk „Kopiuj”, aby skopiować zakodowany tekst do schowka, aby użyć go w swoim CSS lub JavaScript.
Wkomponuj PNG-i bezpośrednio w swoim CSS
Włączenie małego obrazka bezpośrednio w CSS bez zarządzania oddzielnymi plikami można osiągnąć poprzez konwersję PNG na formaty Base64 lub DataURL. Narzędzie encode-png-to-base64-for-css usprawnia Twój przepływ pracy deweloperskiej i zmniejsza liczbę żądań HTTP. Dzieje się to dzięki czystszym, bardziej wydajnym kodom i szybszemu ładowaniu stron.
Zmniejsz rozmiar pliku i liczbę żądań HTTP
Ten narzędzie redukuje liczbę plików, których potrzebuje załadować Twoja strona internetowa, konwertując obrazy PNG na formaty Base64 lub DataURL. Wbudowywanie obrazów bezpośrednio w CSS lub JavaScript redukuje żądania HTTP, co może poprawić prędkość ładowania strony. Ten sposób optymalizuje wydajność strony internetowej poprzez minimalizowanie zależności od zewnętrznych plików.
Najczęściej Zadawane Pytania
Co to jest DataURL w formacie Base64 i dlaczego by go używać?
Dane URL Base64 to sposób reprezentacji obrazu jako ciągu znaków. Pozwala na wbudowanie obrazów bezpośrednio w kod CSS lub JavaScript, unikając potrzeby ładowania ich z plików zewnętrznych. Może to być przydatne dla małych ikon lub obrazów.
Jak użyć wygenerowanego Base64 lub DataURL?
Prosto skopiuj kod dostarczony po przekonwertowaniu obrazu i wklej go do swojego CSS lub JavaScript. Na przykład, w CSS możesz użyć go tak: background-image: url('data:image/png;base64,...');
Jakie formaty obrazów obsługuje ten program?
Ten narzędzie jest specjalnie zaprojektowane dla plików PNG. Inne formaty mogą nie konwertować się poprawnie.
Dlaczego duże obrazy nie są zalecane?
Duże obrazy tworzą bardzo długie ciągi znaków Base64, co może spowolnić komputer i wydłużyć czas ładowania strony. Najlepiej używać tego narzędzia dla mniejszych obrazów.
Czy istnieje limit wielkości obrazu, który mogę przesłać?
Chociaż nie ma ścisłego limitu rozmiaru pliku, wydajność pogorszy się wraz z większymi obrazami. Zalecamy używanie mniejszych plików PNG dla najlepszych rezultatów.