Sigue este ejemplo práctico y luego adapta los mismos controles a tu propia imagen. Abrir Convertidor de imagen a Base64.
Selecciona una imagen y previsualiza su identidad
Abre el Conversor de imagen a Base64. Selecciona una imagen o Prueba una muestra. El ejemplo utiliza el favicon-orbit.png de 512 × 512 píxeles, que contiene 202,491 bytes. El editor muestra la imagen sobre su código para que puedas confirmar que has seleccionado el recurso deseado.
PNG, JPG, WebP, GIF, BMP y AVIF son compatibles cuando tu navegador puede decodificarlos para la vista previa. El tamaño máximo de archivo es 25 MB, con límites de 60 megapíxeles y 16,000 píxeles por lado. El marcado SVG no es aceptado por este conversor de ráster.
La herramienta lee los bytes del archivo original. No utiliza la vista previa para reconstruir la imagen, cambiar su tamaño o volver a comprimirla. Por lo tanto, los metadatos existentes y la animación GIF se conservan en los datos codificados.
Antes de codificar, usa Cambiar tamaño de imagen o Compresor de imagen si necesitas un recurso más pequeño. Base64 por sí mismo no reduce el tamaño de la imagen.
Elige la representación que espera tu proyecto
Abre Configuración y selecciona imagen HTML en Formato de código para este ejemplo. El resultado es una etiqueta img que contiene una URL de datos Base64. El atributo alt está inicialmente vacío; escribe un texto alternativo útil cuando la imagen comunique información.
La URL de datos comienza con un prefijo como data:image/png;base64, seguido de los datos codificados. Base64 sin formato contiene solo los datos. El fondo CSS envuelve la URL de datos en una declaración background-image. Estas representaciones sirven para diferentes destinos, así que copia el formato solicitado por tu aplicación en lugar de cambiar solo el nombre del archivo.
El panel de código se actualiza inmediatamente después de cambiar el Formato de código. El icono de copiar copia la representación actual y muestra la confirmación de copiado compartido. Cuando el acceso al portapapeles está bloqueado, el código se selecciona para copiarlo manualmente.
Una etiqueta HTML img completa no es lo mismo que una URL de datos. Usa solo el valor src cuando un campo solicite una URL.
El ejemplo en esta guía
Prueba una muestra: favicon-orbit.png, 512 × 512 px, 202,491 bytes. Elige la imagen HTML en el formato de código. Selecciona Iniciar y descarga favicon-orbit-base64.txt.
- PNG original
- 512 × 512 px · 202,491 bytes
- Salida de texto HTML
- 270,029 bytes
- Codificación
- Bytes originales; sin recompresión
Descarga el código y comprende su tamaño
Selecciona Inicio, luego Descargar. El ejemplo guarda favicon-orbit-base64.txt que contiene el código de imagen HTML. Sus 270,029 bytes son más grandes que la fuente de 202,491 bytes. La comparación del artículo muestra el comienzo real del texto descargado, acortado solo para facilitar la lectura.
Base64 normalmente convierte tres bytes de origen en cuatro caracteres de texto, añadiendo aproximadamente un tercio antes del pequeño contenedor. Incrustar un icono pequeño puede hacer que un documento sea autónomo, pero colocar cadenas de imagen grandes dentro de HTML o CSS también agranda ese documento e impide que la imagen se almacene en caché como un archivo separado.
La codificación no es cifrado. Cualquiera con la cadena Base64 completa puede recuperar la imagen subyacente. Trata el código con el mismo cuidado que la fuente si contiene información privada.
El extracto truncado en este artículo es explicativo. Usa el TXT descargado completo o copia el código completo de la herramienta.
Preguntas frecuentes
¿La codificación reducirá la calidad de la imagen?
No. La codificación conserva los bytes originales. No cambia el tamaño, comprime ni redibuja la imagen.
¿Por qué la cadena Base64 es más grande que la imagen?
Base64 representa tres bytes de entrada usando cuatro caracteres de texto, por lo que normalmente añade alrededor de un tercio antes de un contenedor o prefijo.
¿Se conservan las animaciones GIF?
La codificación conserva los bytes GIF originales, incluida la animación. Una vista previa puede mostrar un fotograma fijo mientras que los datos codificados conservan todos los fotogramas.
¿Es Base64 seguro para imágenes secretas?
Base64 no es un cifrado. Mantenga la cadena privada si la imagen subyacente es privada. El conversor en sí la procesa localmente en su navegador.
Convierte la imagen correcta en el código correcto.
Prueba una muestra o usa tu propio archivo, y revisa el resultado antes de compartirlo.
