Imágenes Base64 y data URLs: cuándo usarlas y cuándo evitarlas
Las data URLs sirven para recursos pequeños, pero cambian tamaño, caché y rendimiento.
Qué hacen
Una data URL mete un archivo pequeño dentro de una cadena URL. En imágenes aparece como data:image/png;base64, seguido del texto Base64.
Buen uso
Úsala para iconos diminutos, pruebas, emails simples o vistas previas generadas. El recurso queda junto al HTML o CSS que lo usa.
Coste
Base64 convierte 3 bytes en 4 caracteres, así que aumenta el tamaño. Además, el navegador debe descargar HTML o CSS más pesado antes de ver el recurso.
Límites
MDN documenta límites de longitud y reglas de seguridad para data URLs. Los navegadores modernos bloquean navegación superior a data: URLs por riesgo de phishing.
Regla práctica
Inlinea solo archivos que aceptarías pegar en el código fuente. Mantén imágenes normales, capturas y subidas de usuarios como archivos separados.