Convertidor de imagen a Base64

Características

• Conversión bidireccional: Codifica imágenes a Base64 y decodifica Base64 a imágenes en una sola pantalla
• Múltiples formatos: Compatible con JPG, PNG, WebP, GIF, BMP y SVG
• data URI instantánea: Genera una data URI lista para usar en img src de HTML o background-image de CSS

Cómo usar

1. Subir imagen: Arrastra una imagen al panel izquierdo o haz clic para seleccionar un archivo
2. Copiar resultado: Copia la data URI completa o solo la parte Base64
3. Base64 → Imagen: Pega una cadena Base64 en el panel derecho para restaurar la imagen

Casos de uso

• Inserción en HTML: Usa data URI en img src para mostrar imágenes sin peticiones al servidor
• Fondo CSS: Inserta imágenes directamente en CSS con background-image: url(data:...)
• Payload de API: Incluye datos de imagen en APIs REST o payloads JSON como Base64
• Depuración: Visualiza rápidamente datos de imagen codificados en Base64

Ejemplos de código

Pega el data URI generado directamente en tu HTML o CSS.

HTML

<!-- Inserta un data URI en img src -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="imagen">

<!-- Uso con el elemento picture -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="imagen">
</picture>

CSS

/* data URI como background-image */
.thumbnail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==");
  background-size: cover;
  background-position: center;
}

/* Uso en la propiedad content */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}