İçeriğe geç
🛠️ToolsShed

Data URL Encoder

Dosyaları HTML ve CSS'e katıştırmak için base64 Data URL'lerine dönüştürün.

Dosyayı buraya bırakın veya yüklemek için tıklayın

Bu araç hakkında

Data URL, dosya içeriğini doğrudan bir URL dizesine kodlayan ve HTML ile CSS'nize ayrı HTTP istekleri olmadan görüntü, yazı tipi ve diğer kaynakları satır içi olarak yerleştirmenizi sağlayan özel bir URL biçimidir. Bu araç, herhangi bir dosyayı Base64 kodlanmış bir Data URL'ye dönüştürür; bu, sunucu isteklerini azaltmak, küçük varlıklar için sayfa yükleme sürelerini iyileştirmek ve kendi kendine yeterli biçimlendirmeye ihtiyaç duyduğunuzda dağıtımı basitleştirmek için kullanışlıdır.

Aracı kullanmak için dosyayı yükleyin veya içeriğini yapıştırın; kodlayıcı anında CSS background-image özelliğinize, HTML img src niteliğine veya diğer gömme bağlamlarına doğrudan kopyalanıp yapıştırılabilecek bir Data URL oluşturur. Araç, dosya türünü otomatik olarak algılar ve Data URL'de doğru MIME türünü ayarlar; böylece tarayıcınız gömülü içeriği nasıl yorumlayacağını bilir.

Data URL'ler küçük dosyalar için—tipik olarak 100 KB altında—en iyi şekilde çalışır; çünkü büyük dosyaları gömmek HTML ve CSS'nizi şişirebilir. Performansı optimize eden web geliştiriciler, özel yazı tiplerini gömme tasarımcılar ve dış varlık isteklerinin pratik olmadığı e-posta şablonları veya çevrimdışı-ilk uygulamalar oluşturan takımlar için özellikle değerlidirler.

Sıkça Sorulan Sorular

Kod Uygulaması

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.