Resumen
Esta herramienta transforma los datos binarios de una imagen en una cadena Base64 para pegarla en HTML, CSS, JSON, correos o datos de prueba. Es útil cuando la imagen debe viajar como texto, por ejemplo dentro de una configuración, una plantilla o un campo de base de datos. Trabaja con formatos habituales siempre que el navegador pueda leer el origen. El resultado puede ser solo Base64 o una data URL completa con el prefijo MIME, como data:image/png;base64,... .
Casos de uso
- Logo incrustado en una cabecera de emailConvierte un logo pequeño en texto para usarlo dentro de una plantilla de correo sin depender de un servidor externo.
- Miniatura dentro de JSONPrepara un payload JSON con un icono o miniatura en Base64 para probar una API o generar un fixture local.
- Favicon para una demo sin archivosPasa una favicon compacta a data URL para un prototipo donde no quieres gestionar ficheros adicionales.
- Compartir una imagen como textoCopia la imagen codificada en una nota, ticket o mensaje cuando necesitas enviar exactamente esos datos.
Como funciona
- 1
Carga una imagen o pega una data URL.
- 2
El navegador lee el archivo de forma local.
- 3
Los bytes de la imagen se codifican en Base64.
- 4
Copia el resultado y úsalo donde lo necesites.
Ejemplos
Logo PNG para HTML
Entrada: imagen: PNG 48×48, logo oscuro sobre fondo transparente
Salida: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABX...
Usa la data URL completa en una etiqueta img o como background-image en CSS.
Miniatura JPEG de producto
Entrada: imagen: JPEG 320×240, foto de producto en exterior
Salida: /9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTEhIVFhUXFxgYGBgYGBcYFxgXFxgYGBgYFxgYHSggGBolGxgXITEhJSkrLi4uGB8zODMtNygtLisBCgoKDg0OGhAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLv/AABEIAJ8BPgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgcBAv/EADsQAAIBAgQDBgQEBgIDAAAAAAECAwQRAAUSITFBBhMiUWEUMnGBkaGxwdHwFCNS8RQjYnKC0eEV/8QAGgEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EACIRAQEAAgICAQUAAAAAAAAAAAABAhEDIRIxBEFRImETcf/aAAwDAQACEQMRAD8A9z2...
Guarda solo el Base64 si el sistema destino añadirá su propio prefijo MIME.
Icono SVG pequeño para prototipo
Entrada: imagen: icono SVG 24×24 en forma de data URL
Salida: PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+...
Útil cuando necesitas una versión textual de un icono pequeño.
FAQ
¿Debo conservar el prefijo MIME?
Solo si necesitas una data URL completa. Si te basta con los bytes codificados, copia únicamente la parte Base64.
¿Por qué el resultado es más largo que el nombre del archivo?
Base64 representa datos binarios como texto, así que la cadena suele ocupar más que el archivo original.
¿Puedo pegar cualquier data URL de imagen?
Sí, siempre que sea válida y el navegador pueda decodificar los datos incrustados.
¿Qué pasa si la imagen es muy grande?
La herramienta la codifica igualmente, pero el texto resultante puede ser incómodo de incrustar en código o mensajes.
¿Por qué mi salida no empieza con data:image/... ?
Normalmente significa que has copiado solo el Base64. Añade el prefijo MIME manualmente si necesitas una data URL completa.
