Codificador / Decodificador de imágenes Base64
Convierte imágenes en Data URIs Base64 con fragmentos HTML y CSS, o decodifica un Data URI a una imagen descargable.
El Codificador / Decodificador de Imágenes Base64 funciona por completo en tu navegador. Las imágenes que sueltas y los Data URIs que pegas se procesan en tu dispositivo y nunca se suben a ArrayKit.
Abre el Codificador / Decodificador Base64
Acerca de Codificador / Decodificador de imágenes Base64
El Codificador de Imágenes Base64 convierte cualquier imagen en un Data URI Base64 que puedes pegar directamente en HTML o CSS. Suelta un PNG, JPEG, WebP, SVG o GIF y al instante muestra el Data URI más fragmentos listos para producción —una etiqueta <img> con texto alternativo editable y una regla CSS background-image—, cada uno con copia en un clic. También indica el tipo MIME, el tamaño del archivo, las dimensiones en píxeles y la longitud de la cadena, para que sepas exactamente qué estás incrustando. Cambia al modo de decodificación para pegar un Data URI, previsualizar la imagen y descargarla con la extensión de archivo correcta. Está pensado para desarrolladores front-end, autores de correos y plantillas, y cualquiera que incruste iconos pequeños para ahorrar una solicitud. Todo funciona localmente en tu navegador, así que tus imágenes permanecen en tu dispositivo.
Características
- Arrastra y suelta o haz clic para codificar PNG, JPEG, WebP, SVG y GIF en un Data URI Base64
- Copia en un clic del Data URI sin procesar, una etiqueta HTML <img> lista y una regla CSS background-image
- Texto alternativo editable que se inserta directamente en el fragmento <img> generado para accesibilidad
- Muestra el tipo MIME, el tamaño del archivo, las dimensiones en píxeles y la longitud del Data URI de un vistazo
- El modo de decodificación pega un Data URI para previsualizar la imagen y descargarla con la extensión correcta
- Avisa cuando una imagen es demasiado grande para incrustarla de forma eficiente como Base64
- Maneja SVG y GIF además de fotos rasterizadas, con extensiones de descarga sensatas
- Funciona por completo en tu navegador, así que las imágenes nunca se suben a un servidor
Cómo usar Codificador / Decodificador de imágenes Base64
- Mantén seleccionada la pestaña Imagen → Base64 y suelta una imagen en la zona de arrastre
- Copia el Data URI Base64, la etiqueta HTML <img> o la regla CSS background-image
- Opcionalmente escribe un texto alternativo para incluirlo en el fragmento <img>
- Cambia a Base64 → Imagen, pega un Data URI y luego previsualiza y descarga la imagen
Ejemplo
Entrada
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…
Salida
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />
Un PNG se convierte en una etiqueta <img> en línea que carga sin una solicitud de red extra.
Errores comunes y solución de problemas
- Al pegar un Data URI aparece 'The Data URI payload is not valid Base64.' — Copia toda la cadena que empieza en data:image/… e incluye ';base64,', y elimina las comillas o saltos de línea que tu editor haya añadido.
- La imagen decodificada no se previsualiza. — Comprueba que el tipo MIME coincida con los datos: un contenido PNG etiquetado como image/jpeg no se renderiza. Vuelve a codificar el archivo original para obtener un Data URI correcto.
- Mi archivo HTML o CSS creció mucho tras incrustar una imagen. — Base64 añade alrededor del 33% de sobrecarga y las imágenes incrustadas no se almacenan en caché por separado. Incrusta solo iconos pequeños y enlaza las imágenes más grandes como archivos normales.
- Un Data URI de SVG de otra herramienta se ve diferente. — Algunas herramientas codifican los SVG con porcentaje en lugar de Base64. Este codificador siempre usa Base64; ambos son Data URIs válidos pero no son intercambiables byte por byte.
Preguntas frecuentes
- ¿Qué es un Data URI de imagen Base64?
- Un Data URI incrusta una imagen directamente dentro de una cadena como data:image/png;base64,XXXX. Los bytes de la imagen se codifican en Base64, así que puedes meter la imagen completa en un src de HTML o en url() de CSS sin un archivo o solicitud aparte.
- ¿Qué formatos de imagen puedo codificar?
- Cualquier imagen que tu navegador pueda leer: PNG, JPEG, WebP, GIF, SVG, BMP, AVIF e ICO funcionan. El decodificador lee el tipo MIME del Data URI y ofrece una extensión de descarga acorde.
- ¿Debería incrustar imágenes como Base64?
- Incrustar conviene para activos pequeños y muy reutilizados como iconos o imágenes de correo, donde evitar una solicitud ayuda. Para imágenes más grandes suele perjudicar, porque Base64 añade alrededor de un tercio al tamaño y los datos no se pueden cachear por sí solos.
- ¿Puedo decodificar un Data URI de vuelta a un archivo de imagen?
- Sí. Cambia a Base64 → Imagen, pega la cadena data:image/…;base64, y la herramienta previsualiza la imagen y te deja descargarla con la extensión de archivo correcta.
- ¿Se suben mis imágenes cuando las codifico?
- No. El codificador lee el archivo con el FileReader del navegador y construye el Data URI en tu dispositivo. Nada se envía a ArrayKit ni a ningún servidor.
- ¿Por qué la cadena Base64 es más grande que mi imagen?
- Base64 representa tres bytes con cuatro caracteres, así que el texto codificado es aproximadamente un 33% más grande que el binario original, más el corto prefijo data:…;base64,. Esa sobrecarga es normal y esperada.
Herramientas relacionadas
Todas las herramientas de ArrayKit