Cómo usarlo
En «Dirección» eliges entre «Codificar» y «Decodificar».
- Codificar: con «Tipo de entrada» en «Texto», lo que escribas en «Texto original» aparece en «Resultado en Base64».
HellodaSGVsbG8=ycafédaY2Fmw6k=. Si cambias a «Archivo», aparece el recuadro para subir un archivo. - Decodificar: pega en «Cadena Base64» una cadena Base64 o una URL
data:y en «Resultado decodificado» verás el texto original.
Junto al resultado están «Enviar el resultado a decodificar» y «Enviar el resultado a codificar», que llevan lo que acaba de salir a la entrada del sentido contrario. Vienen bien para deshacer al momento lo que has codificado y comprobar que coincide con el original.
La casilla «Compatible con URL (-_, sin relleno)» vale tanto para codificar texto como para decodificar. Al codificar archivos no existe esa opción.
Lo que se traduce son bytes, no letras
Base64 es una notación que convierte cada 3 bytes en 4 caracteres. Para codificar un texto, por tanto, primero hay que pasar sus caracteres a bytes, y esta herramienta lo hace siempre en UTF-8. En UTF-8 el carácter € ocupa 3 bytes, así que en Base64 son exactamente 4 caracteres: 4oKs.
Cuando el número de bytes no es múltiplo de 3, se añade = al final hasta completar el grupo de 4 caracteres. Eso es el relleno.
| Original | Bytes | Resultado en Base64 |
|---|---|---|
a |
1 | YQ== |
ab |
2 | YWI= |
abc |
3 | YWJj |
€ |
3 | 4oKs |
😀 |
4 | 8J+YgA== |
Como 3 bytes se convierten en 4 caracteres, el resultado es más o menos un tercio más largo que el original. Es lo que crece un archivo cuando lo conviertes en data URL para incrustarlo en HTML o CSS.
La función btoa que traen los navegadores solo acepta caracteres con código entre 0 y 255, de modo que da error con cadenas que contengan caracteres fuera de ese intervalo, como € o los emojis. Esta herramienta no la usa: convierte directamente los bytes UTF-8, así que codifica cualquier carácter y al decodificar lo devuelve también como UTF-8.
Qué cambia la opción compatible con URL
Además de letras mayúsculas, minúsculas y cifras, el Base64 estándar usa los caracteres + y /, y = como relleno. Los tres significan otra cosa dentro de una URL, de modo que para meter el resultado en una dirección, en el valor de un parámetro o en un nombre de archivo hay que marcar «Compatible con URL (-_, sin relleno)». Es la notación que usan los JWT (JSON Web Token).
| Original | Sin la opción | Con la opción |
|---|---|---|
>>>??? |
Pj4+Pz8/ |
Pj4-Pz8_ |
a |
YQ== |
YQ |
Al decodificar, la opción solo tiene que coincidir si la cadena contiene +, /, - o _. Si pegas Pj4-Pz8_ sin la opción, sale el error de carácter no válido -; si pegas Pj4+Pz8/ con la opción, el mismo error salta en +. Una cadena que no tiene ninguno de esos cuatro caracteres, como SGVsbG8=, se decodifica de las dos maneras. El relleno puede estar o no estar, con independencia de la opción (SGVsbG8 también se lee como Hello).
De archivo a data URL y de Base64 a archivo
Con «Tipo de entrada» en «Archivo» puedes arrastrar un archivo o elegirlo. Vale cualquier formato y el tamaño máximo es de 10 MB. El resultado es una data URL con el tipo de archivo delante, del estilo data:image/png;base64,iVBORw0KG..., lista para pegarla en una etiqueta img de HTML o en un url() de CSS. Si el navegador no reconoce el tipo de archivo, lo marca como application/octet-stream. Una data URL en notación compatible con URL no la leería el navegador, así que siempre se genera con la notación estándar y con relleno.
El camino de vuelta se hace en Decodificar. Al pegar Base64 o una data URL aparece junto al resultado el botón de descarga, y con él puedes guardar como archivo también lo que no es texto.
- Si pegas una data URL, solo se lee lo que viene después de
base64,, y en ese caso se interpreta con la notación estándar aunque la casilla compatible con URL esté marcada. - El archivo se llama
decodedmás una extensión. Si el tipo de la data URL es PNG, JPEG, GIF, WebP, SVG, ICO, PDF, TXT, CSV, JSON, ZIP, MP3 o MP4, lleva la extensión correspondiente (decoded.png, etc.). - Con cualquier otro tipo, o con Base64 a secas que no indica ninguno, se descarga como
decoded.bin. Si sabes qué formato era, cámbiale la extensión después. - Una data URL sin
;base64, comodata:text/plain,hello, no es Base64 y da el error de carácter no válido:.
Los tres errores al decodificar
| Mensaje de error | Con una entrada como | Qué significa |
|---|---|---|
| Hay un carácter que no es válido en Base64 | Pj4-Pz8_ (sin la opción) |
Hay un carácter que no existe en la notación elegida. El mensaje indica cuál es. |
| La longitud o el relleno (=) de Base64 no es válido | SGVsb, SGVsbG8== |
El número de caracteres no cuadra, sobran = o hay alguno en medio. Es habitual cuando al copiar se corta el final. |
| Los bytes decodificados no son texto UTF-8 válido | iVBORw0KGgo= |
El Base64 es correcto, pero el contenido no es texto. |
En el tercer caso aparece junto al resultado «Ver en hexadecimal». Al pulsarlo se listan los bytes como pares de cifras hexadecimales, y «Ver como texto» devuelve a la vista anterior. El hexadecimal de iVBORw0KGgo= es 89 50 4e 47 0d 0a 1a 0a: los bytes del segundo al cuarto (50 4e 47) son las letras PNG, lo que delata que es el comienzo de un archivo PNG. Aunque se muestre este error, el botón de descarga sigue funcionando.