RevealTheme logo

Bild-zu-Base64-Konverter

Wandeln Sie eine beliebige Bilddatei in eine Base64-Daten-URL um. Fügen Sie das Ergebnis direkt in CSS, HTML oder JSON ein.

So verwenden Sie dieses Tool

  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.

Was ist der Bild-zu-Base64-Konverter?

Eine Base64-Daten-URL bettet den binären Inhalt eines Bildes direkt in HTML oder CSS ein. Dadurch entfällt die HTTP-Anfrage für Icons und kleine Grafiken, was die wahrgenommene Ladezeit verbessern kann. Der Kompromiss: Die Base64-Codierung vergrößert die Dateigröße um etwa 33 %, daher eignet sie sich ideal für Icons unter 5 KB.

Häufige Anwendungsfälle

  • 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.

Häufig gestellte Fragen

Wann sollte ich Base64-Bilder verwenden?
Für kleine Icons, Logos oder Sprites, bei denen Sie eine HTTP-Anfrage einsparen möchten. Vermeiden Sie sie bei großen Bildern: Der Overhead der Codierung hebt jeden Vorteil auf.
Kann ich das in CSS verwenden?
Ja: Fügen Sie die Daten-URL direkt in eine background-image: url(...)-Deklaration ein.

Verwandte Tools