Imágenes embebidas mediante Base64
Codificar en Base64 convierte bytes binarios en caracteres ASCII para transportar imágenes dentro de HTML, CSS o JSON sin archivos separados.
Qué hace la codificación
Cada tres bytes generan cuatro caracteres Base64, de ahí el incremento de aproximadamente 33% en el tamaño final.
El navegador decodifica la cadena en memoria y dibuja los mismos píxeles que contenía el archivo original.
Cuándo conviene incrustar
Incrustar íconos minimiza solicitudes HTTP en páginas ligeras o correos electrónicos donde cada request penaliza la carga.
Las imágenes pesadas deben seguir como archivos independientes para aprovechar cache y streaming progresivo.
Manejo de formatos
PNG y JPEG se convierten sin esfuerzo, mientras que SVGs deben minificarse antes para evitar caracteres inútiles.
En activos animados, considera WebP o AVIF antes de convertir para que la cadena Base64 parta do menor binario possível.
Casos de uso ideales
- Incrustar pequeños íconos o favicons dentro de CSS
- Empaquetar ilustraciones placeholder en bibliotecas de componentes
- Automatizar pruebas que comparan cadenas Base64 en vez de archivos
- Distribuir sprites en extensiones de navegador con acceso limitado al disco
Buenas prácticas
- Comprime y elimina metadatos antes de codificar para reducir el tamaño final
- Divide cadenas muy largas si se guardarán en archivos de configuración
- Valida tipos MIME y sanitiza SVGs al procesar archivos de usuarios
- Prefiere URIs data:image/png;base64,... solo para recursos de pocos kilobytes