Por que o Base64 cresce
O Base64 leva três bytes para quatro caracteres, então o texto gerado fica cerca de um terço maior que o arquivo de origem. O prefixo data:image/png;base64, e as quebras de linha somam mais um pouco. Uma imagem de 5 MB vira uma string de uns 6,7 MB.
Onde um data: URI ajuda
Serve nos lugares em que não dá para deixar um arquivo ao lado da marcação: um background-image no CSS, um <img src> no HTML, uma assinatura de e-mail que precisa carregar a própria imagem. Embutir alguns ícones minúsculos ainda economiza algumas requisições.
Quando não usar
Um data: URI não tem endereço próprio, então nada consegue apontar para ele nem reaproveitá-lo. Cada página que precisa da mesma imagem carrega a própria cópia, e trocar essa única imagem invalida o cache da folha de estilo inteira que a contém. Embutido direto no HTML é pior ainda, porque o HTML costuma não ser cacheado e esses bytes trafegam de novo a cada visita. Para uma foto grande, deixar o arquivo solto e apenas apontar um link continua mais rápido. Embutir compensa até ícones de mais ou menos um kilobyte.
A variante URL-safe
O Base64 padrão usa + e /. Os dois têm outro sentido dentro de uma URL ou de um nome de arquivo, então os endereços usam o alfabeto URL-safe com - e _, em geral sem o preenchimento = no fim. Os JWT são codificados assim. Esta ferramenta aceita as duas formas.