Convertir PNG a Base64 - Gratis, Instantáneo, en tu Navegador
Conversor de PNG a Base64
Hasta 10 MB. No se sube nada: el archivo no sale de tu dispositivo.
Úsalo en un atributo <img src> o en una url() de CSS.
Sin el prefijo data:, para cargas JSON y APIs.
Tus archivos son privados
Esta conversión se ejecuta por completo dentro de tu navegador. La imagen nunca se sube, así que nada de lo que codifiques aquí llega a nuestro servidor ni a nadie más.
Sobre la conversión de PNG a Base64
PNG es el formato que más se incrusta: iconos, logotipos, pequeños sprites, esas piezas menudas de interfaz que si no costarían cada una una petición de red. Codificar uno a Base64 lo convierte en texto que puedes pegar directamente en una hoja de estilos o en un atributo HTML. Que sea buena idea depende casi por completo de lo pequeño que sea el archivo.
Cómo convertir PNG a Base64
- 1 Suelta tu archivo .png en el área de carga.
- 2 El resultado aparece de inmediato: no hay botón que pulsar ni nada que esperar.
- 3 Copia la forma que necesites: el data URI para HTML y CSS, la cadena en bruto para JSON o la regla CSS ya hecha.
Cuándo compensa de verdad incrustar
Cada imagen separada de una página cuesta una petición, y una petición tiene un sobrecoste más allá de los bytes que transporta. Para un icono de 1 KB ese sobrecoste puede superar al propio archivo, así que plegarlo dentro de la hoja de estilos es una ganancia real. Como regla aproximada, incrustar ayuda por debajo de unos pocos kilobytes y empieza a perjudicar por encima de diez. El punto de equilibrio no es una cifra fija —se mueve con tu conexión, tu servidor y cuántas cosas más compiten por el ancho de banda— pero la forma del intercambio siempre es la misma: cambias un viaje de ida y vuelta por bytes de más.
A qué renuncias
A tres cosas, y la segunda sorprende. Primero, el tamaño: el texto codificado pesa alrededor de un tercio más que el archivo. Segundo, la caché: una imagen incrustada no puede almacenarse en caché por separado, así que se vuelve a descargar con cada cambio de la hoja de estilos que la contiene, y una hoja de estilos cambia mucho más a menudo que un logotipo. Tercero, el navegador debe descodificar la cadena antes de poder pintar: trivial para un icono, medible para algo grande. La transparencia, al menos, sobrevive intacta: el canal alfa forma parte de los datos PNG y Base64 lo copia byte a byte.
Para iconos, plantéate antes SVG
Si lo que codificas es un icono plano o un logotipo sencillo, un SVG será normalmente más pequeño que el PNG antes de codificar, y aún más pequeño después, porque el SVG ya es texto y no necesita Base64 en absoluto. Además escala a cualquier densidad de pantalla sin un segundo archivo. Recurre a PNG cuando la imagen tenga detalle fotográfico, degradados suaves o efectos que los vectores manejan mal, y en ese caso redúcela antes de codificar, no después. Base64 agranda fielmente todo lo que le entregues.