Convertir imagen a Base64 — data URL online
Convierte una imagen en texto Base64, o en una data URL completa `data:image/...;base64,` para HTML, CSS, Markdown o configs que solo aceptan cadenas. Ideal para iconos y miniaturas diminutas — embeber una foto de varios megabytes hincha la página y empeora la carga.
Suelta un archivo aquí o haz clic para seleccionar
Base64 representa binario como caracteres legibles. Una data URL deja que el navegador cargue la imagen sin otra petición HTTP — pero la cadena es aproximadamente un tercio más grande que el archivo y cachea mal.
Úsalo para iconos de kilobytes, pixel art, logos pequeños. Meter una foto de vacaciones en CSS hace enormes las hojas de estilo.
Comprime o redimensiona primero si el origen es grande — la cadena codificada se reduce con él.
Cómo convertir
- Elige una imagen y confirma la vista previa
- Activa o no el prefijo data URL según haga falta
- Copia el texto de salida
- Pégalo en HTML, CSS o tu config
Cuándo tiene sentido Base64 para imágenes
- Demos de un solo archivo o HTML de correo que necesitan un icono en línea.
- Fondo CSS diminuto sin un archivo de asset extra.
- APIs o configs que solo permiten campos de texto para imágenes.
- Prefijo data URL opcional para copiar y pegar directamente.
Escenarios
- Icono 16×16 en docs de componente
- Badge pequeño en plantilla de correo (vigila el tamaño total)
- Campo de formulario que espera datos de imagen Base64
Consejos
- Para `url()` en CSS, activa el prefijo data URL.
- Desactiva el prefijo cuando el receptor quiere solo Base64 crudo.
- ¿Cadena demasiado larga? Comprime o redimensiona la imagen primero.
- ¿Necesitas el archivo de vuelta? Usa Base64 a imagen.
Formas de salida
| Entrada | Salida | Nota |
|---|---|---|
| Icono PNG pequeño | data:image/png;base64,... | Con prefijo |
| La misma imagen | Cadena Base64 cruda | Prefijo desactivado |
Preguntas imagen a Base64
- ¿Qué tipos de imagen funcionan?
- Formatos comunes legibles por el navegador: PNG, JPG, WebP, GIF, etc.
- ¿Por qué la cadena es más larga que el archivo?
- La codificación Base64 expande el tamaño — es normal, no un error.
- ¿Puedo procesar una carpeta entera?
- Una imagen cada vez aquí para que puedas verificar la vista previa.
- ¿Sirve para fotos grandes?
- No — aloja imágenes grandes como URLs normales; reserva Base64 para assets pequeños.