- Wählen Sie die Bilddatei aus, die Sie konvertieren möchten.
- Das Werkzeug erzeugt die Base64-Data-URL und zeigt eine Vorschau mit der Ausgabegröße.
- Kopieren Sie die Data-URL und fügen Sie sie in Ihr HTML, CSS oder Ihren Code ein.
Die Konvertierung läuft vollständig in Ihrem Browser mit dem eingebauten Datei-Leser. Bilder verlassen Ihr Gerät nie, sodass sensible Grafiken und Client-Assets privat bleiben.
Eine Data-URL verpackt ein ganzes Bild in eine einzige Textzeichenkette: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… Diese Zeichenkette lässt sich direkt in ein img-Tag, einen CSS-Hintergrund oder eine E-Mail-Signatur einfügen, was das Asset eigenständig macht – keine separate Datei zum Hochladen, keine zusätzliche HTTP-Anfrage, kein defekter Pfad, wenn der Ordner verschoben wird. Es ist der Standardtrick hinter einzeldateibasierten HTML-Seiten, Offline-Prototypen, E-Mail-tauglichen Grafiken und kleinen Favicons, die das Kopieren von Rechner zu Rechner überleben müssen.
Besonders praktisch ist das Einbetten in Newsletter und Signaturvorlagen: Viele E-Mail-Clients laden externe Bilder nicht nach, sondern verlangen einen eingebetteten Inhalt. Mit einer Data-URL umgehen Sie dieses Problem zuverlässig und Ihre Empfänger sehen das Bild sofort – unabhängig von Servern oder Cache.
Tipps
Base64 bläht ein Bild um etwa ein Drittel auf, sodass die Ausgabe immer größer ist als die Originaldatei. Verwenden Sie es für kleine Assets – Icons, Logos, Thumbnails – und prüfen Sie die neben dem Ergebnis angezeigte Größe; für große Fotos ist eine normal gehostete URL die bessere Wahl.
Bewahren Sie die Data-URL in CSS oder Markup auf, das sich selten ändert; eine Regenerierung bei jedem Build bläht Ihren Diff auf. Wenn Sie das rohe Base64 ohne das Präfix data:image benötigen, entfernen Sie den Teil vor dem ersten Komma.
Warum dieses Werkzeug nutzen
Bilder auf Drittanbieter-Konverter hochzuladen bedeutet, Dateien aus der Hand zu geben, die Sie vielleicht nicht teilen möchten, und Desktop-Tools sind für ein einzelnes Icon übertrieben. Dieser Konverter ist sofort einsetzbar, kostenlos und vollständig lokal und liefert eine geprüfte Data-URL mit Vorschau und Größe auf einen Blick.
Real-world use cases
- Blog and e-commerce: Shrink product photos from 4MB to ~200KB before upload. Your pages load faster and Google PageSpeed scores improve.
- Email and forms: Many inboxes reject >10MB attachments. Compress once and you reliably stay under limits.
- Portfolio and social: Keep visual quality high at 75-85% while cutting bandwidth for viewers on mobile data.
How it compares
| Tool | Upload required | Privacy | Batch | Cost |
|---|---|---|---|---|
| This tool | No | 100% local | 1-by-1 (high quality) | Free |
| TinyPNG/Squoosh | Yes / No | Server or local | Yes | Freemium |
| Photoshop | No | Local | Yes | Paid |
For sensitive images or quick one-offs, a local browser tool wins on privacy and speed. For massive bulk jobs, a desktop app may be faster.
Pro tips
- For photos, try quality 78-82% first. You usually save 60-70% size with no visible loss.
- Scale down dimensions before lowering quality. A 4000px photo at 2000px is 4x smaller even at high quality.
- Keep a backup of the original. You can always re-export at lower quality, but you cannot recover detail after saving over the original.