Wenn Dateien (wie Bilder, Schriftarten oder andere Medien) als Daten-URLs eingebettet werden, muss der Browser für diese Ressourcen keine separaten Serveraufrufe durchführen. Dies kann die Ladezeit einer Webseite erheblich verkürzen, insbesondere bei Szenarien mit mehreren kleinen Dateien.
Für Anwendungen, die Offline-Funktionen erfordern, können Daten-URLs sehr nützlich sein. Durch die Einbindung aller benötigten Dateien in die App können Nutzer auf Inhalte zugreifen, ohne auf eine Internetverbindung angewiesen zu sein. Dies ist besonders nützlich für Progressive Web Applications (PWAs).
Wenn Sie für Bilder oder Daten in Ihren E-Mails auf externe Ressourcen angewiesen sind, besteht das Risiko, dass Links nicht funktionieren oder Bilder nicht angezeigt werden. Daten-URLs beseitigen diese Abhängigkeit vollständig, da die Informationen in der E-Mail selbst enthalten sind. So wird sichergestellt, dass Ihre Empfänger immer das sehen, was Sie ihnen zeigen möchten.
Ja, Sie können eine Daten-URL direkt im Quellattribut eines HTML-5-Videoelements verwenden. Sie können sie auch für ein Posterbild eines HTML-5-Videos verwenden, indem Sie das Posterattribut des Videoelements verwenden. Beachten Sie jedoch, dass die Dateigröße eines solchen Videos maximal wenige Megabyte betragen sollte. Sie können einen kleinen Videoclip unter https://webmconverter.app oder https://mp4converter.app direkt im Webbrowser erstellen. Sie können auch den HTML-5-Videoplayer-Generator unter https://webmconverter.app/html5-video-player-embed-code-generator verwenden und die Daten-URL direkt in die Benutzeroberfläche eingeben.
Es gibt keine Präferenz für das Bildformat. Ich empfehle jedoch ein Bildformat mit einer Dateigröße von einigen hundert Kilobyte. Sie können ein Online-Tool wie https://avifconverter.app oder https://webpconverter.app verwenden, um solche Bilder zu erstellen. Je nach Zielgruppe ist WebP möglicherweise besser geeignet, da AVIF noch einige Kompatibilitätsprobleme aufweist.
Daten-URLs eignen sich besonders für kleine Bilder wie Symbole oder Miniaturansichten, die auf Ihrer gesamten Website verwendet werden. Durch die direkte Einbettung dieser Bilder in Ihr HTML oder CSS wird die Anzahl der HTTP-Anfragen reduziert. Sie können auch für kleine CSS- und JavaScript-Dateien verwendet werden, die nur auf einer einzigen Seite eingebunden werden.