Cómo convertir una imagen a Base64
- Arrastra una imagen al cuadro, haz clic para elegir una o pégala desde el portapapeles con Ctrl+V.
- Elige el formato de salida: data URI, Base64 puro, HTML, CSS, Markdown o JSON.
- Haz clic en Copiar y pega el código en tu HTML, CSS, plantilla de correo o petición a la API.
¿Cuándo conviene incrustar imágenes en Base64?
Las imágenes Base64 incrustadas ahorran una petición HTTP, algo útil para iconos pequeños, firmas de correo electrónico, documentos HTML de un solo archivo y payloads de API. Como el Base64 ocupa aproximadamente un 33% más que el archivo original y no se puede almacenar en caché por separado, usa archivos de imagen normales para fotos y para cualquier imagen de más de unos pocos kilobytes.
Formatos de salida: qué incluye cada uno
- Data URI –
data:image/png;base64,…para atributossrcy CSS. - Solo Base64 – la cadena pura para API y bases de datos.
- HTML / CSS / Markdown – fragmentos completos que puedes pegar directamente.
- JSON – nombre de archivo, tipo MIME y datos en un solo objeto.
Preguntas frecuentes
¿Convertir a Base64 hace que la imagen ocupe más?
Sí, aproximadamente un tercio más. Un PNG de 30 KB se convierte en unos 40 KB de texto Base64. Si el tamaño importa, comprime o redimensiona antes la imagen.
¿Qué formatos de imagen puedo convertir?
Cualquier formato que pueda abrir tu navegador: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF y más. El tipo MIME correcto se añade automáticamente al data URI.
¿Cómo uso una imagen Base64 en CSS?
Elige el formato CSS y pega el resultado en tu regla, por ejemplo .logo { background-image: url("data:image/png;base64,…"); }.