¿Cómo convierto una imagen a Base64?

Suelta o pega la imagen en el conversor. La cadena Base64, el data URI y los fragmentos HTML, CSS, Markdown y JSON listos para usar aparecen al momento, cada uno con un botón de copiar.

¿Cómo convierto Base64 en una imagen?

Cambia a Base64 → Imagen y pega el data URI o la cadena Base64 en bruto. La imagen se previsualiza al instante y se puede descargar con la extensión correcta.

¿Base64 hace las imágenes más grandes?

Sí, aproximadamente un tercio, porque cada tres bytes se convierten en cuatro caracteres. Incrustar merece la pena con imágenes pequeñas que ahorran una petición, no con fotos grandes.

¿Cómo uso una imagen Base64 en CSS?

Úsala como URL: background-image: url("data:image/png;base64,…");. Copia el fragmento CSS y ya estará en esa forma.

¿Debo codificar un SVG en Base64?

Normalmente no. Un data URI SVG codificado como URL es más pequeño que el Base64 y sigue siendo legible, y todos los navegadores modernos lo admiten. La herramienta lo genera por defecto para archivos SVG.

¿Funcionan las imágenes Base64 en los correos?

Depende: muchos clientes de webmail, incluido Gmail, bloquean las imágenes con data URI. Para correo, las imágenes adjuntas referenciadas con cid: o las imágenes alojadas son más fiables.

No. La imagen se lee y se codifica en tu navegador, y no se envía nada a un servidor.

Convertir imagen a Base64

Convierte una imagen en un data URI Base64 para HTML, CSS o JSON, y al revés. Todo se ejecuta localmente: no se sube nada.

Entrada: PNG · JPEG · WebP · GIF · SVG · ICO · Base64
Salida: Base64 · data URI · HTML · CSS · image file

Suelta una imagen para convertirla a Base64

PNG, JPEG, WebP, GIF, AVIF, SVG y más. También puedes pegar una imagen desde el portapapeles. Nunca sale de tu dispositivo.

Convierte una imagen a Base64, y Base64 de nuevo en imagen

Este conversor de imagen a Base64 convierte un PNG, JPEG, WebP, GIF o SVG en una cadena Base64 y un data URI, y escribe los fragmentos que de verdad vas a pegar: una etiqueta img de HTML, una regla CSS background-image, Markdown y una cadena JSON. También funciona al revés: pega un data URI o Base64 en bruto para ver la imagen, comprobar su tipo real y descargarla. La imagen se lee en tu dispositivo y nunca se sube.

Cómo convertir una imagen a Base64

Suelta una imagen en la página, elige una o pégala desde el portapapeles con Ctrl/⌘ + V.
Revisa la vista previa, las dimensiones y los tamaños. Para una foto, activa Recodificar como WebP para que la cadena sea más pequeña; para un SVG, deja activado SVG codificado como URL.
Copia la forma que necesites: Base64 en bruto, el data URI, una etiqueta HTML <img>, un background-image de CSS, Markdown o una cadena JSON.
Para ir en sentido contrario, cambia a Base64 → Imagen, pega la cadena y descarga la imagen o envíala a otra herramienta.

Qué es un data URI

Un data URI mete el contenido de un archivo directamente en una URL: data:image/png;base64,iVBORw0KGgo…. La parte antes de la coma indica el tipo de medio y dice que los datos están codificados en Base64; el resto es la propia imagen. En cualquier sitio donde un navegador acepta una URL de imagen —un atributo src, un url() de CSS, una imagen de Markdown— acepta un data URI, y la imagen llega sin una petición aparte.

La contrapartida es el tamaño. Base64 hace que los datos ocupen un 33 % más, y una imagen incrustada no puede guardarse en caché por separado: se descarga de nuevo con cada copia del HTML o CSS que la contiene. Incrustar compensa con imágenes pequeñas —iconos, logotipos diminutos, marcadores de posición, imágenes en correos HTML o documentos de un solo archivo— y cuesta más de lo que ahorra con fotos de cientos de kilobytes.

Qué fragmento usar

Base64 en bruto: Solo los bytes codificados, para API y campos JSON que esperan Base64 y guardan el tipo por separado.
Data URI: La URL data: completa, lista para cualquier sitio que acepte una URL de imagen.
HTML <img>: Una etiqueta img con el data URI, un texto alt a partir del nombre del archivo y el ancho y alto de la imagen, lo que evita saltos de diseño.
CSS background-image: Una declaración para una hoja de estilos. Buena para pequeñas decoraciones repetidas; evítala para imágenes grandes en el CSS crítico.
Markdown y JSON: Una imagen en sintaxis Markdown, y el data URI como cadena JSON con las comillas y los escapes correctos.

SVG: codificar como URL es mejor que Base64

SVG es texto, así que no necesita Base64 en absoluto. Codificar en porcentaje solo los pocos caracteres que una URL no admite, y cambiar las comillas dobles por simples, da un URI data:image/svg+xml,… que suele ser un 15–30 % más pequeño que la versión Base64, se comprime mejor con gzip y sigue siendo legible. Es la opción predeterminada aquí para archivos SVG; desactívala si un sistema exige Base64.

En imágenes rasterizadas, recodificar a WebP antes de convertir suele reducir la cadena a la mitad o más en fotos y capturas de pantalla. Usa el codificador del propio navegador; si el navegador no puede escribir WebP, la herramienta te lo dice y conserva el resultado que obtuvo. Para controlar mejor el formato y la calidad, usa antes el conversor de imágenes.

Base64 a imagen

Pega un data URI completo, Base64 en bruto o incluso una etiqueta <img> entera o una regla CSS, y la herramienta extrae la imagen, la previsualiza y muestra su tamaño y sus dimensiones. El tipo se lee de los primeros bytes de la propia imagen en lugar de fiarse de la etiqueta, así que un JPEG etiquetado como PNG se descarga como lo que realmente es. Para un Base64 que contiene algo que no es una imagen, como un PDF o un ZIP, usa el decodificador Base64, que admite cualquier tipo de archivo.

Preguntas frecuentes

¿Cómo convierto una imagen a Base64?: Suelta o pega la imagen en el conversor. La cadena Base64, el data URI y los fragmentos HTML, CSS, Markdown y JSON listos para usar aparecen al momento, cada uno con un botón de copiar.
¿Cómo convierto Base64 en una imagen?: Cambia a Base64 → Imagen y pega el data URI o la cadena Base64 en bruto. La imagen se previsualiza al instante y se puede descargar con la extensión correcta.
¿Base64 hace las imágenes más grandes?: Sí, aproximadamente un tercio, porque cada tres bytes se convierten en cuatro caracteres. Incrustar merece la pena con imágenes pequeñas que ahorran una petición, no con fotos grandes.
¿Cómo uso una imagen Base64 en CSS?: Úsala como URL: background-image: url("data:image/png;base64,…");. Copia el fragmento CSS y ya estará en esa forma.
¿Debo codificar un SVG en Base64?: Normalmente no. Un data URI SVG codificado como URL es más pequeño que el Base64 y sigue siendo legible, y todos los navegadores modernos lo admiten. La herramienta lo genera por defecto para archivos SVG.
¿Funcionan las imágenes Base64 en los correos?: Depende: muchos clientes de webmail, incluido Gmail, bloquean las imágenes con data URI. Para correo, las imágenes adjuntas referenciadas con cid: o las imágenes alojadas son más fiables.
¿Se sube mi imagen?: No. La imagen se lee y se codifica en tu navegador, y no se envía nada a un servidor.

Herramientas relacionadas

Ver todas las herramientas

Codificador y decodificador Base64Codifica texto o archivos en Base64 y decodifica Base64, compatible con UTF-8.Conversor de imágenesRecodifica, redimensiona y vectoriza imágenes con una comparación antes/después en vivo.Generador de faviconTodos los tamaños de favicon, un .ico multitamaño real y un manifiesto web a partir de una sola imagen.Eliminador de FondosRecorte automático con IA y herramientas manuales de precisión.Imagen a ASCIIConvierte una foto en ASCII art, en blanco y negro o a todo color.Procesador de imágenes por lotesEncadena pasos para muchas imágenes a la vez: quitar fondo, redimensionar, convertir, ZIP.