Durch das Einbetten eines Bildes werden dessen Bytes in HTML, CSS oder ein anderes Dokument eingefügt. Dadurch kann ein kleines Artefakt in sich geschlossen werden, es wird aber auch das Bild an die Zustellung und Zwischenspeicherung dieses Dokuments gekoppelt. Entscheiden Sie sich auf der Grundlage des gesamten Workflows, anstatt davon auszugehen, dass weniger URLs immer eine schnellere Seite bedeuten.
Erstellen Sie den richtigen Wrapper
Ein PNG Bilddaten URI beginnt mit data:image/png;base64,, gefolgt von der Base64-Darstellung der Originaldatei. Ein JPEG benötigt image/jpeg; WebP benötigt image/webp. Durch das Umbenennen eines Typs MIME werden die Bytes nicht konvertiert. Wenn der Empfänger einen JPEG benötigt, kodieren Sie das Bild neu, bevor Sie seine Daten URI erstellen.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Der obige Platzhalter ist kein funktionierendes Bild; Ersetzen Sie ihn durch den gesamten Ausgang des Encoders. Wenn die Ausgabe bereits die enthält data: Präfix, fügen Sie kein weiteres hinzu. Halten Sie die umgebenden Anführungszeichen ausgewogen und vermeiden Sie Zeilenumbrüche, die durch Rich-Text-Editoren eingeführt werden.
Berechnen Sie die tatsächliche Größe
Der codierte Teil benötigt vier Zeichen pro drei Eingabebytes, gerundet auf vollständige Gruppen. Das Data-Präfix URI fügt etwas mehr hinzu. Bei einer 30.000-Byte-Datei beträgt allein die Nutzlast 40.000 Zeichen. Durch die HTML-Komprimierung kann sich die übertragene Größe ändern, der Browser muss jedoch weiterhin das Dokument analysieren und das Bild dekodieren. Messen Sie die tatsächliche Seite, nicht nur die Quelldatei.
Ein separat bereitgestelltes Bild kann zwischengespeichert und unabhängig seitenübergreifend wiederverwendet werden. Ein eingebettetes Bild ist mit jedem Dokument verknüpft, das es enthält. Große, sich wiederholende Abbildungen sind daher schlechte Kandidaten für automatisches Inlining. Kleine, einmalige Symbole in einem eigenständigen Bericht können ein sinnvoller Kompromiss sein.
Überprüfen Sie das Ziel
Die Inhaltssicherheitsrichtlinie kann einschränken data: Bilder. E-Mail-Clients können eingebettete Inhalte entfernen oder ablehnen. Eine Datei, die in Ihrem Browser in der Vorschau angezeigt wird, ist kein Beweis dafür, dass die Anwendung eines Empfängers sie anzeigt. Testen Sie genau den Export, den E-Mail-Client oder das nachgelagerte System, das Sie unterstützen müssen.
Für temporäre lokale Vorschauen vermeidet ein Blob URL oft die Erstellung einer großen Base64-Zeichenfolge. Widerrufen Sie URL, wenn seine Ansicht entfernt wird. Für den exportierten Standalone-Namen HTML kann ein Datentyp URI geeignet sein. Behalten Sie in beiden Fällen den Alternativtext und die Abmessungen bei. Überlegungen zu Syntax und Browser werden in behandelt MDN: Daten-URLs.