Imagen a Base64
Codifica una imagen como data URI Base64 para CSS o HTML.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
- Tamaño del archivo
- —
- Tamaño codificado
- —
Imagen grande: un data URI de este tamaño sobrecarga la página. Prefiere un archivo normal a partir de unas decenas de KB.
Procesada localmente: tu imagen no sale del dispositivo.
Codifica una imagen en Base64 en dos segundos
El data URI permite incrustar una imagen directamente en tu código, sin archivo externo. Suelta tu imagen, elige el formato de salida — data URI bruto, propiedad CSS o etiqueta HTML — y copia el resultado.
-
Suelta tu imagen
PNG, JPG, WebP, GIF, SVG… se acepta cualquier formato de imagen y se conserva tal cual: sin recodificación, sin pérdida.
-
Elige la salida
Data URI bruto, background-image CSS listo para pegar, o una etiqueta <img> HTML completa.
-
Copia
Un clic en Copiar y el código está en tu portapapeles, con los tamaños antes/después mostrados.
Cuándo usar (y evitar) Base64
| Situación | ¿Data URI? | Por qué |
|---|---|---|
| Icono o logo < 10 KB | Sí | Ahorra una petición HTTP, visualización inmediata |
| Correo HTML | Sí | Las imágenes externas suelen bloquearse por defecto |
| Foto o banner > 100 KB | No | +33 % de peso, sin caché separada, render más lento |
| Imagen repetida en varias páginas | No | Un archivo normal se cachea una sola vez |
Consejo: para iconos vectoriales, el SVG en línea (pegado directamente en el HTML) suele ser más ligero y nítido que su versión Base64.
Preguntas frecuentes
¿Qué es un data URI?
Es una URL que contiene directamente los datos del archivo, con la forma data:image/png;base64,iVBOR… Se usa en cualquier lugar donde se espere una URL de imagen: atributo src, background-image CSS, favicon…
¿Por qué codificar una imagen en Base64?
Para incrustar la imagen directamente en HTML, CSS o JSON, sin archivo separado ni petición HTTP extra. Útil para iconos pequeños, correos HTML o prototipos autónomos.
¿Base64 aumenta el tamaño del archivo?
Sí, alrededor de un 33 % respecto al binario original. Es el precio de la representación en texto. La compresión gzip/brotli del servidor recupera una parte, pero un archivo normal sigue siendo más eficiente para imágenes grandes.
¿Hasta qué tamaño es buena idea?
Como regla general, reserva el data URI para imágenes de menos de unas decenas de KB (iconos, logos, patrones pequeños). Más allá, infla tus páginas, impide la caché separada y ralentiza el renderizado.
¿Mi imagen se envía a algún sitio?
No. La lectura y la codificación las realiza la API FileReader de tu navegador. La imagen nunca sale de tu dispositivo.