¿Qué es Codificador de imagen a Base64?

El Codificador de Imágenes a Base64 convierte archivos de imagen (PNG, JPEG, GIF, SVG, WebP) en cadenas de texto codificadas en Base64. Incrusta imágenes directamente en HTML, CSS o JSON sin alojar archivos externos, con menos peticiones HTTP y un marcado más sencillo.

El codificador lee los bytes de la imagen en tu dispositivo y genera ocho salidas: Base64 sin formato, un data URI listo para atributos src=, una etiqueta <img> completa, una declaración CSS background-image, un enlace de favicon HTML, un envoltorio XML, un fragmento de JavaScript con Image y un objeto JSON con el nombre del archivo, el tipo MIME, el tamaño y el data URI. Activa Optimizar para redimensionar el lado más largo y recodificar primero como JPEG o WebP, lo que puede reducir la cadena a la mitad antes de incrustarla. Suelta o pega varias imágenes a la vez y cada una tendrá su propia salida etiquetada. ¿Necesitas el camino inverso? La sección Decodificar Base64 a imagen convierte cualquier cadena en una imagen visible y descargable. Formatos admitidos: PNG, JPEG, GIF, SVG, WebP, BMP, ICO, AVIF y HEIC de hasta 20 MB cada uno.

Cómo usar

1. Paso 1: sube una imagen arrastrándola, haciendo clic en el área de carga o pegándola con Ctrl+V. Para reducirla antes, abre Opciones de codificación y ajusta la dimensión máxima o la calidad.
2. Paso 2: elige un formato de salida: Base64 sin formato, data URI, etiqueta img HTML, background-image CSS, enlace de favicon HTML, XML, un fragmento de JavaScript con Image o un objeto JSON para cargas útiles de API.
3. Paso 3 — Copia el resultado al portapapeles o descárgalo como archivo de texto.

Cuándo usar

• Incrustar logos o iconos pequeños en correo HTML para que se vean sin hospedaje externo.
• Insertar sprites SVG pequeños dentro de una hoja de estilo y ahorrar una petición HTTP que bloquearía el render.
• Llevar una imagen dentro de un JSON, JWT o YAML cuando no se permiten URLs externas.

Resultado

Tienes un icono de logotipo de 2 KB que quieres incrustar directamente en una plantilla de correo electrónico. Sube el archivo PNG, copia la salida de URI de datos y pégala en el atributo src de tu etiqueta img HTML: sin necesidad de alojamiento externo.

Preguntas frecuentes

¿La codificación Base64 hace más grande el archivo?

Sí, alrededor de 33% más. Base64 representa tres bytes binarios con cuatro caracteres ASCII, así que un PNG de 30 KB pasa a unos 40 KB de texto. Solo compensa con archivos menores a 5 KB donde se ahorra una petición HTTP.

¿Cuándo conviene incrustar la imagen con Base64 y cuándo enlazarla?

Incrusta cualquier archivo bajo 4 o 5 KB que aparezca en la primera pantalla y sea difícil de cachear (avatares por usuario, iconos de un solo uso). Enlaza lo que se reutilice entre páginas para que la caché del navegador lo sirva otra vez.

¿Por qué mi data URI empieza con data:image/png;base64,?

Ese prefijo es el tipo MIME. data:image/png le dice al navegador que los bytes son PNG, base64 indica la codificación y la coma separa la cabecera del contenido. Sin esto el decodificador no puede identificar el formato.

¿Se puede decodificar el Base64 de vuelta a una imagen visible?

Sí. Abre la sección «Decodificar Base64 a imagen» de esta página, pega tu data URI o el Base64 sin cabecera, y verás la imagen y podrás descargarla. También funciona el Base64 seguro para URL (la variante con - y _).

¿Vale la pena codificar SVG en Base64?

Por lo general no. SVG ya es texto, así que codificar el data URI con URL-encoding pesa menos que con Base64. La herramienta acepta SVG por si necesitas una sola cadena transportable.

Herramientas relacionadas