Data URL Encoder
Конвертируйте файлы в Data URL в кодировке Base64 для встраивания в HTML и CSS.
Об этом инструменте
Data URL — это специальный формат URL, который кодирует содержимое файла непосредственно в строку URL, позволяя встраивать изображения, шрифты и другие ресурсы в ваш HTML и CSS без отдельных HTTP-запросов. Этот инструмент преобразует любой файл в Data URL, закодированный в Base64, что полезно для снижения количества запросов к серверу, улучшения времени загрузки страницы для небольших ресурсов и упрощения развёртывания, когда вам нужна самостоятельная разметка.
Чтобы использовать инструмент, просто загрузите файл или вставьте его содержимое, и кодировщик мгновенно создаст Data URL, который вы можете копировать и вставлять непосредственно в свойство CSS background-image, атрибут HTML img src или другие контексты встраивания. Инструмент автоматически определяет тип файла и устанавливает правильный тип MIME в Data URL, чтобы ваш браузер знал, как интерпретировать встроенное содержимое.
Data URL лучше всего работают с небольшими файлами — обычно менее 100 КБ — так как встраивание больших файлов может раздуть ваш 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.