De imagen a Base64
Convierta una imagen en data URI para incrustarla en su CSS o HTML
Sus archivos se quedan con usted. La conversión ocurre dentro del navegador; ningún archivo se sube a un servidor.
¿Le sirvió esta herramienta?
Gracias, su comentario llegó.
Cómo funciona
El Base64 es una codificación que expresa un archivo binario solo con caracteres de texto. Al convertir una imagen a este formato, puede incrustarla directamente dentro de su archivo HTML o CSS y ahorrarse una petición de archivo aparte. El precio es el tamaño: el Base64 agranda el dato alrededor de un tercio, así que el método conviene para iconos pequeños y patrones repetidos, no para fotos grandes. Seleccione sus imágenes en el recuadro, elija el formato de salida — data URI listo para usar, línea CSS de background-image, etiqueta HTML img, o Base64 en bruto sin prefijo — y pulse el botón: cada imagen produce su propio archivo de texto para descargar, y la línea de resultado indica el tamaño de la salida. Puede convertir varias imágenes de una vez. Todo ocurre dentro de su navegador: la imagen no se sube a ningún servidor, así que la herramienta sirve también con un logo interno o un diseño confidencial.
Esta herramienta también se busca como imagen a base64, convertir imagen base64, image to base64, crear data uri, css base64.
¿Qué es Base64?
El Base64 es un método que escribe datos binarios con un alfabeto seguro de 64 caracteres: solo letras, dígitos y dos signos de puntuación. Se creó para hacer pasar archivos por canales que no transportan más que texto — protocolos de correo, archivos HTML y CSS, cuerpos JSON. Codificar no es cifrar: el dato no queda oculto, solo cambia de forma, y de paso su tamaño crece alrededor de un tercio.
¿Qué es Data URI?
El data URI es un tipo especial de URL que empieza por «data:» y transporta el archivo mismo dentro de la dirección: siguiendo el molde data:image/png;base64,…, primero va el tipo del archivo y después su contenido codificado en Base64. Cuando el navegador ve esa dirección, decodifica la imagen directamente desde la dirección, sin salir a la red. Así, un icono pequeño puede incrustarse en el HTML o el CSS sin una petición de archivo aparte.
¿Base64 y data URI son lo mismo?
No son lo mismo, pero van uno dentro del otro: el Base64 es la codificación en sí, y el data URI es el sobre que mete ese código en el molde de dirección que el navegador entiende. El Base64 en bruto se entrega a una API o se pone en un archivo de configuración; el data URI se pega directamente en un atributo src o dentro de un url() de CSS. Esta herramienta genera las dos formas: elija el tipo de salida según dónde lo vaya a usar.
¿Cuándo conviene usarlo?
Incrustar un icono, un logo o un patrón de fondo de pocos kilobytes reduce el número de peticiones de la página y acelera la primera carga. También es útil en plantillas de correo, porque algunos clientes bloquean las imágenes externas.
En cambio, incrustar imágenes grandes infla el archivo HTML e impide aprovechar la caché del navegador: el dato se vuelve a descargar con cada carga de la página.
- Adecuado: icono pequeño, logo, patrón, plantilla de correo
- No adecuado: foto, imagen de portada grande, contenido que cambia a menudo
La diferencia entre los formatos de salida
El data URI es una dirección completa que lleva la información de formato al principio y se puede escribir directamente dentro de un src o un url(). Las opciones CSS y HTML colocan esa dirección dentro de una línea ya preparada.
El Base64 en bruto es solo el dato codificado; se usa para enviarlo a una API o ponerlo en un archivo de configuración.
Preguntas frecuentes
¿La imagen en Base64 pesa más?
Sí, la codificación agranda el dato alrededor de un tercio. Por eso conviene reservarla para imágenes pequeñas.
¿Cómo uso la salida?
Con la opción CSS, pegue la línea generada en su hoja de estilos; con la opción HTML, pegue la etiqueta en su página. No hace falta nada más.
¿Mi archivo se sube a algún lado?
No. La codificación se hace dentro de su navegador; la imagen no se envía a ningún servidor.