Data URL Encoder
Convierte archivos a Data URLs Base64 para incrustar en HTML y CSS.
Acerca de esta herramienta
Una Data URL es un formato especial de URL que codifica el contenido de un archivo directamente en la cadena de URL, permitiéndote incrustar imágenes, fuentes y otros recursos en línea en tu HTML y CSS sin solicitudes HTTP separadas. Esta herramienta convierte cualquier archivo en una Data URL codificada en Base64, lo que es útil para reducir solicitudes al servidor, mejorar los tiempos de carga de página para activos pequeños y simplificar la implementación cuando necesitas un marcado autocontenido.
Para usar la herramienta, simplemente sube un archivo o pega su contenido, y el codificador genera instantáneamente una Data URL que puedes copiar y pegar directamente en tu propiedad CSS background-image, en un atributo HTML img src, u otros contextos de incrustación. La herramienta detecta automáticamente el tipo de archivo y establece el tipo MIME correcto en la Data URL, para que tu navegador sepa cómo interpretar el contenido incrustado.
Las Data URL funcionan mejor para archivos pequeños, típicamente menores a 100 KB, ya que incrustar archivos grandes puede inflar tu HTML y CSS. Son especialmente valiosas para desarrolladores web que optimizan el rendimiento, diseñadores que incrustan fuentes personalizadas, y equipos que crean plantillas de correo electrónico o aplicaciones sin conexión, donde las solicitudes de activos externos no son prácticas.
Preguntas Frecuentes
Implementación de Código
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.