image Conversor de Imágenes Base64 star

Cómo Funciona

Esta herramienta funciona en dos direcciones. En el modo Imagen → Base64, elige un archivo con el selector nativo del navegador; la herramienta lo lee con la API FileReader.readAsDataURL() y genera un URI de datos completo — una cadena como data:image/png;base64,iVBORw0KG... — que se muestra en un cuadro, mientras que el contenido Base64 en bruto (sin prefijo) se muestra en un segundo cuadro para que puedas tomar la forma que necesites, con un botón de copiar de un solo clic para cada una. En el modo Base64 → Imagen, pega en el área de texto ya sea un URI de datos completo o solo el texto Base64 puro; si pegas Base64 puro sin prefijo, la herramienta añade automáticamente una cabecera data:image/png;base64, para que el navegador pueda seguir mostrándola, y luego aparece una vista previa en vivo con una etiqueta <img> junto con un botón de descarga que guarda los bytes decodificados como un archivo de imagen real.

La codificación Base64 toma datos binarios y los representa usando solo 64 caracteres ASCII imprimibles (A–Z, a–z, 0–9, + y /), lo que permite incrustar una imagen —inherentemente binaria— dentro de formatos de solo texto como HTML, CSS, JSON o una URL. El mecanismo es fijo y matemático: cada 3 bytes (24 bits) del archivo original se convierten exactamente en 4 caracteres Base64 (4 × 6 bits), rellenados con = cuando la longitud de entrada no es múltiplo de 3. Esa proporción de 3 bytes de entrada por 4 caracteres de salida es también la razón por la que la salida Base64 siempre es aproximadamente un 33% más grande que el binario original — 4 dividido entre 3 es aproximadamente 1,333 —, una sobrecarga matemática fija, no una aproximación ni un ajuste de calidad.

Datos Útiles

Incrustar una imagen como URI de datos directamente en tu HTML o CSS tiene una ventaja real: elimina una solicitud HTTP adicional, algo que importa para recursos muy pequeños y reutilizados con frecuencia, como iconos, sprites pequeños o un logotipo diminuto incrustado en una plantilla de correo electrónico donde las imágenes externas podrían estar bloqueadas. La desventaja se invierte para cualquier cosa más grande: un URI de datos no puede almacenarse en caché de forma independiente por el navegador como sí puede hacerlo un archivo .png o .jpg enlazado, infla el tamaño del archivo HTML/CSS que lo contiene (en ese mismo ~33%) y bloquea el renderizado de ese archivo hasta que se haya descargado todo el bloque codificado. Como regla general, los URI de datos son adecuados para recursos de pocos kilobytes y poco adecuados para fotografías, imágenes principales o cualquier cosa que el usuario quiera que se almacene en caché entre cargas de página.

El prefijo de tipo MIME — la parte image/png, image/jpeg o image/webp de data:image/png;base64,... — no es decorativo. Es lo que le indica al navegador (o a cualquier otro programa que lea la cadena) a qué decodificador entregar los siguientes bytes; sin él, o con uno incorrecto, un contenido Base64 por lo demás válido puede no renderizarse o hacerlo como un tipo de archivo completamente distinto. Por eso exactamente esta herramienta añade automáticamente un prefijo PNG cuando pegas Base64 puro sin ninguno especificado — un valor predeterminado razonable, aunque conviene cambiarlo para que coincida con el formato real del archivo original si sabes que era un JPEG o WebP.