Codificador y decodificador de imágenes Base64: arrastra una imagen para copiar su Data URI con fragmentos de HTML y CSS, o pega un Data URI para verlo y descargarlo.
Codificador de Imágenes Base64
Codificador y decodificador de imágenes Base64: arrastra una imagen para copiar su Data URI con fragmentos de HTML y CSS, o pega un Data URI para verlo y descargarlo.
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.
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
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.
Generador de código QR — Genera un código QR a partir de texto o una URL; descárgalo como PNG o SVG.
Más herramientas de Imágenes
Generador de iconos de app — Convierte una imagen en todos los tamaños de icono de app para iOS, macOS y Android, descargados en un ZIP, en tu navegador.