RevealTheme logo

Conversor de Imagen a Base64

Convierte cualquier archivo de imagen en una URL de datos Base64. Pega el resultado directamente en CSS, HTML o JSON.

Cómo usar esta herramienta

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

¿Qué es el Conversor de Imagen a Base64?

Una URL de datos Base64 incrusta el contenido binario de una imagen directamente en HTML o CSS. Esto elimina la solicitud HTTP para iconos y gráficos pequeños, lo que puede mejorar el tiempo de carga percibido. La contrapartida: la codificación Base64 infla el tamaño del archivo en aproximadamente un 33 %, así que es ideal para iconos de menos de 5 KB.

Casos de uso comunes

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

Preguntas frecuentes

¿Cuándo debo usar imágenes en Base64?
Para iconos, logotipos o sprites pequeños donde quieras eliminar una solicitud HTTP. Evítalo para imágenes grandes: la sobrecarga de la codificación anula cualquier beneficio.
¿Puedo usar esto en CSS?
Sí: pega la URL de datos directamente en una declaración background-image: url(...).

Herramientas relacionadas