Qué es una imagen en Base64 (y cuándo conviene usarla)
Base64 es una forma de escribir datos binarios —como los píxeles de una imagen— usando solo letras, números y unos pocos símbolos. En lugar de tener un archivo logo.png aparte, obtienes una cadena de texto larguísima que empieza por data:image/png;base64, y contiene la imagen entera “disuelta” en caracteres. Esa cadena se llama data URI y puedes pegarla directamente en tu HTML o CSS: el navegador la reconstruye sin pedir ningún archivo extra al servidor.
Esta herramienta hace justo esa conversión. Subes una imagen PNG, JPG, GIF, WebP o SVG y, sin salir de tu navegador, te devuelve tres cosas listas para copiar: el data URI completo, la etiqueta <img> ya montada y la regla background-image para CSS. La imagen se lee con FileReader y nunca se sube a ningún servidor: todo ocurre en tu propia máquina.
Cómo convertir una imagen a Base64
- Arrastra la imagen a la zona de carga o pulsa “Elegir imagen”. Acepta PNG, JPG, GIF, WebP y SVG de hasta 20 MB.
- La conversión es instantánea. Verás una vista previa, el tamaño original, el tamaño del Base64 y cuántos caracteres ocupa el data URI.
- Copia lo que necesites: el data URI para pegarlo donde quieras, el snippet
<img>para HTML o la líneabackground-imagepara tu hoja de estilos.
Por qué el Base64 pesa más
Base64 agrupa cada 3 bytes del archivo original en 4 caracteres de texto. Esa proporción 3→4 hace que la versión en texto ocupe siempre alrededor de un 33% más que el binario original. Por eso el truco solo compensa con imágenes pequeñas: iconos, un logo diminuto, un patrón repetido. Con una foto grande, incrustarla en Base64 infla tu HTML o CSS y ralentiza la carga.
| Archivo original | Bytes originales | Caracteres Base64 | Sobrecarga |
|---|---|---|---|
| Píxel transparente (GIF 1×1) | 42 B | 56 | +33% |
| Icono pequeño (PNG) | 1.20 KB | 1.63 KB | +33% |
| Foto mediana (JPG) | 150 KB | 200 KB | +33% |
Ejemplo resuelto
Tomamos el clásico “píxel transparente”, un GIF de 1×1 que pesa exactamente 42 bytes. Al convertirlo, su parte Base64 son 56 caracteres:
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7El data URI completo antepone la cabecera data:image/gif;base64, y queda en 78 caracteres:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7Con ese texto, la herramienta te entrega el snippet HTML listo:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="pixel.gif" />Comprobamos la ida y vuelta: si decodificas esos 56 caracteres de Base64, recuperas exactamente los 42 bytes originales del GIF, byte por byte. Nada se pierde en la conversión; solo cambia el envoltorio.
Preguntas frecuentes
¿Mi imagen se sube a algún servidor?
No. La lectura se hace con FileReader.readAsDataURL dentro de tu navegador, de forma 100% local. La imagen no viaja por internet, así que puedes convertir capturas de trabajo, documentos o material confidencial con total tranquilidad.
¿Cuándo conviene incrustar una imagen en Base64?
Cuando es pequeña y quieres evitar una petición extra al servidor: iconos de un botón, un logo minúsculo, un patrón de fondo o el correo HTML de un boletín. Para fotos grandes es contraproducente, porque el +33% de peso y el hecho de que el navegador no puede cachear el data URI por separado terminan ralentizando la página.
¿Puedo volver del Base64 a la imagen original?
Sí. El proceso es reversible sin pérdida: el Base64 no recomprime ni degrada nada, solo reescribe los mismos bytes en formato de texto. Cualquier decodificador de Base64 —o pegar el data URI en la barra del navegador— reconstruye el archivo idéntico al original.
¿Sirve para SVG?
Sí. Un SVG es texto, y la herramienta lo codifica igual en data:image/svg+xml;base64,…. Es muy práctico para incrustar iconos vectoriales directamente en CSS. Para SVG sencillos existe además la codificación por URL, que suele quedar más corta, pero el Base64 funciona siempre y evita problemas con comillas y caracteres especiales.
¿Por qué el data URI es tan largo?
Porque contiene la imagen entera convertida en texto, más la cabecera que indica el tipo (data:image/png;base64,). Cuantos más bytes tenga el archivo, más largo será: recuerda la relación de 3 bytes por cada 4 caracteres. No es un error; es el tamaño esperado.