Sie beide helfen und verletzen SEO.
Ich habe eine Site, auf der ich Daten-URI-Bilder verwende. Die Bilder sind alle klein. Die meisten Besucher sehen nur eine Seite. Ich habe das JavaScript, das CSS und diese Bilder (unter Verwendung des Daten-URI) eingefügt. Jetzt ist jede Seite nur eine einzelne Anforderung an den Server, und das Seitenladeereignis wird in 400 ms ab dem Zeitpunkt ausgelöst, an dem die Anforderung gestartet wurde. Bevor ich alles einfügte, dauerte es über eine Sekunde.
Verbesserungen bei Leistung und Ladezeit der Seite
Der größte Vorteil ist, dass sie direkt in HTML oder CSS eingebettet werden können. Dies reduziert die Anzahl der Anforderungen, die an den Server gestellt werden müssen, um die Seite zu rendern. Das Reduzieren der Anzahl von Anforderungen kann die Leistung für Benutzer erheblich verbessern. Websites mit höherer Leistung haben einen SEO-Vorteil.
Die Verwendung von "Sprites" oder mehreren kleinen Bildern, die in einer größeren Bilddatei nebeneinander angeordnet sind, und die Verwendung von CSS, um nur den relevanten Teil des Bildes anzuzeigen, ist eine weitere Technik in der gleichen Richtung. Sie sollten auch untersuchen, ob Sprites eine Alternative zu Data-Uri darstellen, da sie nicht viele der Nachteile haben.
Eine erhöhte Seitengröße führt zu niedrigeren Durchforstungsraten
Anfangs gab ich allen Bots die Daten-URI-Bilder. Als ich dies tat, bemerkte ich, dass die Webmaster-Tools berichteten, dass meine Seitengröße dramatisch gestiegen ist und dass Googlebot aufgrund dessen weniger Seiten auf meiner Website gecrawlt hat. Danach habe ich den Benutzeragententest geändert, um alle Bots wie ältere Versionen von IE zu behandeln. Jetzt erhalten Bots und ältere Browser die Bildlinks und moderne Browser die Daten-URI.
Wenn Sie einen Daten-URI für Ihre Bilder implementieren, überprüfen Sie anschließend Ihre Crawling-Rate in den Google Webmaster-Tools. Stellen Sie sicher, dass Googlebot immer noch genügend Seiten auf Ihrer Website crawlt, damit es mit den Änderungen, die Sie an Ihrer Website vornehmen, Schritt halten kann.
Insgesamt mehr Bytes bereitstellen
Die Base64-Codierung vergrößert das Bild um 25%. Die Gzip-Übertragungscodierung hilft einigen, aber Sie liefern immer noch mehr Bytes als die Bilder direkt.
Eingeschränkte Fähigkeit zum Zwischenspeichern von Bildern
Wenn Sie die Bilder in den HTML-Code aufnehmen, müssen Sie sie als Teil jeder nachfolgenden Seite erneut bereitstellen. Umgekehrt werden Bilddateianforderungen normalerweise vom Browser zwischen Seitenanforderungen zwischengespeichert.
Die Verwendung von Daten-URI-Bildern in Ihren CSS-Dateien kann in dieser Hinsicht in Ordnung sein, da die gesamte CSS-Datei zwischengespeichert werden kann.
Eingeschränkte Browserunterstützung
Die Browserunterstützung ist gut, aber nicht perfekt. Alle modernen Browser unterstützen Daten-URI, ältere Versionen von Internet Explorer (7 und früher) jedoch nicht. Ungefähr 1% meiner Besucher verwenden diese alten IE-Browser, als ich das letzte Mal nachgesehen habe.
Aus diesem Grund habe ich Benutzeragententests durchgeführt, um festzustellen, ob Browser Daten-URI unterstützen. Ich versorge Daten-URI bedingt nur für Browser, die dies unterstützen.
Kann nicht für große Bilder verwendet werden
Einige Browser haben Einschränkungen hinsichtlich der Größe von Big-Data-URIs. Ich denke, es ist ungefähr 4k oder so. Sie können Daten-URI nur mit relativ kleinen Bildern verwenden.
Bilder werden bei der Bildsuche nicht angezeigt
Google indiziert keine Daten-URI-Bilder für die Bildsuche. Kleine Bilder, die für Daten-URI geeignet sind, sind im Allgemeinen nicht hoch genug, um bei der Bildsuche einen Rang einzunehmen.
Wenn Sie ein Bild haben, das bei der Bildsuche gut rangiert, konvertieren Sie es nicht in Daten-URI.