DEVELOP.07 BASE64 IMAGE

Convertidor de imágenes Base64

Edita o pega Base64 y ve la vista previa en directo; las imágenes se procesan en el navegador.

SOURCE

Subir imagen

Suelta una imagen aquí

o haz clic para JPG, PNG, GIF, WebP, SVG, BMP o ICO

Máximo 10 MB · el archivo permanece en este navegador

Elige una imagen para codificarla y previsualizarla

BASE64

Código Base64

Esperando una imagen o código Base64Procesamiento local con FileReader y Data URI · sin subir ni guardar

§ 01

Un flujo claro para codificar y decodificar

Añade contenido

Pega o edita una Data URI o Base64, o suelta una imagen para sustituir el contenido actual.

Comprueba la vista previa

El panel derecho analiza el contenido mientras limpia espacios, repara el relleno y detecta formatos comunes.

Copia o descarga

Revisa la vista previa, las dimensiones y el tamaño; después copia el código o descarga la imagen.

§ 02

Base64 cambia la representación, no los píxeles

Base64 convierte grupos de 6 bits binarios en caracteres imprimibles para transportar datos dentro de JSON, HTML o CSS. Es codificación, no compresión, y no reduce la calidad.

La contrapartida es aproximadamente un tercio más de tamaño. Los iconos pequeños pueden incrustarse; las imágenes grandes aumentan el documento y pierden caché independiente.

§ 03

Entradas y usos en ambas direcciones

Dirección

Entrada

Útil para

Imagen a Base64

JPG, PNG, GIF, WebP, SVG, BMP, ICO

Web, JSON de API, informes de un solo archivo

Base64 a imagen

Data URI o Base64

Inspeccionar API, restaurar recursos, comprobar MIME

§ 04

Usa Data URI para recursos pequeños y estables

Una Data URI combina tipo MIME y datos Base64 en una dirección utilizable. La URI completa sirve para atributos de imagen, Base64 para API con MIME separado y la salida HTML o CSS evita ensamblar a mano.

Como regla práctica, incrusta iconos de pocos KB. Las imágenes reutilizadas, grandes o con caché independiente suelen encajar mejor en una URL normal.

§ 05

Convertir imágenes a Base64 en código

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

Preguntas frecuentes

Q1¿Se puede previsualizar Base64 sin prefijo Data URI?

Sí. Detecta firmas de PNG, JPEG, GIF, WebP y SVG; si no reconoce la firma usa el tipo MIME alternativo.

Q2¿Por qué Base64 aumenta el tamaño?

Cuatro caracteres representan tres bytes originales, por lo que el cuerpo crece aproximadamente un tercio, más el pequeño prefijo de la Data URI.

Q3¿La conversión reduce la calidad?

No. Lee los bytes originales y solo cambia la representación; no remuestrea ni comprime la imagen.

Q4¿Se suben las imágenes o se guardan los códigos?

No. Lectura, validación, vista previa y descarga ocurren en la página actual sin subir ni almacenar datos.

Q5¿Por qué no se muestra una cadena Base64?

Puede estar truncada, contener caracteres no admitidos, declarar un MIME distinto o no representar una imagen que el navegador pueda decodificar.