Qué es una imagen Base64
Base64 es un método para codificar datos binarios en texto puro. Al convertir una imagen a Base64, se convierte en una larga cadena de texto que se puede incrustar directamente en HTML/CSS, sin necesidad de un archivo de imagen separado. Este uso se llama "imagen en línea".
Cuándo usar imágenes Base64
Escenarios adecuados para en línea
- Iconos pequeños: iconos de pocos KB en línea reducen peticiones HTTP y cargan más rápido
- Plantillas de correo: los clientes de correo restringen mucho las imágenes externas, en línea es más fiable
- Entrega de un solo archivo: informes HTML, demos que quieres empaquetar en un solo archivo
- URI de datos: imágenes de fondo CSS, referencias SVG
Escenarios no adecuados para en línea
- Imágenes grandes: tras la codificación Base64 el tamaño es 33% mayor, las imágenes grandes en línea son más lentas
- Imágenes que necesitan caché: las imágenes en línea no pueden ser cacheadas individualmente por el navegador, se descargan de nuevo cada vez que se carga el HTML
- Imágenes reutilizadas frecuentemente: imágenes compartidas entre varias páginas son más eficientes con archivo externo + caché
Cómo convertir
Usa la herramienta de conversión de imágenes a Base64 de DocsAll para convertir con un clic:
- Abre imagen a Base64
- Sube la imagen
- Genera automáticamente la cadena Base64 y la Data URL
- Copia y usa
A la inversa, para restaurar una imagen desde Base64, usa la herramienta de Base64 a imagen.
Forma de uso
El formato de la Data URL resultante es similar a data:image/png;base64,iVBORw0KGgo... una larga cadena.
- En HTML: escribe directamente en el atributo src de la etiqueta img
- En CSS: escribe dentro de url() en background-image
Equilibrio entre ventajas y desventajas
| Dimensión | Archivo de imagen externo | Base64 en línea |
|---|---|---|
| Petición HTTP | Una por imagen | Sin peticiones extra |
| Tamaño | Original | 33% mayor |
| Caché | Cacheable individualmente | Se cachea con el HTML |
| Aplicación | Imágenes grandes, reutilizadas | Iconos pequeños, un solo archivo |
Recomendación
Iconos pequeños (menos de 4KB) en línea, fotos grandes con archivo externo. Combina con compresión de imágenes para reducir primero el tamaño y luego decidir si en línea, para mejores resultados. Para más conocimiento de Base64, lee la guía de codificación y decodificación Base64.