HTML-Bilder

Lesezeichen springen dich durch Text. Bilder bringen Fotos, Diagramme und Logos auf die Seite. Das grundlegende HTML-Werkzeug ist das leere img-Element: Im normalen Gebrauch umschließt es keine Bildunterschrift zwischen öffnendem und schließendem Tag. Es zeigt mit src auf eine Datei und bietet mit alt eine Textalternative.

Was img macht

img ist ein ersetztes Element (replaced). Der Browser lädt die Ressource unter src und zeichnet sie im Layout. Fehlt die Datei oder ist sie blockiert, brauchen Besucher trotzdem ein sinnvolles alt (oder für reine Dekoration ein explizit leeres alt=""). Pfade folgen denselben relativen und absoluten Regeln, die du schon für Links und Favicons nutzt.

Direkte Antwort

Schreibe <img src="path/to/file.jpg" alt="kurze Beschreibung">.

• src — wo die Bilddatei liegt
• alt — Textalternative, wenn das Bild nicht sichtbar ist oder nicht lädt
  Optionales width und height können Platz reservieren und Layout-Sprünge verringern. Komprimiere übergroße Fotos lieber, statt Mehr-Megabyte-Dateien an jeden Lernenden mit langsamer Verbindung zu schicken.

Kernattribute auf einen Blick

Ein grundlegendes informatives Bild

Lege Bilder in einen klaren Ordner wie images/ und beschreibe in alt, was zählt.

Das Grundbeispiel lesen

• src="images/team.jpg" ist ein relativer Pfad von der HTML-Datei aus
• alt erklärt die Bedeutung des Fotos für Screenreader und fehlgeschlagene Ladevorgänge
• Es gibt kein separates schließendes </img> im normalen HTML — Attribute stehen am einzelnen Tag
• Wenn Ordner oder Dateiname falsch sind, bricht das Bild, auch wenn der Tag perfekt aussieht

Breiten- und Höhenhinweise

Breite und Höhe helfen dem Browser, Platz zu reservieren, bevor die Bytes ankommen. Passe nach Möglichkeit das Seitenverhältnis der echten Datei an, damit das Bild nicht gestreckt wirkt. Ein riesiges Foto nur mit HTML-Attributen zu verkleinern lädt trotzdem die riesige Datei — skaliere und komprimiere Assets fürs Web.

Dekorative Bilder und leeres alt

Wenn ein Bild keine Information liefert — eine reine Verzierung, die schon durch nahen Text abgedeckt ist — nutze alt="". Lass das Attribut nicht weg. Weglassen von alt und leeres alt="" sind verschieden: leer heißt „ignoriere mich für Accessibility-Bäume“, fehlend oft „etwas stimmt am Markup nicht“.

Schreibe alt für Bedeutung, nicht für Spam

Gutes alt ist ein kurzer Ersatz für das Bild im Kontext: was ein sehender Nutzer braucht, um die Seite zu verstehen. Schlechtes alt stopft Keywords, wiederholt eine Bildunterschrift neben dem Bild oder sagt „Bild“ ohne Inhalt. Ist das Bild ein Diagramm, fasse die Aussage zusammen; ist es ein Logo, das auch als Home-Link dient, kommt der zugängliche Name des Links meist aus dem Bild-alt oder dem umgebenden Text — bleib ehrlich.

Dateiformate, denen Anfänger begegnen

JPEG (.jpg) eignet sich für Fotos. PNG eignet sich für Grafiken mit scharfen Kanten oder Transparenz. SVG eignet sich für einfache Icons und Logos, wenn du scharfes Skalieren willst (mehr SVG-Muster siehst du später). Wähle ein Format, das zum Inhalt passt, und halte die Dateigröße vernünftig.

Übung in deinem Editor

1. Lege eine kleine .jpg- oder .png-Datei in einen images-Ordner.
2. Füge ein img mit korrektem relativem src und klarem alt hinzu.
3. Füge Breite und Höhe hinzu, die zum Seitenverhältnis passen.
4. Brich den Pfad absichtlich einmal — prüfe, dass alt (oder die Broken-Image-UI) den Fehler sichtbar macht, und repariere dann den Pfad.
5. Füge ein dekoratives Bild mit alt="" hinzu und stelle sicher, dass du das Attribut nicht ganz gelöscht hast.

Typische Fehler

• Fehlendes alt bei informativen Bildern
• Falscher Ordner oder Schreibfehler in src
• Ein Mehr-Megabyte-Kamerafoto liefern, obwohl eine kleinere Web-Datei reicht
• alt als Keyword-Müllhalde behandeln
• Logos mit unpassendem width/height strecken
• src (Bilder) mit href (Links) verwechseln

Zusammenfassung

• Bilder nutzen img mit src und alt
• Pfade folgen denselben Regeln wie andere Site-Dateien
• alt unterstützt Barrierefreiheit und fehlgeschlagene Ladevorgänge; nutze alt="" nur für reine Dekoration
• Breite und Höhe können Platz reservieren; optimiere trotzdem die echte Dateigröße
• Wähle ein sinnvolles Format und halte Downloads leicht