Cómo se usa
- Suelta un PNG en la zona de arrastre, haz clic para elegir uno o pega una captura de pantalla desde el portapapeles.
- Deja Convertir a en Mantener original para codificar los bytes originales del PNG, o fija un Ancho máximo para reducir una imagen grande.
- Compara el tamaño original con el tamaño codificado que se muestra para la imagen.
- Copia o descarga la salida en data URI, Base64 puro, etiqueta img, CSS o Markdown.
PNG y Base64
PNG (Portable Network Graphics, tipo MIME image/png) es un formato de mapa de bits sin pérdida con canal alfa completo, lo que lo convierte en la opción habitual para iconos, logotipos, diagramas y capturas de pantalla. Todos los archivos PNG empiezan con la misma firma de 8 bytes, así que todos los data URI de PNG empiezan igual: data:image/png;base64,iVBORw0KGgo....
Base64 no toca los píxeles. Al decodificar la cadena se recupera un archivo idéntico byte a byte, con los mismos colores y las mismas zonas transparentes.
Buenos usos de los data URI de PNG
- Iconos y logotipos pequeños de interfaz que necesitan un fondo transparente.
- Capturas de pantalla dentro de informes HTML autónomos, informes de errores o documentación exportada.
- Gráficos y códigos QR generados en un servidor y devueltos en una respuesta JSON.
- Imágenes creadas con
canvas.toDataURL(), que ya genera data URI PNG de forma predeterminada.
Con las fotos es otra historia. PNG las guarda sin pérdida y los archivos se vuelven grandes; con JPEG o WebP obtendrás una cadena mucho más corta.
Reduce el PNG antes de codificarlo
Cada byte que eliminas del PNG ahorra unos 1,33 caracteres de Base64. Pasa antes el archivo por un optimizador como oxipng o zopflipng (sin pérdida) o pngquant (reduce la paleta). Revisa también el tamaño en píxeles: un icono exportado al triple de su tamaño de visualización normalmente se puede reducir con la opción Ancho máximo.
Convertir a WebP conserva la transparencia y a menudo ocupa mucho menos. Convertir a JPEG elimina la transparencia, así que las zonas transparentes pasan a ser de un color sólido. Volver a codificar en PNG en el navegador no optimiza la compresión, por lo que el resultado puede ser mayor que un original bien optimizado; compara los tamaños antes de copiar.
Cómo usar la salida
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Línea de comandos: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngPreguntas frecuentes
¿Base64 conserva la transparencia del PNG?
Sí. Base64 codifica los bytes del archivo sin cambios, así que el canal alfa se mantiene. La transparencia solo se pierde si conviertes la imagen a JPEG.
¿Por qué todas las cadenas Base64 de PNG empiezan por iVBORw0KGgo?
Esos caracteres son la forma en Base64 de la firma de archivo PNG. Si una cadena que dice ser un PNG empieza de otra manera, es otro formato o está dañada.
¿Puedo pegar una captura de pantalla directamente?
data:image/png.¿Hasta qué tamaño conviene incrustar un PNG como Base64?
Una regla práctica habitual es de unos pocos kilobytes, hasta aproximadamente 10 KB. Las imágenes más grandes funcionan mejor como archivos separados que el navegador puede guardar en caché y cargar en paralelo.