Data URL Encoder
Konversi file ke Data URL base64 untuk penyematan di HTML dan CSS.
Tentang alat ini
Data URL adalah format URL khusus yang mengenkode konten file langsung ke dalam string URL, memungkinkan Anda menyematkan gambar, font, dan sumber daya lainnya secara inline dalam HTML dan CSS tanpa permintaan HTTP terpisah. Alat ini mengonversi file apa pun menjadi Data URL yang dikodekan Base64, yang berguna untuk mengurangi permintaan server, meningkatkan waktu muat halaman untuk aset kecil, dan menyederhanakan penyebaran ketika Anda memerlukan markup yang berisi sendiri.
Untuk menggunakan alat ini, cukup unggah file atau tempel kontennya, dan enkoder secara instan menghasilkan Data URL yang dapat Anda salin dan tempel langsung ke dalam properti CSS background-image, atribut HTML img src, atau konteks penyematan lainnya. Alat ini secara otomatis mendeteksi jenis file dan menetapkan tipe MIME yang benar dalam Data URL, sehingga browser Anda tahu cara menginterpretasikan konten yang disematkan.
Data URL bekerja paling baik untuk file kecil—biasanya di bawah 100 KB—karena menyematkan file besar dapat membengkak HTML dan CSS Anda. Mereka sangat berharga bagi pengembang web yang mengoptimalkan kinerja, desainer yang menyematkan font khusus, dan tim yang membangun templat email atau aplikasi offline-first, di mana permintaan aset eksternal tidak praktis.
Pertanyaan yang Sering Diajukan
Implementasi Kode
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.