Data URI Encoder / Decoder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Drop a file to encode it as a data URI
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Data URI Encoder / Decoder

Un data URI lleva el contenido de un archivo dentro de la propia URL, de modo que una imagen, una fuente o un SVG pueden incrustarse directamente en HTML o CSS en lugar de descargarse.

How it works

El formato es data:<tipo-mime>;base64,<contenido>, por ejemplo data:image/svg+xml;base64,PHN2Zy4uLg==. El texto que usted escribe se codifica como UTF-8 y después en Base64; un archivo que se suelte sobre la herramienta se lee como bytes en bruto y su tipo MIME procede del propio archivo. Base64 añade aproximadamente un tercio al tamaño, y ese es el intercambio que hace a cambio de ahorrar una petición HTTP.

When to use it

  • Incrustar un icono o un SVG pequeños en CSS para que se rendericen con el primer pintado en lugar de tras una segunda petición.
  • Incrustar imágenes en un correo HTML, donde muchos clientes bloquean por defecto las URL de imagen externas.
  • Construir una página HTML de un solo archivo o un bookmarklet que tiene que funcionar sin ningún servidor detrás.
  • Extraer el contenido de una URL data: encontrada en una hoja de estilos para ver qué contiene realmente.

Watch out for

  • Un data URI no puede cachearse por sí solo. Los bytes viajan dentro de cada copia del documento que los referencia, así que a partir de unos 5 KB un archivo externo suele ganar en las visitas repetidas.
  • La descodificación espera la forma ;base64,. Un data URI con percent-encoding — data:image/svg+xml,%3Csvg... — es perfectamente válido y aquí no se gestiona.
  • La descodificación muestra el contenido como texto, así que un PNG o un WOFF vuelven como caracteres ilegibles. Con SVG y otros formatos de texto sí recupera el código original.
  • Content-Security-Policy bloquea las URL data: salvo que la directiva las permita, así que una página que envía img-src 'self' no renderizará una imagen incrustada. Los navegadores también bloquean la navegación de nivel superior a una URL data:, así que no puede previsualizar una pegándola en la barra de direcciones.

Frequently Asked Questions

¿Cuándo conviene usar data URI?

Los data URI eliminan peticiones HTTP para recursos pequeños. Buenos usos: iconos y SVG pequeños en CSS (url("data:image/svg+xml,...")), imágenes en línea en correos HTML donde se bloquean las URL externas, aplicaciones HTML de un solo archivo e incrustar fuentes en CSS sin una petición de red aparte.

¿Cuánto tamaño añade la codificación base64?

La codificación base64 añade alrededor de un 33 % de tamaño. Un PNG de 30 KB pasa a ocupar unos 40 KB como data URI. Para recursos de más de unos 5 KB, el aumento de tamaño y la imposibilidad de cachearlos por separado suelen hacer que los archivos externos sean más eficientes que los data URI.

¿Puedo usar data URI para paquetes de JavaScript?

No: los navegadores bloquean la ejecución de scripts desde URL data: en muchos contextos por motivos de seguridad (XSS). Los data URI son seguros para imágenes, fuentes, hojas de estilo y SVG usados en background-image o en atributos src de elementos que no sean scripts.

How to Use Data URI Encoder / Decoder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.