HTML Bilder img alt title

Eine Webseite ohne Bilder? Langweilig! HTML Bilder machen deine Seite visuell ansprechend und helfen beim Erklären komplexer Inhalte. In diesem Tutorial lernst du das <img>-Tag, warum alt-Texte wichtig sind und wie du Bilder professionell einbindest.

Einführung in das HTML Bilder Tutorial

Was du über HTML Bilder lernst

Nach diesem Tutorial kannst du:

Bilder mit dem img-Tag einbinden
Alt-Texte schreiben, die Screenreader verstehen
Relative und absolute Pfade nutzen
Häufige Fehler vermeiden

Warum Bilder in HTML wichtig sind

Bilder sind mächtig:

Aufmerksamkeit – Ein gutes Bild fängt den Blick sofort
Verständnis – Komplexe Themen werden mit Grafiken klarer
SEO – Google indexiert Bilder-Suchergebnisse
Barrierefreiheit – Mit alt-Text werden Bilder für alle zugänglich

Typische Anwendungsfälle

Überall sind Bilder: Produktfotos in Shops, Illustrationen in Artikeln, Logos im Header, Icons in der Navigation. Für jeden Einsatz gibt's Best Practices!

Voraussetzungen

Benötigte HTML-Grundlagen

Du solltest die HTML-Grundlagen verstehen – Tags, Attribute, Dateipfade. Falls nicht, hol das kurz nach!

Tools und Arbeitsumgebung

Du brauchst einen Texteditor, Browser und ein paar Beispielbilder (JPG, PNG oder WebP). Erstelle einen Projekt-Ordner mit einem "bilder"-Unterordner – so lernst du relative Pfade praxisnah.

Schritt-für-Schritt-Anleitung

Schritt 1: Minimale HTML-Seite einrichten

Beginne mit einer einfachen Grundstruktur:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>HTML Bilder Tutorial</title>
</head>
<body>
    <h1>Meine erste Seite mit Bildern</h1>
    <!-- Hier kommen deine Bilder rein -->
</body>
</html>

Schritt 2: Erstes Bild einbinden

Das <img>-Tag ist besonders: Es hat KEINEN schließenden Tag!

Jetzt HTML lernen

<img src="beispiel-bild.jpg">

Das src-Attribut ("source" = Quelle) sagt, wo das Bild liegt.

Schritt 3: Alt-Attribut richtig verwenden

Der alt-Text ist PFLICHT! Er wird:

Von Screenreadern vorgelesen
Angezeigt, wenn das Bild nicht lädt
Von Google für die Bildersuche genutzt

<img src="katze.jpg" alt="Eine graue Hauskatze sitzt auf einem roten Sofa">

Tipp: Beschreibe, was man SIEHT. Nicht "Bild von einer Katze" (das weiß der Browser schon), sondern WAS für eine Katze, WO sie ist.

Für rein dekorative Bilder (z.B. Trennlinien): alt="" – leer, aber vorhanden!

Schritt 4: Title-Attribut sinnvoll einsetzen

Das title-Attribut zeigt einen Tooltip beim Hovern:

Jetzt HTML lernen

<img src="produktfoto.jpg" 
     alt="Rote Laufschuhe der Marke SportMax, Größe 42" 
     title="SportMax Laufschuhe - Jetzt 20% Rabatt">

Nutze es sparsam – nur wenn es echten Mehrwert bringt (z.B. Copyright-Hinweise).

Schritt 5: Bildgröße festlegen

Mit width und height verhinderst du "Layout-Sprünge" beim Laden:

<img src="bild.jpg" alt="Beschreibung" width="300" height="200">

Der Browser reserviert den Platz, bevor das Bild geladen ist. Nutzer erleben flüssigere Seiten!

Code-Beispiele zu HTML Bilder

Verschiedene Bildformate

<!-- JPG für Fotos -->
<img src="landschaft.jpg" alt="Sonnenuntergang über dem Meer">

<!-- PNG für Grafiken mit Transparenz -->
<img src="logo.png" alt="Firmenlogo von Vibe Venture">

<!-- WebP für moderne Browser (kleinere Dateien!) -->
<img src="banner.webp" alt="Werbebanner für Sommerschlussverkauf">

Faustregel: JPG für Fotos, PNG für Logos/Icons, WebP für beste Performance.

Relative und absolute Pfade

<!-- Gleiches Verzeichnis -->
<img src="bild1.jpg" alt="Bild im gleichen Ordner">

<!-- Unterordner -->
<img src="bilder/bild2.jpg" alt="Bild im Unterordner">

<!-- Absoluter Pfad -->
<img src="/assets/images/bild3.jpg" alt="Bild mit absolutem Pfad">

<!-- Externe URL -->
<img src="https://example.com/bild.jpg" alt="Externes Bild">

Relative Pfade sind praktischer – sie funktionieren auch nach Server-Umzügen!

[bildapi id="001" prompt="Computer screen showing HTML code with img tags and various image examples, clean modern coding environment" name="html-bilder-tutorial" alt="HTML Code-Editor mit Beispielen für die Bildintegration"]

Häufige Fehler & Troubleshooting

Bild wird nicht angezeigt

Checkliste:

☐ Stimmt der Dateiname (Groß-/Kleinschreibung)?
☐ Existiert die Datei?
☐ Stimmt der Pfad?
☐ Sind src-Wert in Anführungszeichen?

Tipp: Browser-Konsole (F12) zeigt 404-Fehler an!

Alt-Text Fehler

❌ "Bild" oder "Foto" – zu generisch
❌ "Bild von einem Hund" – "Bild von" ist überflüssig
❌ Keyword-Stuffing – unnatürliche SEO-Texte
✅ "Golden Retriever spielt mit rotem Ball im Park" – beschreibend!

Falsche Pfadangaben

Tipp: Öffne den Bildpfad direkt im Browser. Wenn's dort nicht funktioniert, stimmt der Pfad im HTML auch nicht!

HTML: Best Practices & Tipps

Barrierefreie Bilder

Inhaltstragende Bilder: Aussagekräftiger alt-Text
Dekorative Bilder: alt="" (leer)
Text in Bildern: Vermeiden oder als HTML-Text wiederholen

Performance

Bilder komprimieren (TinyPNG, Squoosh)
Richtige Größe verwenden (nicht 4000px hochladen für 300px Anzeige)
WebP für moderne Browser
width/height immer angeben

SEO-Tipps

Beschreibende Dateinamen: golden-retriever-park.jpg statt IMG_0042.jpg
Alt-Text mit relevanten Keywords (aber natürlich!)
Bilder im thematischen Kontext platzieren

Wartbarer Code

Einheitliche Attribut-Reihenfolge (src, alt, title, width, height) macht den Code lesbar. Organisiere Bilder in logischen Ordnern!

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kannst jetzt Bilder professionell einbinden:

<img src="..." alt="..."> – die Basis
Alt-Texte beschreiben das Bild für Screenreader und SEO
Relative Pfade für lokale, absolute für externe Bilder
Width/Height verhindern Layout-Sprünge

Mit diesem Wissen machst du deine Webseiten visuell ansprechend UND barrierefrei!

Bereit für mehr? Lerne als Nächstes, wie du mit HTML Listen Inhalte übersichtlich strukturierst!