HTML Bilder - Das <img>-Tag

Bilder machen Webseiten lebendig! In diesem Artikel lernst du, wie du Bilder richtig in HTML einfügst.

Das <img> Tag - Die Grundlagen

Das <img>-Tag fügt ein Bild in deine Webseite ein.

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

Wichtig: <img> ist ein leeres Tag!

Anders als <p> oder <h1> hat <img> kein Closing-Tag:

<!-- ✅ RICHTIG -->
<img src="bild.jpg" alt="Mein Bild">

<!-- ❌ FALSCH -->
<img src="bild.jpg" alt="Mein Bild"></img>

Die zwei wichtigsten Attribute

1. src - Die Bildquelle

src steht für "source" und sagt dem Browser, wo das Bild ist.

<!-- Relatives Bild (im gleichen Ordner) -->
<img src="logo.png" alt="Logo">

<!-- Bild in Unterordner -->
<img src="images/foto.jpg" alt="Foto">

<!-- Bild aus übergeordnetem Ordner -->
<img src="../bilder/header.jpg" alt="Header">

<!-- Absoluter Pfad -->
<img src="/assets/images/banner.jpg" alt="Banner">

<!-- Externes Bild (von einer anderen Webseite) -->
<img src="https://example.com/bild.jpg" alt="Externes Bild">

2. alt - Alternativ-Text

alt ist extrem wichtig! Es ist der Text, der angezeigt wird, wenn:

• Das Bild nicht lädt
• Der User blind ist (Screenreader lesen alt vor)
• Suchmaschinen das Bild verstehen wollen

<!-- ✅ GUTER alt-Text -->
<img src="hund.jpg" alt="Brauner Labrador spielt mit Ball im Park">

<!-- ❌ SCHLECHTER alt-Text -->
<img src="hund.jpg" alt="Bild">
<img src="hund.jpg" alt="hund.jpg">
<img src="hund.jpg" alt="">  <!-- Nur für dekorative Bilder ok -->

Regeln für gute alt-Texte:

• ✅ Beschreibe, was auf dem Bild zu sehen ist
• ✅ Sei spezifisch (nicht nur "Hund", sondern "Brauner Labrador")
• ✅ Halte es kurz (max. 125 Zeichen)
• ❌ Schreibe nicht "Bild von..." oder "Foto von..."
• ❌ Wiederhole nicht den Dateinamen

Bildgröße festlegen: width und height

Du kannst die Größe eines Bildes mit width und height festlegen:

<!-- Breite und Höhe in Pixeln -->
<img src="logo.png" alt="Logo" width="200" height="100">

<!-- Nur Breite (Höhe passt sich automatisch an) -->
<img src="foto.jpg" alt="Foto" width="400">

Warum Größe angeben?

• Browser reserviert Platz → kein "Springen" beim Laden
• Bessere Performance
• Bessere User Experience

Mit CSS statt HTML-Attributen

Moderne Entwickler nutzen oft CSS für die Größe:

<img
    src="bild.jpg"
    alt="Beschreibung"
    style="width: 300px; height: auto;"
>

<!-- oder mit CSS-Klasse -->
<img src="bild.jpg" alt="Beschreibung" class="responsive-img">

.responsive-img {
  width: 100%;
  height: auto;
  max-width: 600px;
}

Bildformate: JPG, PNG, GIF, WebP, SVG

Wann welches Format?

JPG / JPEG

• ✅ Fotos, Bilder mit vielen Farben
• ✅ Kleine Dateigröße
• ❌ Keine Transparenz
• ❌ Verliert Qualität bei Kompression

<img src="foto.jpg" alt="Urlaubsfoto">

PNG

• ✅ Logos, Icons, Screenshots
• ✅ Transparenter Hintergrund
• ✅ Keine Qualitätsverluste
• ❌ Größere Dateien als JPG

<img src="logo.png" alt="Firmenlogo">

GIF

• ✅ Einfache Animationen
• ❌ Nur 256 Farben
• ❌ Große Dateien

<img src="loading.gif" alt="Loading Animation">

WebP (Modern!)

• ✅ Beste Kompression
• ✅ Transparenz
• ✅ Animationen
• ❌ Ältere Browser unterstützen es nicht

<img src="bild.webp" alt="Modernes Bild">

SVG (Vektorgrafiken)

• ✅ Perfekt für Icons und Logos
• ✅ Skaliert ohne Qualitätsverlust
• ✅ Sehr kleine Dateien
• ❌ Nicht für Fotos geeignet

<img src="icon.svg" alt="Icon">

Responsive Bilder - Für alle Bildschirmgrößen

Methode 1: CSS max-width

<img
    src="grosses-bild.jpg"
    alt="Landschaft"
    style="max-width: 100%; height: auto;"
>

Das Bild wird nie größer als sein Container, passt sich aber an kleinere Bildschirme an.

Methode 2: srcset - Verschiedene Bildgrößen

Moderne Browser können verschiedene Bildgrößen für verschiedene Bildschirme laden:

<img
    src="bild-klein.jpg"
    srcset="
        bild-klein.jpg 400w,
        bild-mittel.jpg 800w,
        bild-gross.jpg 1200w
    "
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="Responsive Bild"
>

Erklärung:

• srcset: Liste der verfügbaren Bilder mit ihren Breiten
• sizes: Wann welche Größe geladen werden soll
• Browser wählt automatisch das beste Bild

Lazy Loading - Bilder später laden

Bei vielen Bildern auf einer Seite: Lade Bilder erst, wenn sie sichtbar werden!

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

Vorteile:

• ✅ Schnellere Seitenladezeit
• ✅ Weniger Datenverbrauch
• ✅ Bessere Performance

Wann nutzen?

• Bilder "below the fold" (nicht sofort sichtbar)
• Viele Bilder auf einer Seite
• Mobile Webseiten

Bilder als Links

Du kannst Bilder klickbar machen:

<a href="https://example.com">
    <img src="button.jpg" alt="Klick mich">
</a>

Bilder neben Text

<div>
    <img
        src="profilbild.jpg"
        alt="Profilbild von Max"
        style="float: left; margin-right: 20px; width: 100px;"
    >
    <p>
        Max Mustermann ist Webentwickler und liebt HTML.
        Er hat über 10 Jahre Erfahrung und gibt gerne sein
        Wissen weiter.
    </p>
</div>

Das <figure> Element - Bilder mit Beschriftung

Für Bilder mit Bildunterschrift nutze <figure> und <figcaption>:

<figure>
    <img
        src="eiffelturm.jpg"
        alt="Der Eiffelturm bei Sonnenuntergang"
        width="600"
    >
    <figcaption>
        Der Eiffelturm in Paris bei Sonnenuntergang,
        fotografiert im Sommer 2024.
    </figcaption>
</figure>

CSS für figure:

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
  font-style: italic;
}

Best Practices

✅ DO:

1. Immer alt angeben (außer bei rein dekorativen Bildern)
2. Optimiere Bilder vor dem Upload (komprimieren!)
3. Nutze das richtige Format (JPG für Fotos, PNG für Logos)
4. Gib width/height an (verhindert Layout-Shift)
5. Nutze lazy loading bei vielen Bildern
6. Responsive Bilder mit max-width: 100%

❌ DON'T:

1. Keine riesigen Bilder (maximal 200KB pro Bild)
2. Kein leeres alt: alt="" nur für dekorative Bilder
3. Keine Bilder für Text (nutze echten Text!)
4. Keine Copyright-Verletzungen (nur eigene Bilder oder lizenzfreie)

Häufige Anfängerfehler

Fehler 1: Vergessenes alt-Attribut

❌ FALSCH:

<img src="foto.jpg">

✅ RICHTIG:

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

Fehler 2: Schlechter alt-Text

❌ FALSCH:

<img src="IMG_1234.jpg" alt="IMG_1234.jpg">
<img src="foto.jpg" alt="Bild">

✅ RICHTIG:

<img src="IMG_1234.jpg" alt="Golden Retriever spielt im Garten">
<img src="foto.jpg" alt="Sonnenuntergang über dem Meer">

Fehler 3: Zu große Bilder

❌ FALSCH:

<!-- 5MB Bild direkt einbinden -->
<img src="foto-original.jpg" alt="Foto" width="300">

✅ RICHTIG:

<!-- Vorher komprimieren auf 100KB -->
<img src="foto-optimiert.jpg" alt="Foto" width="300">

Bildoptimierung - Tools

Online-Tools:

• TinyPNG - PNG/JPG komprimieren
• Squoosh - Von Google, alle Formate
• Compressor.io - Mehrere Formate

Zielgrößen:

• Hintergrundbilder: Max. 200-300KB
• Content-Bilder: Max. 100-150KB
• Icons/Logos: Max. 50KB
• Thumbnails: Max. 20KB

<img src="image.jpg" alt="Beschreibung" loading="lazy">

<div style="aspect-ratio: 16/9; width: 100%;">
  <img src="image.jpg" alt="Bild" style="width: 100%; height: 100%; object-fit: cover;">
</div>

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;  /* Oder: contain, fill, none, scale-down */
}

<img
  src="full-image.jpg"
  alt="Landschaft"
  style="background: linear-gradient(to right, #f0f0f0, #e0e0e0, #f0f0f0);
         background-size: 200% 100%;
         animation: loading 1.5s infinite;"
>

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Übungsaufgaben

Aufgabe 1: Galerie

Erstelle eine einfache Bildergalerie mit 4 Bildern:

• Jedes Bild mit aussagekräftigem alt-Text
• Alle Bilder 300px breit
• Nutze <figure> und <figcaption> für Beschriftungen

Aufgabe 2: Responsive Header

Erstelle einen Header mit:

• Logo links (100px breit)
• Hintergrundbild (responsive)
• h1 über dem Hintergrundbild

Aufgabe 3: Bild-Link

Erstelle ein klickbares Bild, das zu deiner Lieblings-Webseite führt.

Nächste Schritte

Du kennst jetzt:

• ✅ Bilder einfügen mit <img>
• ✅ alt-Texte schreiben
• ✅ Bildgrößen festlegen
• ✅ Responsive Bilder
• ✅ Lazy Loading

Als Nächstes lernst du:

• Links erstellen (<a>)
• Listen (<ul>, <ol>)
• Formulare (<form>, <input>)

Weiter so! 🚀