RevealTheme logo

Konwerter obrazu na Base64

Konwertuj dowolny plik obrazu na adres URL danych Base64. Wklej wynik bezpośrednio do CSS, HTML lub JSON.

Jak korzystać z tego narzędzia

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

Czym jest konwerter obrazu na Base64?

Adres URL danych Base64 osadza binarną zawartość obrazu bezpośrednio w HTML lub CSS. Eliminuje to żądanie HTTP dla ikon i małych grafik, co może poprawić odczuwalny czas ładowania. Wadą jest to, że kodowanie Base64 zwiększa rozmiar pliku o około 33%, więc najlepiej sprawdza się w przypadku ikon mniejszych niż 5 KB.

Typowe przypadki użycia

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

Najczęściej zadawane pytania

Kiedy powinienem używać obrazów w Base64?
W przypadku ikon, logo lub małych sprite'ów, gdy chcesz wyeliminować żądanie HTTP. Unikaj tego w przypadku dużych obrazów – narzut kodowania niweczy wszelkie korzyści.
Czy mogę użyć tego w CSS?
Tak – wklej adres URL danych bezpośrednio do deklaracji background-image: url(...).

Powiązane narzędzia