PNG a Base64

Cómo convertir un PNG a Base64

1. Suelta un archivo .png en el recuadro o elígelo con el selector de archivos. Para codificar una captura de pantalla, cópiala y pulsa Ctrl+V (Cmd+V en Mac) en esta página; no hace falta guardarla antes.
2. Si el PNG es más grande de lo necesario, pon un Ancho máx. o elige WebP en Convertir a. Quitar metadatos (EXIF) elimina los fragmentos de texto y EXIF.
3. Deja Salida como en Data URI, o cambia a CSS, <img>, Markdown, JSON o Base64 simple.
4. Copiar salida. La vista previa muestra el tamaño en píxeles y, tras recodificar, el nuevo tamaño del archivo.

Cómo es un PNG en Base64

Todo PNG empieza por los mismos 16 bytes: la firma de 8 bytes y la cabecera del chunk IHDR, que debe ir primero. En Base64 eso da un comienzo fijo de 22 caracteres:

iVBORw0KGgoAAAANSUhEUg

Así que cualquier cadena que empiece por iVBORw0KGgo es un PNG, ya esté en una respuesta JSON, un archivo de log o una columna de base de datos. El ancho y el alto vienen justo después, empaquetados en los caracteres siguientes.

Como referencia, este es un PNG completo de 1×1 totalmente transparente. El archivo ocupa 70 bytes y el Base64, 96 caracteres:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

Pegar tiene una trampa. Los navegadores y los visores de imágenes suelen poner la imagen copiada en el portapapeles como PNG, sea cual sea su formato original, así que una foto JPEG pegada llega como un PNG que puede ser mucho más grande que el archivo en disco. Suelta el archivo original cuando importe el formato de origen.

Si tu PNG codificado empieza por otra cosa, el archivo no era un PNG. Un archivo .png que en realidad es un JPEG empieza por /9j/, y un WebP renombrado a .png empieza por UklGR. El tipo MIME de la vista previa te indica lo que detectó el navegador.

PNG, JPEG o WebP antes de codificar

PNG no tiene pérdidas, así que es la opción correcta para logotipos, iconos, gráficos de interfaz y capturas con texto. Para fotos es la equivocada: un PNG fotográfico suele ocupar varias veces más que un buen JPEG o WebP de la misma imagen. Como Base64 infla cualquier cosa alrededor de un 33 %, el formato que elijas decide la mayor parte del tamaño final.

El convertidor recodifica a través del canvas del navegador. Eso tiene tres consecuencias:

• Convertir a JPEG pierde la transparencia. Los píxeles transparentes se vuelven blancos.
• Safari no tiene codificador WebP. Si pides WebP allí, recibes PNG, con un aviso que lo indica.
• El codificador del canvas no optimiza los PNG. Recodificar un PNG ya comprimido con un optimizador dedicado puede hacerlo más grande. Compara los tamaños en la vista previa y quédate con el original si gana.

Quitar metadatos (EXIF) elimina de paso los datos auxiliares, como el EXIF y los fragmentos de texto. La mayoría de los PNG llevan poco, pero las capturas y las exportaciones de algunas aplicaciones incluyen nombres de software o marcas de tiempo.

Dónde aparecen los PNG en Base64

• Iconos en CSS: background-image: url("data:image/png;base64,...") para iconos pequeños que no deberían costar una petición extra. Para iconos vectoriales, un SVG suele ser más pequeño; consulta SVG a Base64.
• Salida de canvas: canvas.toDataURL() devuelve por defecto un data URI PNG, y por eso los paneles de firma, los gráficos y los editores de imágenes producen tan a menudo este formato. Base64 a PNG lo convierte de nuevo en archivo.
• Cargas de API: los servicios de capturas, los ejecutores de pruebas y las API de visión de IA intercambian PNG como Base64 dentro de JSON. Comprueba si la API quiere el prefijo data:image/png;base64, o Base64 sin más, y elige Data URI o Base64 simple según corresponda.
• Snapshots de pruebas e informes de errores: las pruebas visuales y los informes de fallos suelen meter las capturas en sus informes JSON o HTML como PNG en Base64, para que un informe siga siendo un único archivo.
• Favicons y páginas de un solo archivo: un pequeño favicon PNG incrustado en <link rel="icon"> mantiene autocontenido un archivo HTML. La página de favicons cubre los detalles.

Codificar un PNG en código

Node.js lee el archivo en un Buffer y lo codifica en una sola llamada:

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

En un navegador, un canvas te da directamente el data URI PNG:

const uri = canvas.toDataURL("image/png");

Consulta Base64 en Node.js para streaming y salida URL-safe, y Base64 en JavaScript para archivos y Blobs en el navegador.

Arreglar un data URI PNG que no se muestra

• El prefijo es incorrecto. Debe ser data:image/png;base64,, con la coma. Si falta ;base64, el navegador lee los caracteres como texto sin más.
• URL-safe está marcado. Los navegadores solo decodifican el alfabeto estándar en las URL data:. Un PNG en Base64 con - y _ aparece como imagen rota.
• Saltos de línea en CSS. Ajustar a 76 es para el correo. En una hoja de estilos, un salto de línea dentro de url("...") invalida la declaración.
• La cadena se cortó. Un PNG termina con un chunk IEND fijo de 12 bytes, así que su Base64 termina en AAAAAElFTkSuQmCC, AABJRU5ErkJggg== o AAAASUVORK5CYII=, según el resto de dividir la longitud del archivo entre 3. Si el final es distinto y la imagen sale a medias o no aparece, la copia se truncó. Valida la cadena para comprobar su longitud y su relleno.

Preguntas frecuentes