Bild zu Base64

Bild oder SVG ablegen und eine Base64-Data-URI, eine CSS-Hintergrundregel oder Inline-SVG-Code erhalten – jeweils mit Kopieren-Knopf und Vorschau.

Über dieses Tool

Bilder als Code für HTML und CSS

Machen Sie aus einem Bild oder SVG eine Base64-Data-URI, eine CSS-Hintergrundregel oder Inline-SVG-Markup.

Base64 Data-URI

Eine data:-URI, die Sie in ein img-src-Attribut, eine E-Mail-Vorlage oder eine JSON-Datei einfügen können.

CSS-Hintergrund

Eine fertige background-image-Regel für Stylesheets und Inline-Styles.

Inline-SVG

Bei SVG-Dateien erhalten Sie zusätzlich das Markup, das Sie direkt in HTML einfügen und per CSS gestalten können.

So geht's

  1. Legen Sie eine PNG-, JPG-, WebP-, GIF- oder SVG-Datei ab.
  2. Prüfen Sie in der Vorschau, ob es die richtige Datei ist.
  3. Klicken Sie bei „Base64 Data-URI“, „CSS-Hintergrund“ oder – bei SVG – „Inline-SVG“ auf „Kopieren“.
  4. Fügen Sie den Code in Ihr HTML, CSS oder Ihre Vorlage ein. „Leeren“ macht das Tool für die nächste Datei frei.

Häufig gestellte Fragen

Werden meine Bilder auf einen Server hochgeladen?

Nein. Jedes Bild wird direkt in Ihrem Browser-Tab mit Canvas, Web Workers und WebAssembly gelesen, verarbeitet und gespeichert. Es wird nichts hochgeladen, gespeichert oder protokolliert.

Wann lohnt sich ein Bild als Base64?

Bei kleinen Icons und Logos spart es eine zusätzliche Anfrage. Für größere Fotos ist eine normale Bilddatei meist schneller, da Base64 rund ein Drittel größer ist.

Verändert Base64 das Bild?

Nein. Die Data-URI enthält die Originaldatei Byte für Byte in ihrem eigenen Format, nur als Text geschrieben. Große Bilder verkleinern Sie vorher mit „Bilder komprimieren“.

Kann ich eine Data-URI in einer E-Mail verwenden?

Oft nicht: Viele E-Mail-Programme, darunter Gmail, blockieren Bilder, die als Data-URI eingebettet sind. Für Newsletter ist eine gehostete Bilddatei sicherer. In HTML-Seiten, CSS und JSON funktionieren Data-URIs gut.

Ist es kostenlos, und gibt es ein Wasserzeichen?

Ja, es ist ohne Konto kostenlos nutzbar, und Toolula fügt nie ein Wasserzeichen hinzu. Der kostenlose Plan hat Fair-Use-Limits; Toolula Pro, ein optionaler Plan, hebt sie an.