Base64
Image Data URL
⚠️ Large image may freez the browser
PNG in Base64 für CSS codieren
Konvertiere PNG-Bilder in Base64 oder DataURL-Formate. Direkte Einbettung in CSS oder JavaScript ohne externe Dateien. Größere Dateien können die Leistung beeinträchtigen; kleinere Größen werden empfohlen. Base64-Kodierung vereinfacht die Integration mit Webressourcen und reduziert die Abhängigkeit von externen Ressourcen. DataURL-Format vereinfacht die Code-Struktur für die dynamische Inhaltsbereitstellung.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Bilder in Base64-Code konvertieren
1
PNG-Bild hochladen
Laden Sie Ihr PNG-Bild hoch, indem Sie darauf klicken oder es in den Upload-Bereich ziehen.
2
Wähle das Kodierungsformat
Wählen Sie entweder den Reiter 'Base64' oder 'DataURL', um das gewünschte Kodierungsformat auszuwählen.
3
Ansicht Base64 Daten
Die Base64-oder DataURL-Darstellung deines Bildes wird im Textbereich unter den Tabs angezeigt.
4
Kopieren Codierten Text
Klicke auf die Schaltfläche 'Kopieren', um den kodierten Text in deine Zwischenablage für die Verwendung in deinem CSS oder JavaScript zu kopieren.
Füge PNGs Direkt in Deine CSS ein
Das Einfügen eines kleinen Bildes direkt in Ihre CSS-Datei ohne separate Dateien zu verwalten, kann erreicht werden, indem PNGs in Base64- oder DataURL-Formate konvertiert werden. Das Tool encode-png-to-base64-for-css rationalisiert Ihren Webentwicklungsablauf und reduziert HTTP-Anfragen. Dies führt zu saubererem, effizienterem Code und schnelleren Seitenladegeschwindigkeiten.
Reduziere Dateigröße und HTTP-Anfragen
Dieses Werkzeug reduziert die Anzahl der Dateien, die Ihre Website laden muss, indem es PNG-Bilder in Base64- oder DataURL-Formate konvertiert. Das direkte Einfügen von Bildern in Ihre CSS- oder JavaScript-Dateien reduziert HTTP-Anfragen, was die Seitenladegeschwindigkeit verbessern kann. Dieser Ansatz optimiert die Website-Performance, indem er externe Dateiberechtigungen minimiert.
Häufig Gestellte Fragen
Was ist eine Base64-Daten-URL und warum sollte ich sie verwenden?
Eine Base64-Daten-URL ist eine Möglichkeit, ein Bild als Zeichenkette darzustellen. Sie ermöglicht das direkte Einbetten von Bildern in Ihren CSS- oder JavaScript-Code, ohne dass diese von externen Dateien geladen werden müssen. Dies kann für kleine Icons oder Bilder nützlich sein.
Wie verwende ich den generierten Base64 oder DataURL?
Kopieren Sie einfach den nach der Konvertierung Ihres Bildes bereitgestellten Code und fügen Sie ihn in Ihre CSS- oder JavaScript-Datei ein. Beispielsweise können Sie ihn in CSS wie folgt verwenden: background-image: url('data:image/png;base64,...');
Welche Bildformate unterstützt dieses Tool?
Dieses Werkzeug ist speziell für PNG-Bilder konzipiert. Andere Formate können möglicherweise nicht korrekt konvertiert werden.
Warum werden große Bilder nicht empfohlen?
Große Bilder erzeugen sehr lange Base64-Strings, was Ihren Computer verlangsamen und die Seitenladezeiten erhöhen kann. Es ist am besten, dieses Werkzeug für kleinere Bilder zu verwenden.
Gibt es eine Größenbeschränkung für das Bild, das ich hochladen kann?
Es gibt zwar keine strikte Dateigrößenbeschränkung, die Leistung kann bei größeren Bildern abnehmen. Für beste Ergebnisse empfehlen wir, kleinere PNG-Dateien zu verwenden.