When to inline an image as Base64
A data URI saves one HTTP request, which helps for tiny images: icons, a logo in an HTML email, a placeholder. For anything larger than a few kilobytes it usually hurts. Base64 is about 33% bigger than the file, it can’t be cached separately from the page or stylesheet, and it delays rendering of the CSS that contains it. Under HTTP/2 the request it saves costs very little.
SVG tip
For SVG icons, a URL-encoded data URI (data:image/svg+xml,…) is often smaller than Base64 because SVG is text. Base64 is the safe universal choice.