Cómo se usa
- Pega la cadena Base64 o el URI data:image/png;base64 completo.
- Revisa la vista previa. Las zonas transparentes aparecen sobre un patrón de cuadros.
- Deja PNG como formato de descarga. Si los datos son JPEG, WebP u otro formato, se convierten a PNG en tu navegador.
- Descarga el archivo .png.
De dónde salen los PNG en Base64
PNG es el formato que con más probabilidad encontrarás en Base64. Llamar a canvas.toDataURL() sin argumentos devuelve un data URI PNG. Las herramientas de automatización de navegadores devuelven las capturas de pantalla como PNG en Base64, por ejemplo page.screenshot({ encoding: 'base64' }) en Puppeteer o get_screenshot_as_base64() en Selenium. Los generadores de gráficos, los generadores de códigos QR y las API de generación de imágenes suelen devolver la imagen como un campo Base64 dentro de un JSON.
Una cadena PNG es fácil de reconocer: siempre empieza por iVBORw0KGgo, la codificación de la firma PNG de 8 bytes que comienza con 89 50 4E 47. Le sigue AAAANSUhEUg, que es el inicio del bloque IHDR, donde se guardan el ancho y el alto.
Las cadenas copiadas de un JSON necesitan antes una comprobación rápida. Por ejemplo, json_encode de PHP escapa las barras inclinadas de forma predeterminada, así que un PNG procedente de una API en PHP puede llegar con secuencias \/. Sustitúyelas por / y quita las comillas que rodean la cadena antes de pegarla.
Por qué guardar como PNG
PNG comprime sin perder ningún detalle y almacena un canal alfa completo, así que las sombras suaves y los bordes suavizados se mantienen intactos. Por eso es la opción natural para capturas de pantalla, elementos de interfaz, diagramas y cualquier imagen que contenga texto. Para fotografías, JPG o WebP generan archivos mucho más pequeños.
Convertir un JPEG o un WebP a PNG conserva exactamente lo que se ve en pantalla, pero no puede recuperar el detalle que la compresión con pérdida ya eliminó, y el PNG suele ser más grande que el original.
Guardar un PNG en Base64 desde código
# Python
import base64
with open('screenshot.png', 'wb') as f:
f.write(base64.b64decode(b64_string))
// Navegador: de data URI a Blob, sin decodificar a mano
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);¿Necesitas la dirección contraria? PNG a Base64 codifica un archivo en una cadena o un data URI.
Preguntas frecuentes
¿Cómo sé si una cadena Base64 es un PNG?
iVBORw0KGgo. Además, la herramienta lee directamente los bytes de la firma, así que indica el formato real aunque el data URI diga otra cosa.¿Convertir a PNG reduce la calidad?
No. PNG no tiene pérdida, así que los píxeles se guardan exactamente como los decodificó el navegador. La única pérdida sería la que ya se hubiera producido en el archivo de origen.
¿Se conserva la transparencia?
Sí. La salida PNG conserva el canal alfa completo. La salida JPEG rellena las zonas transparentes con blanco, y la salida GIF deja cada píxel totalmente transparente o totalmente opaco.
Mi data URI PNG muestra una imagen rota. ¿Qué ocurre?
\/ antes de pegarla.