VoriTools

Codificar una imagen como URL de datos Base64

Selecciona la imagen para codificar sus bytes. Base64 representa datos como texto; no comprime la imagen y suele aumentar su tamaño.

Se ejecuta localmente en tu navegador

Cómo convertir un archivo de imagen en una URL de datos Base64

La herramienta funciona en dos direcciones: elige una imagen y los bytes del archivo vuelven como una URL data:image/…;base64,…; o pega una URL así (o un payload Base64 sin prefijo) y la página muestra qué contiene.

Todo ocurre en esta pestaña con el FileReader y el decodificador de imágenes del navegador; el archivo no se sube. Aquí no hay compresión, cambio de tamaño ni borrado de metadatos: eso requiere un editor de imágenes.

  1. Pulsa Seleccionar imagen y elige un archivo. El cuadro se llena con una URL data:image/…;base64,… que empieza por el tipo detectado, y la vista previa de abajo muestra la imagen.
  2. Pulsa Copiar para llevar la URL completa al CSS (background-image:url("data:…")), al HTML (<img src="data:…">) o a un payload JSON.
  3. Para revisar algo recibido, pega la URL de datos o el payload Base64 sin prefijo en el cuadro y pulsa Ver vista previa. La página lee los primeros bytes (PNG, JPEG, GIF, WebP, BMP, ICO o SVG), añade el prefijo que falta y dibuja la imagen.
  4. Pulsa Envolver en una etiqueta img si el cuadro debe contener un elemento <img src="…" alt="…" /> listo para pegar en lugar de la URL sin más.
  5. Pulsa Limpiar para vaciar el cuadro, la vista previa y el selector de archivos antes de la siguiente imagen. Un payload truncado, que no sea Base64 o que no sea una imagen lo dice en vez de dejar una imagen rota.

Qué cambia Base64 y qué no resuelve

Qué le hace Base64 a una imagen

Base64 asigna cuatro caracteres imprimibles a cada tres bytes, de modo que los mismos bytes sobreviven a canales de texto que estropearían o cortarían los datos binarios: HTML, CSS, JSON, XML o el cuerpo de un correo. No hay compresión: el texto codificado es aproximadamente un tercio más largo que el archivo, y el navegador decodifica la URL de datos al analizar la página, nunca como un archivo en caché aparte.

Tampoco es cifrado: cualquiera que tenga la página o el correo puede decodificar el payload y recuperar los bytes originales con cualquier decodificador Base64, así que una URL de datos no debe llevar nada que no publicarías.

Cuándo compensa una URL de datos

Un logotipo pequeño, un icono de lista o una textura de fondo que costaría una petición HTTP por página puede viajar dentro de la hoja de estilos. Eso ahorra una ida y vuelta y garantiza que la imagen esté antes del primer pintado.

El precio crece con el archivo: el marcado se vuelve ilegible, el HTML se comprime peor y ningún navegador puede cachear la imagen sin la página. Reserva las URL de datos para recursos muy por debajo de 10 KB y deja las fotografías, los sprites y lo que se reutiliza entre páginas como archivos aparte.

Comprobar un payload que no has creado tú

El Base64 pegado suele llegar sin su tipo de medio. Esta página lee los primeros bytes de los datos decodificados —la firma PNG, JPEG, GIF, WebP, BMP o ICO, o la raíz <svg de un documento SVG— y escribe el prefijo data:image/…;base64, correspondiente, así que un payload sin prefijo deja de ser una imagen rota.

Si los bytes no coinciden con ningún formato conocido, si el alfabeto o el relleno Base64 están mal, o si el navegador no puede dibujar los datos decodificados, la línea de estado dice cuál de esos casos ocurrió. Prueba primero con un archivo pequeño cuya imagen conozcas y decodifica también con otra herramienta lo que vaya a producción.

Herramientas recientes: