Quando arquivos (como imagens, fontes ou outras mídias) são incorporados como URLs de dados, o navegador não precisa fazer chamadas de servidor separadas para esses recursos. Isso pode acelerar significativamente o tempo de carregamento de uma página da web, especialmente em cenários que envolvem vários arquivos pequenos.
Para aplicativos que exigem recursos offline, URLs de dados podem ser bastante úteis. Ao incluir todos os arquivos necessários no aplicativo, os usuários podem acessar o conteúdo sem depender de uma conexão com a internet, o que é particularmente útil para Aplicativos Web Progressivos (PWAs).
Ao depender de recursos externos para imagens ou dados em seus e-mails, você corre o risco de links quebrados ou imagens não serem exibidas. URLs de dados eliminam completamente essa dependência, pois as informações estão contidas no próprio e-mail, garantindo que seus destinatários sempre vejam o que você pretendia que eles vissem.
Sim, você pode usar uma URL de dados diretamente no atributo de origem de um elemento de vídeo HTML 5. Ela também pode ser usada para uma imagem de pôster de vídeo HTML 5 usando o atributo de pôster do elemento de vídeo. Mas lembre-se de que o tamanho do arquivo desse vídeo deve ser de, no máximo, alguns megabytes. Você pode criar um pequeno videoclipe em https://webmconverter.app ou https://mp4converter.app diretamente no navegador. Você também pode usar o gerador de player de vídeo HTML 5 em https://webmconverter.app/html5-video-player-embed-code-generator e inserir a URL de dados diretamente na interface.
Não há preferência quanto ao formato de imagem que você deve escolher. Mas recomendo usar um formato de imagem com tamanho de arquivo em torno de algumas centenas de quilobytes. Você pode usar uma ferramenta online como https://avifconverter.app ou https://webpconverter.app para criar essas imagens. Dependendo do seu público-alvo, o WebP pode ser mais desejável, pois o AVIF ainda apresenta alguns problemas de compatibilidade.
URLs de dados são particularmente úteis para imagens pequenas, como ícones ou miniaturas, usadas em todo o seu site. Ao incorporar essas imagens diretamente no seu HTML ou CSS, você reduzirá o número de solicitações HTTP. Elas também podem ser usadas para pequenos arquivos CSS e JavaScript que são incluídos apenas em uma única página.