Codificación PNG
Convertidor de PNG a Base64
Convierte archivos PNG a data URIs Base64 preservando la transparencia. Copia fragmentos HTML y CSS en un solo paso.
4.8 / 5 124 valoraciones
Espacio de trabajo PNG a Base64
Sube un PNG y copia la salida codificada para HTML, CSS o uso en API.
Arrastra y suelta un PNG aquí, o haz clic para elegir un archivo
Tamaño máximo de archivo 10 MB
¿Necesitas decodificar Base64 de vuelta a PNG? Abre el convertidor Base64 a Imagen
Convertir PNG a Base64
PNG es una buena opción para logotipos, iconos y recursos de interfaz porque admite compresión sin pérdida y transparencia. Este convertidor png base64 codifica tu archivo PNG en texto que puedes incrustar en el código.
Sube un archivo PNG y copia la salida codificada. Puedes usar el resultado como datos png a base 64 en HTML, CSS, JavaScript, JSON o cargas de API.
Formato Data URI PNG
Un data URI PNG suele comenzar con data:image/png;base64, seguido de los caracteres codificados.
Cuando necesites un valor data image png base64, copia el URI completo desde la pestaña Data URI. Pégalo en tu proyecto donde se espere una URL o cadena.
También puedes tratar la salida como texto image png base64 cuando almacenes el valor codificado sin el prefijo.
Convertir Base64 de Vuelta a PNG
Pega texto PNG codificado en nuestra página Base64 a Imagen cuando necesites invertir el proceso. Previsualiza la imagen y descarga el archivo PNG en un solo paso.
Este flujo base64 a png ayuda cuando recibes datos de imagen de una API, campo de base de datos o informe exportado.
Notas sobre PNG Transparente y Tamaño de Archivo
Base64 conserva la transparencia alfa para archivos PNG, por lo que iconos y superposiciones siguen siendo útiles en CSS y HTML.
Las cadenas PNG Base64 son más grandes que el archivo binario original. Úsalas para recursos pequeños como iconos e insignias, no para capturas de pantalla grandes o galerías de fotos.
Ejemplos de PNG Base64
Ejemplo HTML: coloca un valor data:image/png;base64,... dentro del atributo src de una etiqueta img.
Ejemplo CSS: usa background-image: url("data:image/png;base64,..."); para iconos pequeños o marcadores de posición.
Para pasos de implementación completos y muestras listas para copiar, abre nuestra guía HTML, CSS y JavaScript.
Páginas Relacionadas
Preguntas Frecuentes
Sí. La transparencia PNG se conserva cuando la imagen se codifica como Base64.
Sube un archivo PNG en esta página y copia el valor de la pestaña Data URI.
Sí. Pega la cadena PNG codificada en el convertidor Base64 a Imagen y descarga el archivo PNG decodificado.