Convertidor de imagen a Base64

Preguntas frecuentes

¿Qué es Base64?

Base64 es un método de codificación que convierte datos binarios como imágenes o archivos en una cadena de texto. Se utiliza para incrustar imágenes directamente en código HTML o CSS sin necesidad de un archivo de imagen separado.

¿Cómo inserto una imagen convertida a Base64 en HTML?

Pega la cadena Base64 convertida directamente en el atributo src de una etiqueta img. El formato es: data:image/png;base64,CADENA_CONVERTIDA. El mismo método funciona para la propiedad background-image en CSS.

¿Por qué el tamaño del archivo aumenta tras la conversión a Base64?

La codificación Base64 convierte cada 3 bytes de datos binarios en 4 caracteres ASCII, lo que aumenta el tamaño del archivo en aproximadamente un 33% respecto al original. Es un equilibrio: menos solicitudes externas, pero archivos más grandes.

¿Qué formatos de imagen puedo convertir a Base64?

JPG, PNG, WebP, GIF, SVG y la mayoría de los demás formatos de imagen pueden convertirse a Base64. El resultado se proporciona en formato data URI, listo para usar directamente en HTML, CSS y JavaScript.

¿Puedo convertir una cadena Base64 de vuelta a un archivo de imagen?

Sí, simplemente pega la cadena Base64 para restaurar la imagen original y descargarla. También se admiten los data URI con el formato data:image/...

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

Subir imagen: Arrastra una imagen al panel izquierdo o haz clic para seleccionar un archivo
Copiar resultado: Copia la data URI completa o solo la parte Base64
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

<!-- img src에 data URI 직접 삽입 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">

<!-- picture 태그와 함께 사용 -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">
</picture>

CSS

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

/* content 속성에 사용 */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}

Convertidor de imagen a Base64

Imagen → Base64

Base64 → Imagen

Herramientas relacionadas

Codificador / Decodificador Base64

¡Más funciones de iTool!

Poner fecha en la foto (sello de fecha tipo cámara de película)

Visor HEIC

Convertir a JPG

Convertir a PNG

Convertir a WebP

Comprimir imagen

Recortar márgenes SVG