Imagen a Base64 / Data URI
La codificación Base64 convierte el binario de una imagen en texto plano (un Data URI) que puedes incrustar directamente en un <img src> de HTML o en un fondo de CSS, ahorrando una petición de imagen extra. image cat codifica tu imagen a un Data URI Base64 en tu navegador y te deja copiarlo como cadena o como CSS: no se sube nada.
Base64 codifica una imagen como texto plano que puedes insertar directamente en un <img src> de HTML o en CSS. Ojo: ocupa un ~33% más que el archivo original — ideal para iconos pequeños.
¿Cómo imagen a base64?
- 1Suelta o elige 1 imagen (los iconos y las imágenes pequeñas son ideales).
- 2La herramienta la lee y la codifica en local a un Data URI Base64 en el cuadro de texto.
- 3Pulsa «Copiar» para el Data URI, o «Copiar como fondo CSS».
¿Por qué usar ImageCat para imagen a base64?
- Local y privado: la imagen nunca sale de tu dispositivo, la codificación se ejecuta en el navegador.
- Ahorra una petición: los iconos/imágenes pequeñas incrustadas ya no lanzan una petición HTTP aparte, acelerando el primer renderizado.
- CSS de un clic: cópialo directo en background-image: url(...) y pégalo en tus estilos.
Preguntas frecuentes
Sí. Base64 codifica cada 3 bytes en 4 caracteres, aumentando el tamaño en ~33%. Por eso es mejor para iconos pequeños; incrustar imágenes grandes en realidad ralentiza la página: usa el archivo de imagen en su lugar.
No. Usa el FileReader del navegador para leer y codificar en local; no se sube nada.
En HTML pon el Data URI completo en <img src="data:image/png;base64,...">; en CSS usa background-image: url("data:..."). El botón «Copiar como fondo CSS» te lo arma listo.
Actualizado · Equipo de ImageCat
Sources, review and limits
Last verified
2026-06-17
Author
Image-Cat editorial team
Reviewer
Image-Cat tooling review
Primary sources
- Browser image decoding, Canvas and download APIs
- Common social, web and device image-size presets
- User-provided images processed locally
Compression and resizing can change quality, metadata and color. Keep originals and verify output before publishing or printing.