Wenn du in HTML ein Bild einfügen möchtest, dann geht das ganz einfach über das <img> Tag. Das bedeutet „Image“ wie Bild.
Für ein Bild brauchst du zunächst nur die Quelle des als Pfad und mehr nicht. Die restlichen Parameter die du hinzufügen kannst findest du weiter unten.
So fügst du Bilder in HTML ein:
<img>-Tag:
Dies ist die grundlegende und einfachste Methode, um Bilder in HTML einzubinden.
HTML
<img src="bildquelle" alt="Alternativtext">Erklärung
src: Pfad zur Bilddatei. Dies kann ein relativer oder absoluter Pfad sein.alt: Alternativtext. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann oder für Screenreader-Nutzer.
Beispiel
HTML
<img src="images/meineschoenesbild.jpg" alt="Beschreibung meines Bildes">Optionale Attribute:
width: Breite des Bildes in Pixeln.height: Höhe des Bildes in Pixeln.class: CSS-Klasse für das Bild.style: Inline-CSS für das Bild.
Verwendung von CSS:
Mit CSS kannst du Bilder flexibler und dynamischer einfügen.
Beispiel:
HTML
<img src="bildquelle.jpg" class="bild-klasse">CSS
.bild-klasse {
width: 200px;
height: 150px;
margin: 10px;
border: 1px solid #ccc;
}
Vorteile:
- Trennung von Inhalt und Design (Stichworte: semantisches HTML)
- Geringeres HTML-Gerüst
- Einfache Anpassung des Aussehens für mehrere Bilder
Einbindung von SVG-Bildern:
SVG-Bilder können direkt in HTML eingefügt werden.
HTML
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 0 L 50 50 L 100 0 Z" fill="#ff0000" />
</svg>
Vorteile:
- Skalierbarkeit ohne Qualitätsverlust
- Geringere Dateigröße
- Detaillierte Bearbeitung möglich
Verwendung von Data-URLs:
Kleine Bilder können direkt in den HTML-Code als Data-URL eingebettet werden.
HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9AAAAASUVORK5CYII=" alt="Kleines Bild">Vorteile:
- Keine separaten Bilddateien notwendig
- Geringere Anzahl externer Ressourcen
- Nützlich für kleine Icons und Grafiken
Nachteile:
- Vergrößert die HTML-Datei
- Nicht für große Bilder geeignet
