Umsetzungsleitfaden

Base64-Bilder in HTML verwenden

Ein kleines Bild mit einer korrekt aufgebauten Data URL direkt in ein HTML-img-Element einbetten.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Description" width="320" height="180" />

Vollständige Data URL verwenden

Der src-Wert muss data:, den MIME-Typ des Bildes, ;base64 und die kodierten Daten enthalten. Reines Base64 ist keine gültige Bild-URL.

Immer Alternativtext angeben

Beschreiben Sie aussagekräftige Bilder für die Barrierefreiheit. Dekorative Bilder erhalten ein leeres alt-Attribut; width und height verringern Layoutverschiebungen.

Inline-Bilder klein halten

Eingebettete Daten können nicht getrennt vom HTML-Dokument zwischengespeichert werden. Nutzen Sie für große oder oft verwendete Dateien normale Bilddateien.

Wählen Sie das passende Werkzeug oder die passende Anleitung für den nächsten Schritt.

Base64-Ausgabe erstellenEin lokales Bild kodieren und das passende Format kopieren.Data-URL-GeneratorPräfix normalisieren und Nutzdaten prüfen.Base64-Bilder in CSSDie andere Einbettungsmethode vergleichen.