> PNG | encode | data-uri <

R: Convierte el contenido binario de un archivo .png en una cadena ASCII usando el alfabeto Base64 definido en el RFC 4648. El texto codificado puede pegarse directamente en una etiqueta HTML <img>, en un background-image de CSS, en un mensaje de correo, en el payload JSON de una API o en cualquier otro transporte solo texto. Los propios bytes del PNG no cambian — cada chunk IHDR, IDAT, tRNS e IEND se codifica y puede recuperarse exactamente.

R: Arrastra tu PNG a la zona de soltar (o haz clic para explorar). La herramienta lee el archivo con FileReader.readAsDataURL(), que ya devuelve una URI data:image/png;base64,… lista para usar. Elige URI de datos si quieres pegarla directamente en <img src="…">, o Solo payload Base64 si tu API/base de datos espera solo la parte Base64 sin el prefijo data:image/png;base64,.

R: No. Base64 es una transformación pura de binario a texto — cada byte del PNG original se preserva, incluidos el canal alfa, la paleta y el perfil de color (chunks iCCP/sRGB). Cuando decodificas la cadena de vuelta, el archivo es idéntico bit a bit al original. Un hash SHA-256 del PNG decodificado coincidirá con el del original. Por eso Base64 es la herramienta correcta para incrustar iconos, logos y capturas donde la precisión de píxel importa.

R: Base64 usa 4 caracteres por cada 3 bytes de entrada, así que la cadena codificada es ~33 % más grande que el archivo PNG original. El tamaño exacto es 4 × ⌈n / 3⌉ caracteres, donde n es el tamaño del PNG en bytes. Un PNG de 10 KB se convierte en ~13,6 KB de texto Base64. Como la compresión HTTP (gzip, Brotli) gestiona bastante bien el texto Base64, el sobrecoste real por la red suele estar más cerca del 10-15 % en la práctica.

R: Cada cadena Base64 de PNG empieza por iVBORw0KGgo. Ese prefijo es la firma PNG de 8 bytes 89 50 4E 47 0D 0A 1A 0A recodificada a Base64. Así que iVBORw0KGgoAAAANSUhEUg... siempre es un PNG, y ver ese prefijo es una comprobación visual rápida de que tus datos están intactos. Envuelta como URI de datos queda así:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

R: Pega la URI de datos completa en el atributo src de una etiqueta <img>:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
El navegador decodifica el payload Base64 y renderiza el PNG exactamente como si se cargara desde una URL. No se hace ninguna petición HTTP adicional, lo cual es útil para iconos críticos, firmas de correo y apps offline-first.

R: Envuelve la URI de datos en la función url():
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Para reutilizarla, guárdala en una propiedad personalizada de CSS:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
Los fondos inline eliminan una petición HTTP por icono, pero inflan tu archivo CSS, así que úsalos solo para iconos pequeños (< 4 KB).

R:
JavaScript (navegador): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

R: Usa URIs de datos PNG Base64 cuando:
• la imagen ocupa < 4 KB (para ahorrar un viaje HTTP)
• necesitas incrustarla dentro de un correo HTML (muchos clientes bloquean imágenes remotas)
• estás enviando un informe o dashboard HTML de un único archivo
• almacenas la imagen dentro de un payload JSON o una columna de base de datos
Prefiere un archivo .png externo cuando la imagen es grande, se reutiliza en muchas páginas o necesita caché CDN independiente.

R: Sí. Como Base64 es una transformación bit a bit, cada modo de color PNG está soportado por igual:
• RGBA / color real + alfa — color de 32 bits, transparencia total
• Paleta (PLTE) + tRNS — PNG indexados con transparencia de 1 bit
• Escala de grises + alfa — escala de grises de 8/16 bits con alfa
• PNG de 16 bits a gran profundidad — PNG tipo HDR usados en imagen médica y visualización científica
Todos estos realizan un round-trip limpio por Base64 y se muestran correctamente en los navegadores que entienden PNG.

R: No. Base64 es una codificación, no cifrado. Cualquiera que pueda leer la cadena puede decodificarla de vuelta al PNG original en milisegundos. Si una captura contiene una contraseña, un token de API o información personal, codificarla como Base64 no la protege — usa una capa de cifrado real (AES-GCM, age, PGP) sobre la salida Base64, o transporta la imagen por TLS hacia un servidor que aplique controles de acceso.

R: No hay un tope artificial. Como la codificación se ejecuta localmente, el límite es la memoria de tu navegador — normalmente 100 MB+ en escritorio y 40–60 MB en móvil. Para PNG muy grandes (imágenes médicas o satélite de alta resolución) leemos el archivo por chunks y llamamos a btoa() en cada chunk para que el hilo principal siga respondiendo. Si tu imagen supera los ~100 MB, plantéate transmitirla directamente desde un codificador del lado del servidor en lugar de cargarla en el navegador.

R: Usa PNG → Base64 para logos, iconos de UI, capturas, diagramas y cualquier elemento con transparencia o bordes nítidos (texto, gráficos). PNG es sin pérdidas y admite alfa. Usa JPG → Base64 para fotografías o imágenes con muchos colores donde la compresión con pérdida sea aceptable. Los archivos JPEG suelen ser entre 5 y 20 veces más pequeños que un PNG para fotos, por lo que el payload Base64 es mucho más corto. Regla general: si la imagen vino de una cámara o contiene degradados fotográficos, usa JPG; en el resto de casos, PNG.