Convertir imagen a base64 y generar data URI

Genere data URIs para incrustar imágenes en HTML, CSS o JSON sin subir archivos.

🖼️ → 🔢
Suelte una imagen o haga clic para elegirJPG · PNG · WebP

¿Cómo funciona la conversión de imagen a base64?

La herramienta utiliza JavaScript para leer la imagen directamente desde su navegador, sin enviar datos a ningún servidor. Al seleccionar o arrastrar una imagen, el sistema la procesa y convierte sus datos binarios en una cadena base64.

Con base64, se genera un data URI que incluye el tipo MIME de la imagen y una representación codificada. Esta URI puede copiarse y usarse en código HTML, CSS, o en archivos JSON para proyectos donde se requiere todo en un solo archivo.

¿Cuándo es recomendable usar imágenes en base64?

Incrustar imágenes como data URI en base64 es útil para iconos pequeños, logos o recursos que no se reutilizan en varias páginas. Es ideal en emails o aplicaciones donde no se permite enlazar archivos externos.

Sin embargo, para imágenes grandes o activos que se repiten en muchas páginas, es preferible usar archivos separados para aprovechar la caché del navegador y evitar aumentar el tamaño de sus archivos.

Consideraciones y límites al codificar imágenes en base64

La codificación base64 incrementa el tamaño de la imagen aproximadamente un 33%. Esto puede ser un inconveniente en archivos grandes o si se quiere optimizar el rendimiento de la web.

Además, los data URIs largos pueden no ser compatibles con algunos clientes de correo antiguos, y la imagen incrustada se descargará cada vez que se abra el archivo, sin aprovechar la caché. Es recomendable comprimir la imagen antes de convertirla para minimizar el tamaño del resultado.

Preguntas frecuentes

¿La codificación base64 reduce el tamaño de la imagen?

No, base64 aumenta el tamaño del archivo en torno al 33% respecto al original. Se recomienda usarlo solo para imágenes pequeñas.

¿Cuándo es apropiado incrustar una imagen como data URI?

Cuando se trata de iconos, logos o recursos que no se reutilizan y se busca evitar referencias externas. Es común en emails o proyectos de archivo único.

¿Por qué al pegar un data URI en CSS puede fallar?

Si el data URI es muy largo, algunos clientes o editores pueden limitar la longitud de línea. También es importante asegurarse de que el formato esté correcto y no falten partes del URI.

¿La imagen se sube a un servidor durante la conversión?

No, todo el proceso ocurre en su navegador. La imagen nunca sale de su dispositivo, preservando su privacidad.

¿Cómo puedo comprimir la imagen antes de codificarla?

Puede reducir el tamaño de la imagen usando una herramienta de edición antes de convertirla a base64, eligiendo formatos como PNG o JPG optimizados.

¿Qué tipos MIME acepta la herramienta para data URIs?

Soporta tipos comunes como image/png, image/jpeg y image/webp. Se detecta automáticamente el tipo según el archivo elegido.

¿Algo no funciona o tienes una idea para esta herramienta? Cuéntanos