Convertidor de imagen a Base64

Convierte una imagen en texto que puedes pegar, y ese texto de nuevo en imagen

El conversor de imagen a Base64 transforma un archivo de imagen como PNG, JPG, GIF, WebP o SVG en un texto con la forma data:image/png;base64,… (una Data URL) y, al revés, recibe texto Base64 y lo devuelve a la imagen original. Si añades una imagen en el cuadro izquierdo de la mesa de trabajo de arriba, el Base64 aparece en el derecho; si pegas Base64 en el derecho, la imagen aparece a la izquierda. No hace falta elegir ningún modo.

El resultado se puede copiar de cinco formas: Data URL, solo Base64, HTML <img>, CSS background-image y Markdown. La escala de tamaño de abajo muestra además cuánto crece el archivo al convertirlo en texto y si herramientas de compilación como Vite y webpack incluyen ese tamaño automáticamente con su configuración por defecto. Los archivos no se suben a ningún servidor: solo se leen dentro de este navegador.

¿En qué situaciones se usa?

Base64 reescribe un archivo hecho de ceros y unos usando solo 64 caracteres. Al convertir una imagen en texto, puedes ponerla incluso donde solo cabe texto.

• Poner un icono pequeño directamente en CSS o HTML: sirve para evitar una petición de archivo más por un solo icono. Es la misma razón por la que las herramientas de compilación convierten las imágenes pequeñas en Data URL de forma automática.
• Crear un documento de un solo archivo: en informes, guías o demos sin conexión, donde basta enviar un único archivo HTML sin que se rompan las imágenes, se incluyen las imágenes dentro del texto.
• Enviar imágenes en JSON o por una API: JSON solo contiene texto, así que la imagen se convierte en Base64 y se guarda en un único campo. Para comprobar qué imagen es un valor almacenado, se hace la conversión inversa.
• Revisar Base64 que quedó en registros o bases de datos: si en un registro de errores o en una base de datos encuentras una cadena larga que empieza por iVBORw0KGgo…, basta con pegarla para ver de qué imagen se trata.

Cómo usar el conversor

1. Pulsa Elegir imágenes o arrastra imágenes a la mesa de trabajo. Una imagen copiada se añade con Ctrl+V (⌘+V en Mac) o con el botón Pegar. Puedes añadir hasta 20 a la vez y ver cada una con los números de abajo.
2. En los botones de formato de arriba a la derecha, elige la forma que encaje con el lugar donde vas a pegar. Con SVG puedes elegir entre Codificación URL y Base64, y cada botón muestra su número de caracteres.
3. Pulsa Copiar o Guardar. Si añadiste varias imágenes, aparece Copiar todo, y si eliges CSS se crea una clase por cada nombre de archivo.
4. Para hacerlo al revés, pega Base64 o una dirección data: en el cuadro derecho. Aunque pegues un texto HTML o CSS entero, se busca y se lee la dirección data: que contiene, y la imagen restaurada se descarga con Guardar imagen.

El icono, la foto y el logotipo que se ven en la pantalla inicial son archivos de ejemplo. En la foto de ejemplo se incluyó a propósito, como lugar de la toma, unas coordenadas cercanas al Ayuntamiento de Seúl. Si pulsas el ejemplo de la foto, verás cómo aparece el aviso de ubicación en el campo de datos de la foto.

Formas del resultado y dónde pegarlas

La forma HTML incluye el ancho y el alto reales de la imagen como width y height. Así el navegador reserva el espacio antes de leer la imagen y la página no da saltos. En alt se pone el nombre del archivo, por lo que conviene reescribirlo como una frase que describa la imagen.

Por qué Base64 hace crecer el archivo cerca de un tercio

Los archivos de un ordenador se organizan en unidades de 8 bits (1 byte), mientras que un carácter Base64 representa solo 6 bits. Por eso RFC 4648 establece que 3 bytes (24 bits) se dividen en cuatro trozos de 6 bits y se escriben como 4 caracteres. La tira de bits de la mesa de trabajo de arriba muestra este proceso con los primeros 6 bytes de tu archivo. Si el último grupo tiene menos de 3 bytes, los bits sobrantes se rellenan con 0 y los huecos de carácter vacíos se escriben con =.

Caracteres Base64 = 4 × ⌈bytes originales ÷ 3⌉ · Caracteres de la Data URL = ese valor + el prefijo (data:image/png;base64,, 22 caracteres)

Ahora bien, los servidores web suelen comprimir el texto con gzip u otro método antes de enviarlo. Los caracteres Base64 usan solo 64 símbolos, por lo que al comprimir casi desaparece la parte añadida. La barra Transferencia gzip de la escala de tamaño se mide comprimiendo el resultado actual con la función de compresión incorporada en el navegador (CompressionStream). A continuación tienes los resultados de los tres archivos de ejemplo medidos en Chrome. Cada navegador usa un compresor distinto, así que los valores pueden variar en unos pocos bytes.

Es decir, con compresión, el Base64 de PNG y JPG llega con un tamaño parecido al original. Aun así, una imagen incluida como Base64 se descarga cada vez que se recibe el documento, y el navegador no puede guardar el archivo de imagen por separado para reutilizarlo. Por eso lo habitual es usarlo solo con imágenes pequeñas.

¿Hasta qué tamaño conviene incluir una Data URL?

No hay una regla fija, pero los valores por defecto de las herramientas de compilación más usadas son una referencia realista. Las marcas de la escala de tamaño comparan el tamaño de tu archivo original con estos dos valores.

• Menos de 4.096 bytes: ambas herramientas lo incluyen como Data URL con su configuración por defecto. Aquí entran iconos y pequeños motivos que no se repiten muchas veces.
• De 4.096 a 8.096 bytes: es el tramo en que las herramientas no coinciden. El icono de ejemplo (6.960 bytes) está aquí: el mismo archivo se queda como archivo aparte en Vite, pero webpack lo incluye como texto.
• Más de 8.096 bytes: ambas herramientas lo dejan como archivo aparte. Las imágenes grandes, como las fotos, deben seguir siendo archivos para que el navegador pueda guardarlas por separado y reutilizarlas.

En un sitio que usa una política de seguridad de contenido (CSP), hay que añadir data: por separado en img-src para que se muestren las imágenes Data URL. CSP Level 3 establece que los esquemas distintos de http y https deben indicarse de forma explícita.

Con SVG, la codificación URL suele ser más corta que Base64

SVG ya es una imagen hecha de texto, así que no hace falta volver a convertirla a Base64. Chris Coyier, de CSS-Tricks, resumió que al incluir un SVG como Data URL, pasarlo a Base64 lo deja en un 133 a 136% del original, y que dejarlo como texto también se comprime mejor. Al añadir un SVG, esta herramienta calcula el número de caracteres de ambos métodos y elige primero el más corto.

• La codificación URL convierte #, <, >, %, los saltos de línea y los caracteres no ASCII en secuencias de porcentaje (como %23). En concreto, si se deja # tal cual, lo que sigue a un valor de color se corta como fragmento de la dirección y la imagen se rompe.
• Las comillas dobles que rodean los valores de atributo se cambian por comillas simples. Así el resultado se puede poner tal cual dentro de src="…" en HTML o de url("…") en CSS. Si el valor de un atributo ya contiene una comilla simple, no se cambia y se deja como %22.
• Los espacios, =, : y / se dejan como están. Dentro de un atributo HTML entre comillas y de una dirección CSS, el navegador lee estos caracteres sin problema. En la forma Markdown, si la dirección tiene espacios, se envuelve en <…>.

Al convertir Base64 de nuevo en imagen

La mayoría de los formatos de archivo empiezan con unos bytes fijos, así que con los primeros caracteres del Base64 se puede deducir el formato. Aunque falte el prefijo data:image/…, esta herramienta averigua el formato por el comienzo de los bytes decodificados, y avisa si el formato indicado en el prefijo no coincide con el contenido real.

Los textos pegados suelen traer cosas sobrantes. La herramienta corrige por sí sola los casos siguientes y anota lo que corrigió debajo del cuadro de la imagen.

• Saltos de línea y espacios: el correo electrónico (MIME) obliga a cortar el Base64 en líneas de 76 caracteres como máximo, por lo que un texto copiado del original de un mensaje trae saltos de línea.
• Base64 URL-safe: variante que usa - y _ en lugar de + y / para poder ir en una dirección (RFC 4648 §5). Se lee tras cambiarlos por los caracteres estándar.
• Relleno ausente: si falta el = final, se completa según la longitud. También se decodifica un = convertido en secuencia de porcentaje, como %3D.
• Una dirección data: dentro del texto: aunque pegues un texto entero con HTML <img>, CSS url() o Markdown, se busca y se lee la primera dirección data: y se indica cuántas había.

En cambio, una longitud que al dividirla entre 4 deja resto 1 no se puede reparar. Base64 lleva 3 bytes por cada 4 caracteres, así que sobrar un único carácter solo ocurre cuando se cortó el final al copiar.

Errores frecuentes

• Creer que Base64 es cifrado: Base64 es una notación que cualquiera puede revertir. No debe usarse para ocultar contraseñas ni datos personales.
• Creer que comprime: Base64 en realidad hace el archivo cerca de un tercio más grande. Para reducir un archivo, comprime primero la imagen o conviértela a WebP y después conviértela a Base64.
• Creer que se borran los datos de la foto: Base64 traslada los bytes tal cual, así que la ubicación de la toma y los datos del dispositivo guardados en Exif se conservan. Esta herramienta indica en el campo de datos de la foto si un JPEG, PNG o WebP tiene Exif y datos de ubicación.
• Pegar una Data URL en la barra de direcciones: por seguridad, los navegadores actuales bloquean ir a una dirección data: desde la barra de direcciones. Para ver el contenido, pégalo en el cuadro derecho de esta herramienta.
• Escribir image/jpg: el nombre de tipo estándar de JPEG es image/jpeg. Si al convertir de nuevo el prefijo dice image/jpg, la herramienta te avisa, y un botón de formato lo reescribe con el nombre estándar.

Límites y precauciones

• Cada archivo puede tener hasta 10 MB (10.485.760 bytes) y se pueden añadir hasta 20 a la vez. Si el resultado supera los 400.000 caracteres, el cuadro de texto muestra solo el principio y el final, y copiar y guardar usan el texto completo. Los KB y MB de la pantalla usan unidades de 1.024 bytes.
• La herramienta no descarga imágenes desde una dirección (URL). Guarda primero la imagen y luego añádela.
• Las fotos HEIC se pueden convertir, pero la vista previa solo funciona en Safari 17 o posterior en macOS e iOS. TIFF y JPEG XL también pueden no mostrar vista previa según el navegador.
• Los bytes se trasladan tal cual, sin cambiar el tamaño ni el formato. Un GIF o WebP animado sigue moviéndose al convertirlo de nuevo.
• La barra de transferencia gzip es el valor de comprimir solo este resultado. En una página real se comprime junto con el texto que lo rodea, así que la cifra puede diferir un poco, y en un navegador sin función de compresión la barra no se muestra.
• Según el navegador, Chromium y Firefox aceptan direcciones data: de hasta 512MB y Safari de hasta 2048MB. El límite de 10 MB de esta herramienta es mucho menor, pero ya es un tamaño grande para un documento real.

Fecha de referencia Las especificaciones de Base64 y data:, los valores por defecto de Vite y webpack, y los límites de longitud y la compatibilidad con la compresión de los navegadores se comprobaron en las fuentes originales el 2026-10-20. Los valores por defecto de las herramientas de compilación pueden cambiar cuando salga una nueva versión.

Fuentes

• 01RFC 4648: The Base16, Base32, and Base64 Data Encodings24 bits en 4 caracteres (§4), relleno = (§3.2), caracteres fuera del alfabeto (§3.3), base64url URL-safe (§5)
• 02RFC 2397: The "data" URL schemeSintaxis de las URL data: tipo de medio opcional, indicador ;base64 opcional, una coma y los datos
• 03MDN: data: URLstext/plain si se omite el tipo, límites de longitud (Chromium y Firefox 512MB, Safari 2048MB), navegación de nivel superior bloqueada
• 04Vite: Build Options — build.assetsInlineLimitValor por defecto 4096 (4 KiB); los recursos menores se incluyen como URL Base64
• 05webpack: Module — parser.dataUrlConditionmaxSize por defecto 8096 bytes; se incluyen los de este tamaño o menores
• 06webpack: Asset ModulesEl tipo asset trata como inline los archivos menores de 8kb
• 07CSS-Tricks: Probably Don't Base64 SVG (2014-10-21)Pasar SVG a Base64 lo deja en un 133 a 136%; como texto se comprime mejor
• 08W3C: Content Security Policy Level 3§1.3 Los esquemas distintos de http y https deben indicarse explícitamente en la política
• 09RFC 2045: MIME Part One§6.8 Las líneas de Base64 tienen como máximo 76 caracteres
• 10MDN: CompressionStreamCompresión gzip incorporada en el navegador; compatible con los principales navegadores desde mayo de 2023
• 11Can I use: HEIF/HEIC image formatSolo se muestra en Safari 17 o posterior (macOS e iOS)

Preguntas frecuentes

Herramientas que se usan junto con esta