CodeKitHub¿Qué es esta herramienta?
Base64 es una forma de representar datos binarios — como los bytes en bruto de una imagen — como texto plano, usando solo letras, dígitos y un puñado de símbolos. Al ser texto plano, una imagen codificada en Base64 puede incrustarse directamente en HTML, CSS o JSON en lugar de referenciarse como un archivo separado.
Un «data URL» envuelve ese texto Base64 con un pequeño prefijo (data:image/png;base64,) que le indica al navegador qué tipo de archivo es, así puede colocarse directamente en un atributo src o url() y renderizarse sin ninguna petición adicional.
¿Por qué utilizarlo?
- Obtén ambos formatos a la vez — el data URL completo para HTML/CSS, y el Base64 puro (sin prefijo) para incrustar en JSON o archivos de configuración.
- Sin ida y vuelta al servidor: elimina una petición HTTP para iconos pequeños, avatares o imágenes en línea.
- Conserva exactamente los bytes originales del archivo — sin recodificar ni perder calidad, a diferencia de herramientas que decodifican y vuelven a guardar la imagen.
- Muestra la diferencia de tamaño para que sepas qué obtienes a cambio de la comodidad.
- Privado: el archivo se lee localmente con la API FileReader del navegador y nunca sale de tu dispositivo.
Cómo utilizarlo
- Haz clic en el área de carga o arrastra un archivo de imagen sobre ella.
- Copia el data URL completo si vas a pegarlo en un <img src> o un background-image de CSS.
- Copia el Base64 puro (sin el prefijo data:) si lo vas a incrustar en JSON, YAML u otro formato de configuración que ya conozca el tipo de archivo.
- Fíjate en la nota de tamaño — el texto Base64 es aproximadamente un tercio más grande que el archivo binario original.
Ejemplo
Entrada
Un icono PNG de 12 KB.Resultado
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB de texto) más la misma cadena sin el prefijo data:.El aumento de ~33% en el tamaño es inherente a la codificación Base64 (3 bytes binarios se convierten en 4 caracteres de texto) — no es un error de la herramienta.
Dónde se usa cada formato
| Formato | Uso típico |
|---|---|
| Data URL completo | HTML <img src="...">, CSS background-image: url(...), imágenes de correos en línea |
| Base64 puro | Payloads de API JSON, archivos YAML/config, campos BLOB de base de datos, protocolos binarios personalizados |
Base64 y tamaño de imagen — el compromiso en la práctica
La sobrecarga de ~33% significa que incrustar en Base64 es mejor reservarlo para archivos pequeños: un icono de 2 KB se convierte en unos inofensivos ~2.7 KB de texto en línea, pero una foto de 500 KB se convierte en ~665 KB de texto incrustado en tu HTML, lo que ralentiza el análisis y no puede almacenarse en caché por separado de la página.
Si vas a incrustar muchas imágenes o imágenes más grandes, sopesa el beneficio de ahorrar una petición frente al coste de peso de página — y considera comprimir primero.
Preguntas frecuentes
¿Por qué la cadena Base64 es tan grande comparada con mi archivo de imagen?
Base64 codifica cada 3 bytes de datos binarios como 4 caracteres de texto, lo que supone una sobrecarga fija de aproximadamente el 33%. Para una imagen de 100 KB, espera unos 133 KB de texto Base64. Esto es normal e inevitable — es el coste de representar datos binarios como texto seguro y portable.
¿Cuál es la diferencia entre el data URL y la cadena Base64 pura?
El data URL incluye un prefijo data:image/png;base64, que indica a un navegador o renderizador a qué tipo MIME decodifica el texto siguiente. Pega el data URL completo en un src de HTML o un url() de CSS. El Base64 puro (todo lo que va después de la coma) es lo que necesitas cuando un sistema ya conoce el tipo de archivo por separado — por ejemplo un campo JSON como { "format": "png", "data": "<base64 puro>" }.
¿Cuándo debería incrustar una imagen como Base64 en lugar de enlazar a un archivo?
Incrustar en Base64 es útil para imágenes pequeñas y reutilizadas con frecuencia (iconos, logos, gráficos de interfaz diminutos) donde ahorrar una petición HTTP compensa la penalización de tamaño de ~33%, o en contextos donde un archivo separado no es práctico, como correos en línea o exportaciones HTML de un solo archivo. Para fotos grandes o cualquier cosa reutilizada en muchas páginas, un archivo enlazado normal con caché del navegador es casi siempre mejor.
¿Convertir a Base64 cambia o comprime mi imagen?
No. Base64 es una codificación de texto sin pérdida de los bytes originales exactos — no toca los píxeles, la resolución ni la compresión. Si quieres un archivo más pequeño, comprime la imagen primero con un compresor de imágenes y luego convierte el resultado comprimido a Base64.
¿Se sube mi imagen a algún sitio?
No. El archivo se lee directamente en tu navegador mediante la API FileReader y se codifica localmente — nunca se envía por la red.