Kapitel 5: HTML-Bild-Tags

🖼️ Lernziel: Bilder in Webseiten einbinden und SEO-optimieren!

5.1 img-Tag Kernattribute: src (Bildpfad)

Das <img>-Tag bindet Bilder ein.

Grundlegende Syntax:

html

<img src="bild.jpg" alt="Beschreibung">

src-Attribut (Quellpfad):

Pfadtyp	Beispiel	Verwendung
Relativer Pfad	`src="bilder/bild.jpg"`	Empfohlen für eigene Bilder
Absoluter Pfad	`src="https://example.com/bild.jpg"`	Für externe Bilder
Root-relative Pfad	`src="/bilder/bild.jpg"`	Von der Wurzel aus

❌ Häufiger Fehler:

html

<!-- Falsch (Backslash verwenden) -->
<img src="bilder\bild.jpg">

<!-- Richtig (Slash verwenden) -->
<img src="bilder/bild.jpg">

Dateistruktur-Beispiel:

projekt/
├── index.html
└── bilder/
    └── logo.jpg

Im HTML:
<img src="bilder/logo.jpg" alt="Logo">

5.2 alt-Attribut (SEO-wichtig!)

Das alt-Attribut ist unverzichtbar für SEO und Barrierefreiheit.

Warum alt wichtig ist:

SEO: Suchmaschinen können Bilder nicht "sehen" - sie lesen den alt-Text
Barrierefreiheit: Screenreader lesen den alt-Text vor
Fallback: Wenn das Bild nicht lädt, wird der alt-Text angezeigt

Beispiele:

html

<!-- Schlecht -->
<img src="hund.jpg" alt="">

<!-- Gut -->
<img src="hund.jpg" alt="Ein goldener Retriever spielt im Park">

<!-- Perfekt (beschreibend) -->
<img src="produkt.jpg" alt="iPhone 15 Pro in Titanfarben, Vorder- und Rückansicht">

Goldene Regel:

Beschreibe das Bild so, als würdest du es jemandem am Telefon beschreiben

5.3 Bildgröße steuern: width und height

Verwende width und height, um Bilder zu skalieren und Layout-Verschiebungen zu vermeiden.

Syntax:

html

<img src="bild.jpg" alt="Beschreibung" width="600" height="400">

Einheiten:

Ohne Einheit = Pixel (px)
Mit CSS: px, %, rem, etc.

Best Practices:

html

<!-- Gut: Seitenverhältnis beibehalten -->
<img src="bild.jpg" alt="Beschreibung" width="600">

<!-- Besser: CSS für responsive Bilder -->
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

Warum width/height im HTML wichtig sind:

Verhindert Layout-Shift (CLS - Core Web Vital)
Browser reserviert Platz, bevor das Bild lädt

5.4 Empfohlene Bildformate

Format	Verwendung	Vorteile	Nachteile
JPG/JPEG	Fotos, komplexe Bilder	Kleine Dateigröße	Kein Transparenz
PNG	Logos, Grafiken mit Transparenz	Transparenz-Unterstützung	Größer als JPG
GIF	Einfache Animationen	Animationen	Begrenzte Farben
WebP	Moderne Web-Bilder	Kleinste Dateigröße	Ältere Browser
SVG	Icons, Vektorgrafiken	Unbegrenzte Skalierung	Nicht für Fotos

Empfehlung:

Fotos → JPG oder WebP
Logos/Icons → PNG oder SVG
Animationen → GIF (oder besser: CSS/Video)

5.5 Anfänger-Falle: Bildpfad-Fehler

Häufige Fehler und Lösungen:

Problem	Ursache	Lösung
Bild wird nicht angezeigt	Falscher Pfad	Prüfe `src`-Attribut
Bild wird nicht angezeigt	Datei nicht vorhanden	Prüfe, ob Datei existiert
Bild wird nicht angezeigt	Groß-/Kleinschreibung	`Bild.jpg` ≠ `bild.jpg`
Verzerrtes Bild	width/height vertauscht	Behalte Seitenverhältnis bei

Debugging-Schritte:

Prüfe, ob die Bilddatei existiert
Prüfe den Pfad (relativ zur HTML-Datei)
Prüfe Groß-/Kleinschreibung
Öffne Bild-URL direkt im Browser zum Testen

5.6 Praxis: Bilder in Artikel-Seite einfügen

Aufgabe: Erweitere die Artikel-Seite aus Kapitel 4 mit Bildern.

Lösung:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Artikel mit Bildern</title>
</head>
<body>
  <h1>Mein Reiseblog</h1>
  
  <h2>Mein Trip nach Paris</h2>
  
  <img src="bilder/paris-eiffelturm.jpg" 
       alt="Eiffelturm in Paris bei Sonnenuntergang" 
       width="800" 
       height="500">
  
  <p>Der Eiffelturm ist das Wahrzeichen von Paris...</p>
  
  <h3>Meine Reisetipps</h3>
  
  <img src="bilder/paris-cafe.jpg" 
       alt="Gemütliches Straßencafé in Paris" 
       width="400">
  
  <p>Die Cafés in Paris sind wunderbar...</p>
</body>
</html>

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Das <img>-Tag und das src-Attribut
✅ Das alt-Attribut (SEO-wichtig!)
✅ Bildgröße mit width und height steuern
✅ Verschiedene Bildformate (JPG, PNG, GIF, WebP, SVG)
✅ Häufige Fehler beim Einbinden von Bildern
✅ SEO-optimierte Bilder in Webseiten einzubinden

🎯 Nächster Schritt: In Kapitel 6 lernst du Link-Tags!

← Zurück zu Kapitel 4: Text-TagsWeiter zu Kapitel 6: Link-Tags →

Kapitel 5: HTML-Bild-Tags ​

5.1 img-Tag Kernattribute: src (Bildpfad) ​

5.2 alt-Attribut (SEO-wichtig!) ​

5.3 Bildgröße steuern: width und height ​

5.4 Empfohlene Bildformate ​

5.5 Anfänger-Falle: Bildpfad-Fehler ​

5.6 Praxis: Bilder in Artikel-Seite einfügen ​

✅ Zusammenfassung ​

Kapitel 5: HTML-Bild-Tags

5.1 img-Tag Kernattribute: src (Bildpfad)

5.2 alt-Attribut (SEO-wichtig!)

5.3 Bildgröße steuern: width und height

5.4 Empfohlene Bildformate

5.5 Anfänger-Falle: Bildpfad-Fehler

5.6 Praxis: Bilder in Artikel-Seite einfügen

✅ Zusammenfassung