Conversor de Imagen a Base64
Suelta, pega o elige una imagen y copia el data URI listo para HTML, CSS o Markdown. En el sentido contrario, pega un Base64 o data URI para ver la imagen, comprobar su tipo real y descargar el archivo.
La imagen se lee y se convierte en tu navegador. No se envía a ningún servidor y no queda guardada en la página.
Resultado
Todavía no hay imagen
Elige una imagen o pega una captura con Ctrl+V. El código aparece aquí en el formato elegido.
¿Tienes un Base64 que no es imagen, una cabecera Basic o un Secret de Kubernetes? El decodificador de Base64 lee texto y cualquier archivo.
Qué es un data URI
Un data URI mete el archivo dentro de la propia dirección: data:image/png;base64, seguido de los bytes de la imagen en Base64. El navegador trata ese texto como una URL de imagen, así que sirve en el src de img, en url() de CSS, en Markdown y en JSON. La parte antes de la coma indica el tipo de archivo; si está mal, algunos navegadores y validadores de subida rechazan la imagen.
Cuándo incrustar la imagen y cuándo no
Conviene incrustar
Iconos y logos de pocos KB, que costarían una petición cada uno
Imágenes de fondo pequeñas en un CSS crítico, que se carga con la página
Fixtures de prueba y mocks de API, donde la imagen tiene que ir dentro del JSON
Mejor como archivo
Fotos y banners: el Base64 es un tercio más grande y el navegador no lo guarda en caché aparte de la página
La imagen principal de la página, porque un HTML más pesado retrasa todo lo que viene después
Imágenes de email marketing, que Gmail y Outlook para Windows no muestran en data URI
El SVG no necesita Base64
El SVG es texto, así que puede ir en el data URI con percent-encoding, escapando solo <, >, # y %. El resultado suele ser más pequeño que el Base64 y sigue siendo legible. Las comillas dobles pasan a simples para que el valor quepa dentro de url("...") en CSS. Elige URL-encoded en las opciones cuando la imagen sea SVG.
Probar subidas y API con imágenes en Base64
Muchas API reciben la imagen en Base64 dentro del JSON, con o sin el prefijo data:. Para QA hay dos puntos a vigilar. El límite de tamaño suele aplicarse al archivo decodificado, y el Base64 es un 33 % más grande, así que una foto de 5 MB se convierte en unos 6,7 MB de payload. Luego está el tipo: si el data URI dice image/png y los bytes son JPEG, un backend que comprueba la firma del archivo lo rechaza. El modo Base64 a imagen muestra los dos tipos uno al lado del otro.
Formatos que muestra el navegador
PNG, JPEG, GIF, WebP, AVIF, SVG, ICO y BMP se ven en cualquier navegador actual. HEIC, el formato de las fotos del iPhone, solo se abre en Safari; aquí se convierte y descarga igual, pero puede que no aparezca la vista previa.
Preguntas frecuentes sobre imágenes en Base64
Data URI, correo, SVG, subidas e imágenes que no se abren.