Why Base64 grows
Base64 moves three bytes into four characters, so the encoded text runs about a third longer than the file it came from. The data:image/png;base64, prefix and any line breaks add a little more on top. A 5 MB image comes out as a string of roughly 6.7 MB.
Where a data: URI helps
Use one wherever you cannot put a file next to the markup: a CSS background-image, an HTML <img src>, an email signature that has to carry its own picture. Inlining a handful of tiny icons also removes a handful of requests.
Where it hurts
A data: URI has no address of its own, so nothing can point at it or reuse it. Every page that needs the same image carries its own copy, and changing that one image invalidates the cache for the entire stylesheet it sits in. Inlined straight into HTML it is worse still, since HTML is usually not cached at all and those bytes travel again on every visit. For a hero photo or any large image, a plain file with a link stays faster. Inlining is comfortable up to icons of about a kilobyte.
The URL-safe variant
Standard Base64 uses + and /. Both mean something else inside a URL or a file name, so addresses use the URL-safe alphabet with - and _ instead, usually with the trailing = padding dropped. JWTs are encoded that way. This tool accepts either form.