Data URL Encoder
Konvertiere Dateien zu Base64-Data-URLs zum Einbetten in HTML und CSS.
Über dieses Tool
Eine Data URL ist ein spezielles URL-Format, das Dateiinhalte direkt in eine URL-Zeichenkette codiert und es dir ermöglicht, Bilder, Schriftarten und andere Ressourcen direkt in deinem HTML und CSS ohne separate HTTP-Anfragen einzubetten. Dieses Tool konvertiert jede Datei in eine Base64-codierte Data URL, was nützlich ist, um Serveranfragen zu reduzieren, Seitenladezeiten für kleine Assets zu verbessern und die Bereitstellung zu vereinfachen, wenn du in sich geschlossenes Markup benötigst.
Um das Tool zu verwenden, lade einfach eine Datei hoch oder füge ihren Inhalt ein, und der Encoder generiert sofort eine Data URL, die du direkt in deine CSS-Eigenschaft background-image, ein HTML-img-src-Attribut oder andere Einbettungskontexte kopieren und einfügen kannst. Das Tool erkennt den Dateityp automatisch und setzt den korrekten MIME-Typ in der Data URL, damit dein Browser weiß, wie der eingebettete Inhalt zu interpretieren ist.
Data URLs funktionieren am besten für kleine Dateien – typischerweise unter 100 KB – da das Einbetten großer Dateien dein HTML und CSS aufblähen kann. Sie sind besonders wertvoll für Web-Entwickler, die die Leistung optimieren, Designer, die benutzerdefinierte Schriftarten einbetten, und Teams, die E-Mail-Vorlagen oder Offline-First-Anwendungen erstellen, bei denen externe Asset-Anfragen nicht praktisch sind.
Häufig gestellte Fragen
Code-Implementierung
import base64
import mimetypes
from pathlib import Path
def file_to_data_url(filepath: str) -> str:
"""Convert a file to a base64 Data URL."""
path = Path(filepath)
mime_type, _ = mimetypes.guess_type(filepath)
if mime_type is None:
mime_type = "application/octet-stream"
with open(path, "rb") as f:
data = f.read()
encoded = base64.b64encode(data).decode("utf-8")
return f"data:{mime_type};base64,{encoded}"
# Example usage
url = file_to_data_url("image.png")
print(url[:80] + "...")
print(f"Total length: {len(url)} chars")
# Embed in HTML
html = f'<img src="{url}" alt="Embedded image">'Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.