Imagen a Base64
Convierte un archivo de imagen en una cadena Base64 que puedes copiar, con fragmentos HTML y CSS listos.
Imagen a Base64 codifica un archivo de imagen como texto Base64, para que pueda guardarse o enviarse como texto, por ejemplo dentro de un JSON, una página HTML o un archivo CSS. La cadena se crea a partir de los bytes originales del archivo, así que la imagen no se vuelve a comprimir ni cambia. La herramienta muestra el número de caracteres y además te da una etiqueta img de HTML y una regla CSS background-image que contienen la imagen completa.
Cómo usar Imagen a Base64
- 1
Abre una imagen
Suelta, elige o pega cualquier archivo de imagen. Las imágenes pequeñas, como los iconos, funcionan mejor.
- 2
Obtén la cadena Base64
La cadena aparece al momento, con su longitud en caracteres y su tamaño aproximado.
- 3
Copia lo que necesites
Haz clic en Copiar Base64 para la cadena sola, o usa Copiar HTML o Copiar CSS para un fragmento listo.
- 4
Pégala en tu código
Pega la cadena en tu JSON, HTML, CSS o script.
Qué hace
- Codificación exacta byte a byte
- El archivo original se codifica tal cual, sin volver a comprimirlo ni cambiar su calidad.
- Información de tamaño
- Consulta el número de caracteres y el tamaño aproximado de la cadena antes de usarla.
- Fragmentos HTML y CSS
- Copia una etiqueta img o una regla background-image con la data URI completa incluida.
- Codificada en local
- El archivo se lee y se codifica en tu navegador y nunca se sube.
Preguntas
¿Para qué se usa Base64 con imágenes?
Base64 convierte los datos binarios de una imagen en caracteres de texto. Los desarrolladores lo usan para incluir imágenes pequeñas directamente en HTML, CSS, JSON o plantillas de correo, así no hay que cargar un archivo de imagen aparte.
¿Por qué la cadena Base64 ocupa más que el archivo de imagen?
Base64 usa 4 caracteres de texto por cada 3 bytes, así que el resultado es aproximadamente un 33% más grande. Una imagen de 30 KB se convierte en unos 40 KB de texto.
¿Qué diferencia hay entre Base64 y una data URI?
Base64 es solo el texto codificado. Una data URI añade un prefijo como data:image/png;base64, para que los navegadores sepan el tipo de archivo. Esta herramienta da la cadena sola; Imagen a Data URI da la versión completa.
¿Conviene convertir imágenes grandes a Base64?
Normalmente no. Base64 funciona mejor con imágenes pequeñas, como iconos. Las fotos grandes hacen que tu HTML o CSS pese mucho más, y el navegador no puede guardar la imagen en caché como archivo aparte.
¿Se modifica mi imagen al codificarla?
No, se codifican los bytes originales. La única excepción son las fotos HEIC de iPhone, que primero se convierten a PNG porque la mayoría de los navegadores no pueden mostrar HEIC.