コンテンツへスキップ
🛠️ToolsShed

Data URL Encoder

ファイルをbase64 Data URLに変換して、HTMLおよびCSSに埋め込みます。

ファイルをドラッグするか、クリックしてアップロード

このツールについて

Data URLは、ファイルの内容をURL文字列に直接エンコードする特別なURL形式で、画像やフォント、その他のリソースをHTMLやCSSに埋め込むことができ、別のHTTPリクエストが不要になります。このツールは、任意のファイルをBase64エンコードされたData URLに変換し、サーバーリクエストを削減し、小さなアセットのページ読み込み時間を改善し、マークアップを自己完結させたい場合のデプロイメントを簡素化するのに役立ちます。

このツールを使用するには、ファイルをアップロードするか内容を貼り付けるだけで、エンコーダーはCSS background-imageプロパティ、HTMLのimg src属性、または他の埋め込みコンテキストに直接コピー&ペーストできるData URLを即座に生成します。ツールはファイルタイプを自動的に検出し、Data URLに正しいMIMEタイプを設定するため、ブラウザが埋め込まれたコンテンツをどのように解釈するかが明確になります。

Data URLは小さいファイル(通常100 KB未満)に最適です。大きなファイルを埋め込むとHTMLやCSSが肥大化する可能性があるためです。ウェブパフォーマンスを最適化する開発者、カスタムフォントを埋め込むデザイナー、外部アセットリクエストが実用的でないメールテンプレートやオフラインファーストアプリケーションを構築するチームに特に有用です。

よくある質問

コード実装

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.