Convertir imagen a Base64

Cómo convertir una imagen a Base64

1. En Imagen → Base64, suelta una imagen en la zona de carga o haz clic en ella para elegirla (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
2. Elige el Resultado: Data URI (data:image/png;base64,…), Solo Base64, CSS background-image o Etiqueta HTML , que además incluye el ancho y el alto de la imagen.
3. Haz clic en Copiar, o en Descargar como .txt si el resultado es largo.

La línea bajo la zona de carga indica el formato real (leído de los bytes del archivo, no de su nombre), las dimensiones, el peso del archivo y la longitud de la data URI.

Cómo convertir Base64 de nuevo en imagen

1. En Base64 → imagen, pega el texto en Texto Base64 o data URI. Puedes pegar una cadena Base64 sola, una data URI completa o incluso una regla CSS o una etiqueta <img> enteras: la data URI se encuentra dentro. Los saltos de línea y los espacios se ignoran, y también funciona el Base64 seguro para URL (con - y _).
2. Haz clic en Decodificar imagen. Aparecen la vista previa, el tipo, las dimensiones y el peso.
3. Haz clic en Descargar imagen para guardarla con la extensión correcta.

El tipo se comprueba con los «magic bytes» del archivo, la firma que hay al principio de cada formato de imagen (por ejemplo, 89 50 4E 47 en PNG o FF D8 FF en JPEG). Si una data URI dice ser image/jpeg pero contiene un PNG, la herramienta te lo indica y usa el tipo real. Todo lo que no sea una imagen reconocida se rechaza, y el límite es de 20 MB de datos de imagen.

Cómo funciona Base64

Base64 convierte cada 3 bytes de un archivo en 4 caracteres imprimibles tomados de A–Z, a–z, 0–9, + y /, con = como relleno al final. Por eso el texto codificado ocupa un 33 % más que el archivo: un icono de 30 KB se convierte en unos 40 KB de texto. Una data URI añade una cabecera corta, data:<tipo>;base64,, para que el navegador sepa cómo leerla.

Cuándo incrustar imágenes como data URI

Las data URI resultan prácticas para:

• iconos, logotipos y fondos pequeños en CSS, para ahorrar una petición;
• correos HTML y documentos HTML de un solo archivo que deben funcionar sin archivos externos;
• API JSON y archivos de configuración que solo pueden transportar texto.

No son buena idea para fotos grandes. El texto ocupa un tercio más que el archivo, no se puede guardar en caché por separado de la página o la hoja de estilos que lo contiene y retrasa el renderizado. A partir de unos 10 a 100 KB, un archivo de imagen normal servido con una buena caché suele ser mejor; por eso la herramienta muestra un recordatorio para las imágenes de más de 100 KB.

Todo funciona en tu navegador: las imágenes y el texto pegado nunca se suben.