Einbetten von Bildern in HTML mithilfe von Base64-Codierung
Vorteile der Verwendung der Base64-Codierung für die Einbettung von Bildern
Mithilfe der Base64-Codierung kannst du Bilder direkt in deinen HTML-Code einbetten, was eine Reihe von Vorteilen mit sich bringt:
Reduzierte Bandbreitennutzung und schnellere Seitenladezeiten:
Durch die Einbettung des Bildes in den HTML-Code vermeidest du zusätzliche HTTP-Anforderungen, um das Bild von einem externen Server zu laden. Dies reduziert die Bandbreitennutzung und verbessert die Ladezeiten deiner Website, insbesondere bei Geräten mit langsamen Internetverbindungen.
Mehr Kontrolle über die Darstellung:
Wenn du Bilder in Base64 einbettest, hast du die volle Kontrolle über ihre Darstellung. Du kannst die Bildgröße, den Stil und andere Attribute direkt im HTML-Code angeben, ohne dich auf externe CSS- oder Bildbearbeitungsprogramme verlassen zu müssen.
Zuverlässigere Darstellung:
Eingebettete Base64-Bilder sind weniger anfällig für externe Faktoren wie defekte Links oder Serverausfälle. Da das Bild in den HTML-Code eingebettet ist, wird es unabhängig vom Status externer Ressourcen angezeigt.
Kompatibilität mit verschiedenen Browsern und Geräten:
Die Base64-Codierung wird von allen gängigen Browsern und Geräten unterstützt, was eine konsistente Darstellung deiner Bilder auf verschiedenen Plattformen gewährleistet.
Sicherheitserwägungen:
Während die Base64-Codierung keine Verschlüsselung bietet, kann sie dazu beitragen, den unbefugten Zugriff auf deine Bilder zu verhindern. Durch die Einbettung des Bildes in den HTML-Code machst du es für Hacker schwieriger, das Bild herunterzuladen oder zu bearbeiten.
Codieren eines Bildes in Base64
Das Codieren eines Bildes in Base64 wandelt das Bild in eine textliche Darstellung um, die aus einer Zeichenfolge besteht. Dies ermöglicht es dir, das Bild ohne externe Dateianfragen direkt in deinen HTML-Code einzubinden.
Schritte zum Codieren eines Bildes in Base64
-
Wähle das Bild aus: Wähle das Bild aus, das du einbetten möchtest.
-
Lade das Bild in einen Base64-Codierer hoch: Es gibt mehrere Online-Tools und Softwareprogramme, mit denen du Bilder in Base64 codieren kannst. Suche nach "Base64-Codierer" in deiner bevorzugten Suchmaschine.
-
Wähle die Codierungsoptionen: Die meisten Codierer bieten Optionen zum Festlegen der Bildqualität und der Dateigröße. Wähle die für deine Anwendung passenden Optionen.
-
Kopiere den codierten String: Nach Abschluss der Codierung wird ein codierter String generiert. Kopiere den String in deine Zwischenablage.
Hinweise
- Base64-Codierung vergrößert die Dateigröße des Bildes geringfügig.
- Der codierte String kann sehr lang sein, insbesondere bei großen Bildern.
- Es wird empfohlen, Bilder in komprimierten Formaten wie JPG oder PNG zu codieren, um die Dateigröße zu reduzieren.
Einfügen des codierten Bildes in HTML
Nachdem du dein Bild in Base64 codiert hast, kannst du es in deinen HTML-Code einbetten. Hier sind die Schritte, die du befolgen musst:
Hinzufügen eines ![]()
-Tags
Erstelle ein -Tag in deinem HTML-Code. Dieses Tag teilt dem Browser mit, dass ein Bild angezeigt werden soll. Führe den folgenden Code innerhalb des
<img id="meinBild">
Verwenden des data: URI-Schemas
Um ein Bild über Base64 einzubetten, musst du das data: URI-Schema verwenden. Dieses Schema hat das folgende Format:
data:[MIME-Typ];base64,[Base64-codierte Daten]
Ersetze den [MIME-Typ] durch den MIME-Typ des Bildes. Beispielsweise ist der MIME-Typ für JPEG-Bilder image/jpeg.
Der Teil [Base64-codierte Daten] sollte durch die Base64-codierten Daten deines Bildes ersetzt werden.
Hinzufügen des data: URI-Schemas zum ![]()
-Tag
Füge das data: URI-Schema zum src-Attribut des -Tags hinzu. Der folgende Code zeigt, wie das aussehen würde:
<img id="meinBild" src="data:image/jpeg;base64,[Base64-codierte Daten]">
Vergiss nicht, die [Base64-codierten Daten] durch die tatsächlichen codierten Daten deines Bildes zu ersetzen.
Alternative Methoden
Neben dem -Tag kannst du auch andere Methoden zur Einbettung von Base64-Bildern in HTML verwenden:
-
CSS: Du kannst das
background-image-Property verwenden, um ein Base64-codiertes Bild als Hintergrundbild festzulegen. - Canvas: Du kannst die HTML5-Canvas-API verwenden, um das Base64-codierte Bild auf einem Canvas-Element anzuzeigen.
Hinweise und Best Practices zur Einbettung von Base64-Bildern
Bildgröße optimieren
Die Base64-Codierung vergrößert die Bildgröße erheblich. Um die Ladezeit deiner Webseite zu minimieren, solltest du die Bildgröße vor der Codierung optimieren. Verwende dazu Bildkomprimierungstools wie TinyPNG oder ImageOptim.
Cache-Header setzen
Setze Cache-Header für Base64-Bilder, um zu verhindern, dass Browser das Bild bei jedem Besuch deiner Website erneut herunterladen. Dies kann die Ladezeit verbessern. Verwende den Cache-Control-Header mit dem Wert max-age=31536000 (ein Jahr), um das Bild ein Jahr lang zu cachen.
Lazy Loading für Bilder verwenden
Lazy Loading ist eine Technik, bei der Bilder nur geladen werden, wenn sie sichtbar werden. Dies kann die Ladezeit verbessern, insbesondere bei Seiten mit vielen Bildern. Verwende für Base64-Bilder die loading="lazy"-Eigenschaft im img-Tag.
Den Dateityp angeben
Gib den Dateityp des Bildes im src-Attribut des img-Tags an. Dies hilft Browsern, das Bild korrekt darzustellen und zu cachen. Verwende beispielsweise image/png für PNG-Bilder oder image/jpeg für JPEG-Bilder.
Base64-Bilder in CSS verwenden
Du kannst Base64-Bilder auch in CSS-Dateien verwenden, um beispielsweise Hintergrundbilder oder benutzerdefinierte Symbole zu definieren. Verwende dazu die data:-URI-Syntax, wie im folgenden Beispiel:
background-image: url(data:image/png;base64,...base64-codiertes Bild...);
Fallback-Bilder verwenden
Manchmal können Base64-Bilder aus verschiedenen Gründen nicht korrekt angezeigt werden. Um dies abzufangen, solltest du ein Fallback-Bild angeben, das angezeigt wird, wenn das Base64-Bild nicht geladen werden kann. Verwende dazu das srcset-Attribut im img-Tag.
<img src="fallback-bild.png" srcset="data:image/png;base64,...base64-codiertes Bild... 1x, fallback-bild.png 2x">
Sicherheit beachten
Beachte, dass Base64-Bilder nicht so sicher sind wie das Hosten von Bildern auf einem Webserver. Vermeide es, sensible oder vertrauliche Informationen in Base64-Bildern zu speichern.
Fehlerbehebung bei Problemen bei der Einbettung von Base64-Bildern
Du hast ein Bild in Base64 codiert und versucht, es in deine HTML-Seite einzubinden, aber es wird nicht korrekt angezeigt? Keine Sorge, hier sind einige häufige Probleme und deren Lösungen:
Bild ist beschädigt oder leer
Möglichkeit: Das Bild wurde nicht korrekt codiert oder die Codierung wurde beschädigt.
Lösung:
- Überprüfe den Code und stelle sicher, dass er keine Tippfehler oder fehlende Zeichen enthält.
- Verwende ein Tool wie https://www.base64encode.org/, um das Bild erneut zu codieren.
- Stelle sicher, dass das Bild im richtigen Format (z. B. JPEG, PNG) vorliegt.
Bild wird nicht zentriert oder skaliert
Möglichkeit: Es fehlen CSS-Stile zur Zentrierung oder Skalierung des Bildes.
Lösung:
- Füge folgende CSS-Regeln im Stil-Tag hinzu:
img {
display: block;
margin: auto;
}
- Passe bei Bedarf die Breite und Höhe des Bildes mit den
width- undheight-Attributen an.
Fehler beim Laden des Bildes
Möglichkeit: Das Bild kann nicht von der angegebenen URL geladen werden.
Lösung:
- Überprüfe die URL und stelle sicher, dass sie gültig ist und zum richtigen Bild führt.
- Stelle sicher, dass der Server das Bild korrekt bereitstellt.
Bild wird langsam geladen
Möglichkeit: Das Base64-codierte Bild ist groß und verlangsamt die Ladezeit.
Lösung:
- Verwende ein Tool zur Bildkomprimierung wie https://tinypng.com/, um die Dateigröße zu reduzieren.
- Lade das Bild asynchron, z. B. mit einem
fetch()-Aufruf. - Überlege dir, ob du das Bild überhaupt als Base64 codieren musst.
Browserunterstützung
Möglichkeit: Der verwendete Browser unterstützt die Base64-Codierung für Bilder nicht.
Lösung:
- Überprüfe die Browser-Kompatibilitätstabelle für die Base64-Unterstützung.
- Erwäge die Verwendung eines Polyfills wie https://github.com/mathiasbynens/base64-js.