Cómo se usa
En la pestaña «Imagen → Base64», arrastra una imagen, haz clic para elegir una o pega una imagen copiada con Ctrl+V (⌘+V en Mac). Se admiten PNG, JPEG, GIF, WebP, SVG, AVIF, ICO y BMP de hasta 10 MB. Junto a la vista previa verás el formato, el ancho × alto en píxeles, el tamaño original y el tamaño en Base64 con el aumento justo debajo; más abajo aparecen cinco formatos de salida, uno por línea:
- Data URL:
data:image/png;base64,…, el valor que pones directamente ensrcourl() - Base64 sin prefijo: solo los datos, sin el prefijo
data:…;base64,(para API o JSON) - HTML:
<img src="…" alt=""> - CSS:
background-image: url("…"); - Markdown:
Las cadenas largas se acortan por el medio en pantalla, pero el botón de copiar siempre copia la cadena completa. El atributo alt del HTML queda vacío: rellénalo con un texto que describa la imagen.
Para detectar el formato se mira primero la firma del inicio del archivo (bytes mágicos), antes que el nombre. Un archivo con extensión .jpg que en realidad es PNG se indica correctamente como image/png.
La vista previa de SVG usa un elemento img, por lo que no se ejecutan los scripts incluidos en él.
El formato de una data URL
Una data URL sigue el formato definido en el RFC 2397: data:[<tipo de medio>][;base64],<datos>. El tipo de medio (por ejemplo, image/png) indica al navegador qué clase de datos son, y ;base64 señala que los datos están codificados en Base64. Sin ;base64, los datos se leen como texto con codificación URL (codificación por porcentaje). Los datos binarios, como las imágenes, suelen insertarse en Base64; los datos de texto, como SVG, también pueden insertarse con codificación URL.
Cada carácter de Base64 solo lleva 6 bits, así que cada 3 bytes se representan con 4 de 64 caracteres posibles (RFC 4648) y el resultado ocupa alrededor de un 33 % más que el original. Por ejemplo, si añades un PNG de 10 KB (10.240 bytes), obtienes 13.656 caracteres, unos 13,3 KB, y en «Aumento» aparece +33,4 %. «Tamaño en Base64» no cuenta el prefijo data:image/png;base64, de 22 caracteres, por eso el número de caracteres junto a la línea «Data URL» es algo mayor: 13.678. En archivos muy pequeños, el relleno = final puede subir un poco el aumento.
Cuándo conviene insertar la imagen y cuándo no
Si insertas una imagen en HTML o CSS como data URL, el navegador no tiene que pedir un archivo de imagen aparte. Esto encaja con iconos y logotipos pequeños de pocos KB, y con documentos HTML o ejemplos de código que deben funcionar en un único archivo.
Con fotos grandes, en cambio, no sale a cuenta:
- El tamaño crece alrededor de un 33 %. El porcentaje es casi el mismo en cualquier archivo, pero lo que realmente se añade no es lo mismo. Un icono de 2 KB (2.048 bytes) pasa a 2.732 caracteres y solo suma 684 bytes, mientras que una foto de 2 MB (2.097.152 bytes) pasa a 2.796.204 caracteres y suma unos 683 KB. Después de añadir la imagen, compara «Tamaño original» con «Tamaño en Base64» y decide si tu archivo HTML o CSS puede crecer esa cantidad.
- La imagen va dentro del archivo HTML o CSS, así que no se almacena en caché por separado. Si varias páginas usan la misma imagen, se descarga de nuevo con cada una.
- Un archivo CSS más grande puede retrasar el renderizado hasta que llega la hoja de estilos completa.
En SVG, la codificación URL es más corta
SVG es un formato de imagen basado en texto, así que no necesita Base64. Base64 aumenta el tamaño alrededor de un 33 %, mientras que la codificación URL solo sustituye unos pocos caracteres problemáticos, por lo que suele ser más corta. Al añadir un archivo SVG puedes elegir «Codificación URL» en «Codificación del SVG», y se muestran los tamaños de ambas opciones uno al lado del otro. La herramienta junta los saltos de línea y los espacios seguidos en un solo espacio, cambia las comillas dobles por simples (si el archivo ya tiene comillas simples, codifica las dobles como %22) y solo codifica caracteres como <, >, # y %. El resultado se puede poner directamente en un atributo HTML o en un url("…") de CSS. Con «Codificación URL», la línea «Base64 sin prefijo» desaparece y la línea de Markdown sale con la forma  por los espacios que quedan en el resultado. Un SVG que no esté en UTF-8 solo admite Base64.
Volver a convertir Base64 en imagen
Pega una data URL o una cadena Base64 sin prefijo en la pestaña «Base64 → Imagen» y aparecerán una vista previa y un botón de descarga. Se ignoran los espacios y saltos de línea, y también se aceptan cadenas con caracteres seguros para URL (-, _) o sin el relleno =. El formato se detecta automáticamente por los bytes mágicos. Por ejemplo, PNG empieza por 89 50 4E 47, JPEG por FF D8 FF y GIF por GIF87a o GIF89a. Si el formato indicado en la data URL no coincide con los datos reales, la imagen se muestra en su formato real y se te avisa. Si no se puede detectar el formato, elígelo tú en «Formato de imagen».