Convertir imagen a Base64 online para CSS y HTML
Base64 permite insertar imágenes pequeñas directamente en el código. Convierte un archivo en texto sin enviarlo a un servidor.
Base64 transforma los datos binarios de una imagen en texto que se puede insertar en CSS, HTML o JSON. Usa el conversor de imagen a Base64 para obtener una cadena lista para pegar.
Cuándo conviene usarlo
La técnica funciona bien para iconos pequeños, logotipos sencillos y recursos que deben viajar dentro de un único archivo HTML. Las URI de datos también simplifican los prototipos y los correos HTML básicos.
- Úsalo con imágenes pequeñas para que el archivo no crezca demasiado.
- Prefiere WebP o SVG cuando haya soporte.
- Evita Base64 con fotos grandes.
- Conserva el archivo original para futuras ediciones.
Vigila el tamaño
Base64 añade aproximadamente un tercio al tamaño de los datos, y las imágenes incrustadas no siempre se guardan en caché por separado. Para recursos grandes, sigue usando archivos de imagen normales. Después de convertir, pega la cadena en tu código y prueba la página en el navegador.
Una alternativa para recursos grandes
Para imágenes que cambian a menudo, guárdalas como archivos separados para que el navegador pueda almacenarlas en caché. Base64 encaja mejor con recursos pequeños que rara vez cambian y deben llegar en una sola petición. Comprueba la velocidad de la página después de pegar la cadena.
Preguntas frecuentes
¿Base64 sirve para fotos grandes?
No. Los datos aumentan y la página puede volverse lenta.
¿Qué formatos son compatibles?
PNG, JPG, WebP, GIF y SVG, según el archivo que elijas.
¿Aumenta el tamaño de los datos?
Sí, aproximadamente un tercio respecto al archivo original.
¿Se sube la imagen a un servidor?
No. La conversión se hace en el navegador y el archivo no se envía.