Herramientas · Imagen · Imagen a Base64
Imagen a Base64
Convierte una imagen en un URI de datos Base64, con fragmentos de HTML y CSS listos para copiar.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Elige un archivo, ajusta la configuración y ejecuta la herramienta.
Funciona por completo en tu navegador. No se sube ningún archivo.
Cómo funciona
Suelta una o varias imágenes.
Copia el URI de datos, la etiqueta <img>, o el fragmento de CSS que necesites.
Pégalo donde lo necesites: tu HTML, tu CSS, o una plantilla de correo.
Preguntas frecuentes
Es una imagen codificada como texto e incrustada directamente en una cadena data:image/...;base64,..., de forma que puede vivir en línea dentro del HTML, CSS o JSON en lugar de ser un archivo aparte que el navegador tenga que solicitar.
No, y ni siquiera es posible - codificar a Base64 es una sola función del navegador (FileReader) que lee el archivo en tu dispositivo. No hay ningún viaje a un servidor que evitar, porque nunca lo hubo.
Base64 codifica cada 3 bytes como 4 caracteres de texto, así que la cadena codificada es aproximadamente un tercio más grande que el archivo original. La herramienta muestra ambos tamaños para que sepas qué esperar.
Todavía no con esta herramienta - no tenemos construido un conversor de Base64 a imagen. Esta solo funciona en la dirección de imagen a texto.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Inlining a Small Image Beats Linking to a File
A tiny icon shouldn't need its own HTTP request. Here's what a data URI actually does, and when embedding an image as text beats linking to it as a file.
Leer la guíaHow to Embed an Image Directly in Your HTML, No File Needed
Drop an image, get a ready-to-paste snippet - no separate icon file to manage, no upload. Here's exactly how the encoding works and what each output actually gives you.
Leer la guíaData URI vs. Image File: When the Bigger String Is Still Worth It
A Base64 string is always bigger than the file it came from. Here's the actual math behind that, and how to decide whether the trade-off is worth it for a specific image.
Leer la guía
Comentarios