Conversor de Data URL

Una data URL incrusta el contenido real de un archivo dentro de la propia URL, usando el formato data:[mime];[encoding],[data] — de modo que una imagen pequeña, un icono SVG o un fragmento de JSON viven directamente en tu HTML, CSS o JavaScript. Una URL de archivo normal, en cambio, simplemente apunta a un recurso separado que el navegador debe obtener mediante una nueva petición HTTP. La disyuntiva práctica es peticiones frente a peso: una data URL elimina el viaje de ida y vuelta y funciona sin conexión o dentro de un único archivo autocontenido, pero infla el marcado y el navegador no puede cachearla de forma independiente. Eso hace que las data URLs sean ideales para recursos diminutos que cambian poco, y poco adecuadas para archivos grandes. Pega un archivo o una data URL en este conversor para generar o decodificar una y ver su tamaño exacto en cualquiera de las dos direcciones.

Ambas codificaciones permiten que una data URL transporte contenido binario o de texto de forma segura, pero funcionan de manera distinta. Base64 asigna cada tres bytes a cuatro caracteres ASCII de un alfabeto fijo de 64 símbolos, así que maneja cualquier archivo binario de forma fiable y es la opción estándar para imágenes, audio, vídeo y PDF. La codificación como URL, en cambio, solo sustituye los caracteres inseguros por secuencias de escape con el símbolo de porcentaje, como %20, lo que mantiene compacto y legible el texto que ya es legible — como el marcado SVG o un JSON plano — a menudo con un tamaño menor que Base64 para esos formatos. La regla práctica: usa Base64 para recursos verdaderamente binarios y codificación como URL para texto y SVG, donde puede ahorrar bytes y sigue siendo inspeccionable. Este conversor ofrece ambos formatos con un solo interruptor tanto para archivos como para texto, para que puedas generar cualquiera de los dos y comparar el tamaño resultante antes de decidir cuál incrustar.

La codificación Base64 añade aproximadamente un 33% al tamaño de un archivo, porque representa cada tres bytes de datos usando cuatro caracteres ASCII — una proporción de 4:3 que es inherente al formato, no un defecto de ninguna herramienta en particular. Además, una data URL añade una cabecera corta (el prefijo data:, el tipo MIME y el marcador ;base64,), así que la cadena final resulta ligeramente mayor todavía. Para un icono pequeño, esos bytes extra son insignificantes y se compensan fácilmente al evitar una petición HTTP, pero para un archivo grande la inflación es real y el recurso tampoco puede cachearse por separado. Este conversor muestra el tamaño original junto al tamaño de la data URL e informa la sobrecarga exacta en bytes y en porcentaje en cada conversión, para que puedas juzgar de un vistazo si incrustar el recurso realmente vale la pena.

Incrustar funciona mejor para recursos pequeños y estáticos — iconos, logos, SVGs en línea e imágenes de fondo diminutas — donde eliminar una petición HTTP separada compensa la sobrecarga de aproximadamente un 33% de Base64 y la pérdida de un cacheo independiente por parte del navegador. También ayuda cuando necesitas un archivo único autocontenido, una página sin conexión o una imagen incrustada directamente en un email o un documento generado. Alojar un archivo normal es la mejor opción para imágenes grandes, cualquier recurso que cambie con frecuencia o activos reutilizados en muchas páginas, porque entonces el navegador puede cachearlos una vez y recargarlos instantáneamente en otros lugares. Un umbral útil: las data URLs de más de unos 32 KB suelen rendir peor que un archivo externo. El validador de este conversor señala esa marca de 32 KB (y vuelve a avisar al superar los 2 MB), así que pega tu data URL para comprobar si incrustarla todavía tiene sentido.

El tipo MIME de una data URL proviene de lo que el navegador detectó al leer el archivo, y esa suposición a veces es errónea — un SVG guardado con una extensión genérica, por ejemplo, puede reportarse como text/plain o application/octet-stream en lugar de image/svg+xml. Como el tipo MIME le indica al navegador cómo renderizar el contenido, uno incorrecto puede impedir que una imagen se muestre o que un archivo se descargue con la extensión correcta. La solución es simplemente establecer el tipo de forma explícita en lugar de confiar en la detección automática. Este conversor detecta automáticamente el tipo MIME de cada archivo, pero te permite anularlo manualmente, sugiriendo tipos comunes mientras escribes, para que puedas forzar el valor correcto antes de copiarlo. Establece el tipo MIME correcto, regenera la data URL y tu recurso incrustado se renderizará y descargará exactamente como se pretendía.