Saltar al contenido principal

Conversor de Imagen → Base64

Convierte archivos de imagen a cadenas Base64. Genera código Base64 que puedes incrustar directamente en HTML, CSS.

📁

Click or drag and drop an image here

Supports: JPG, PNG, GIF, WebP (Max 10MB)

About Base64 Images

Base64 encoding converts images into text format that can be embedded directly in HTML, CSS, or JSON. This eliminates the need for separate image files and reduces HTTP requests.

Advantages

  • No additional HTTP requests - faster page load
  • Perfect for small icons and logos
  • Works well in email templates
  • Self-contained HTML files

Disadvantages

  • Increases file size by ~33%
  • Cannot be cached separately by browsers
  • Not suitable for large images
  • Makes code less readable

Best Practices

  • Use for small images (icons, bullets) under 10KB
  • Optimize images before converting
  • Consider SVG for vector graphics instead
  • Use traditional image files for photos

Características principales​

📤 Carga fácil​

  • Haz clic para seleccionar archivo
  • Soporte de arrastrar y soltar
  • Soporta hasta 10MB

🖼️ Vista previa​

  • Vista previa instantánea de imagen cargada
  • Muestra información de imagen (tamaño, resolución, tipo)
  • Cálculo de tamaño de datos Base64

💻 Fragmentos de código​

  • Ejemplo de etiqueta <img> HTML
  • Ejemplo de background-image CSS
  • Función de copia con un clic

💾 Exportación​

  • Copiar cadena Base64
  • Copiar código HTML/CSS

¿Qué es la codificación Base64?​

Base64 es un método de codificación que convierte datos binarios a formato de texto. Al codificar una imagen en Base64, puedes incluirla directamente en HTML o CSS.

Imagen normal vs Base64​

Método normal:

<img src="image.png" alt="imagen" />

Método Base64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="imagen" />

Ventajas​

✅ Reducción de solicitudes HTTP​

  • No necesita descarga de archivo adicional
  • Reducción de tiempo de carga de página (para imágenes pequeñas)

✅ Completo con archivo único​

  • Todo incluido en un solo archivo HTML
  • Ideal para HTML de correo electrónico

✅ No necesita CDN/hosting​

  • No necesita servidor de hosting de imágenes
  • Elimina dependencias externas

✅ Disponible de inmediato​

  • Se puede renderizar instantáneamente
  • Sin problemas de caché (archivos pequeños)

Desventajas​

❌ Aumento de tamaño de archivo​

  • Base64 es aproximadamente 33% más grande que el original
  • Inadecuado para imágenes grandes

❌ No se puede cachear en navegador​

  • Se envía junto con HTML cada vez
  • Baja reutilización

❌ Disminución de legibilidad del código​

  • El código HTML/CSS se hace largo
  • Difícil mantenimiento

❌ No se puede usar sprite CSS​

  • No se puede usar técnica de combinación de imágenes

¿Cuándo usar?​

✅ Casos adecuados​

  1. Iconos e imágenes pequeñas (1-10KB)

    • Iconos UI
    • Puntos de viñeta
    • Logos pequeños

  2. Archivo HTML único

    • Plantillas de correo electrónico
    • Documentos HTML sin conexión
    • Presentaciones

  3. Cuando se necesita visualización instantánea

    • Contenido above the fold
    • Elementos UI importantes

❌ Casos inadecuados​

  1. Imágenes grandes (>50KB)

    • Fotos
    • Imágenes de fondo
    • Banners

  2. Imágenes reutilizadas

    • Usadas en múltiples páginas
    • Imágenes actualizadas frecuentemente

  3. Imágenes importantes para SEO

    • Imágenes de productos
    • Imágenes de publicaciones de blog

Formatos soportados​

  • JPG/JPEG: Adecuado para fotos
  • PNG: Soporta fondo transparente
  • GIF: Soporta animación
  • WebP: Formato moderno

Ejemplos de uso​

Imagen HTML​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="descripción"
  width="100"
  height="100"
/>

Fondo CSS​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

Imagen responsive​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="descripción" />
</picture>

Consejos de optimización​

1. Compresión de imagen​

Comprime la imagen antes de convertir a Base64:

  • TinyPNG
  • ImageOptim
  • Squoosh

2. Selección de formato apropiado​

  • Foto: JPG (compresión con pérdida)
  • Icono: PNG (sin pérdida, transparencia)
  • Gráfico simple: SVG (vector)

3. Ajuste de tamaño​

Usa solo el tamaño necesario:

  • Retina 2x: 2 veces el tamaño original
  • 1x: Tamaño de visualización real

4. Considerar Lazy Loading​

En lugar de usar Base64 directamente:

// Cargar solo cuando sea necesario
const base64 = 'data:image/png;base64,...';
img.src = base64;

Consideraciones de seguridad​

⚠️ Cuidado con ataques XSS​

Al recibir imágenes de usuarios:

  • Verificación de tipo de archivo
  • Límite de tamaño de archivo
  • Verificación de Content-Type

⚠️ CSP (Content Security Policy)​

Las imágenes Base64 en política CSP img-src:

Content-Security-Policy: img-src 'self' data:;

Herramientas relacionadas​

💬 ¿Te ha sido útil esta herramienta?​

Si tienes preguntas o sugerencias de mejora, ¡no dudes en darnos tu opinión!

Privacidad​

Esta herramienta funciona completamente del lado del cliente. Las imágenes que cargas no se envían al servidor y solo se procesan en tu navegador.