Cómo se usa
- Suelta imágenes en la zona de arrastre, haz clic en ella para elegir archivos o pega una imagen desde el portapapeles. Puedes procesar varios archivos a la vez.
- Si quieres, elige un formato de destino en Convertir a (PNG, JPEG o WebP), ajusta la Calidad y fija un Ancho máximo.
- Revisa las dimensiones, el tamaño original y el tamaño codificado que se muestran para cada imagen.
- Copia o descarga la salida que necesites: data URI, Base64 puro, etiqueta img de HTML, background-image de CSS o Markdown.
Cómo funciona la conversión de imagen a Base64
Base64 convierte los bytes de un archivo de imagen en texto plano formado por 64 caracteres. Cada 3 bytes se transforman en 4 caracteres, así que el texto ocupa aproximadamente un 33 % más que el archivo. Un data URI añade un prefijo corto con el tipo MIME, como data:image/png;base64,, que permite al navegador mostrar el texto en cualquier lugar donde espere la URL de una imagen.
La imagen se lee y se codifica localmente en tu navegador. No se sube a ningún servidor, así que las capturas de pantalla privadas y los diseños sin publicar se quedan en tu dispositivo.
¿Qué salida deberías copiar?
- Data URI para atributos
src, JavaScript y campos JSON que esperan una URL. - Base64 puro para API que solo quieren los bytes codificados, normalmente junto a un campo aparte para el tipo MIME o el nombre de archivo.
- Etiqueta img de HTML para pegarla directamente en una página o una plantilla.
- background-image de CSS para iconos y elementos decorativos en una hoja de estilo.
- Markdown para documentación y notas. Algunos visores, entre ellos el de GitHub, no muestran imágenes en data URI.
Formatos compatibles de un vistazo
Los primeros caracteres de una cadena Base64 revelan el tipo de archivo, porque codifican la firma del formato.
| Formato | Tipo MIME | El Base64 empieza por |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy o PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | variable |
| TIFF | image/tiff | SUkqAA o TU0AKg |
Cuándo compensa incrustar una imagen
Los data URI ahorran una petición de red y hacen que un archivo sea autónomo. Eso encaja con iconos y logotipos pequeños de pocos kilobytes, informes HTML de un solo archivo, marcadores de posición diminutos y difuminados, e imágenes enviadas dentro de JSON. En cambio, son una mala opción para fotos grandes: el tercio adicional de tamaño, la falta de una caché independiente en el navegador y un archivo HTML o CSS más pesado, que debe descargarse antes de que se renderice nada, suelen costar más que la petición que ahorran. Si tu sitio envía el encabezado Content-Security-Policy, las imágenes incrustadas también necesitan data: en img-src.
Preguntas frecuentes
¿Se suben mis imágenes a un servidor?
No. El navegador lee cada archivo y lo codifica en tu dispositivo. No se envía nada a base64.is ni a ningún otro sitio.
¿Por qué el texto Base64 ocupa más que la imagen?
Base64 usa 4 caracteres por cada 3 bytes, así que el resultado es aproximadamente un 33 % más grande, a lo que se suma el prefijo del data URI. Para acortarlo, fija un Ancho máximo o convierte la imagen a WebP o JPEG con una calidad más baja.
¿Puedo convertir varias imágenes a la vez?
Sí. Selecciona o suelta varios archivos. Cada imagen tiene su propia vista previa, sus tamaños y sus salidas, cada una con los botones Copiar y Descargar.
¿Funcionan las imágenes en Base64 en los correos HTML?
cid:.