pulsa ⌘K para cambiar de herramienta
IMAGE

Convertidor Imagen → Data URI

Convierte un archivo de imagen a Data URI codificado en base64.

local
image-datauri

🖥 Images are encoded locally in your browser — never uploaded.

§01 ACERCA DE ESTA HERRAMIENTA

Descripción general

Un Data URI incrusta el contenido de un archivo directamente en una URL con la forma data:<tipo-mime>;base64,<datos>. Esta herramienta convierte cualquier imagen a ese formato para que puedas incluirla en un <img src>, en una background-image de CSS o en una carga útil JSON. El archivo se lee con FileReader.readAsDataURL en tu navegador; nada se sube. Tras la conversión obtienes el nombre del archivo, el tamaño original, el tamaño codificado, una vista previa representada y la URI completa lista para copiar.

Cómo se usa

  1. Pulsa Choose image y selecciona un archivo. La conversión ocurre de inmediato.
  2. Revisa la línea de información (nombre, KB de origen, KB del Data URI) y la vista previa para confirmar que se ha codificado la imagen correcta.
  3. Pulsa Copy para poner el Data URI completo en el portapapeles.

Ejemplos

  • Un PNG de favicon de 1 KB se convierte en una cadena que empieza por data:image/png;base64,iVBORw0KGgo… y que puedes pegar en <link rel="icon" href="…">.
  • Incrustar un pequeño icono de flecha en CSS: background-image: url("data:image/svg+xml;base64,…") para eliminar una petición.

Notas

Los Data URI no se almacenan en caché por separado del documento que los contiene, y las cadenas muy largas pueden ralentizar los editores y los diffs. Reserva esta técnica para recursos de unos pocos kilobytes.

FAQ
¿Se envía mi imagen a un servidor?
No. El archivo se lee con la API FileReader del navegador y se codifica localmente. Nada se sube.
¿Por qué el Data URI es más grande que el archivo original?
Base64 representa cada grupo de 3 bytes de datos binarios con 4 caracteres ASCII, así que la cadena codificada es aproximadamente un 33 % mayor que el archivo de origen. La herramienta muestra ambos tamaños para que compares, por ejemplo «logo.png · 4.2 KB · Data URI 5.6 KB».
¿Cuándo conviene incrustar imágenes como Data URI?
Con recursos pequeños (iconos, logotipos diminutos, alternativas SVG en línea) donde ahorrar una petición HTTP compensa el sobrecoste de tamaño. Las imágenes grandes suelen servirse mejor como archivos aparte, porque los Data URI hinchan el HTML y el CSS y no pueden almacenarse en caché de forma independiente.