HTML Bilder

Das <img> -Element

Das Standard-HTML-Tag für Bilder ist <img> (image). Es wird ohne schließendes Tag geschrieben und benötigt mindestens das Attribut src (source / Bildquelle) und alt (alternativer Text).

HTML Kopieren

<img src="katze.jpg" alt="Eine schlafende Katze">

• src - Bilddatei oder URL.
• alt - angezeigt, wenn Bild nicht geladen wird; wichtig für Screenreader.
• title - Tooltip beim Mouseover (optional).
• width / height - Größe in Pixeln oder Prozent (optional, besser per CSS).

Bildformate und Einsatzbereiche

Die Wahl des richtigen Formats hängt vom Bildinhalt, Transparenzbedarf und gewünschter Qualität ab.

Responsive Bilder & unterschiedliche Formate

Bilder sollten auf allen Geräten gut aussehen. Die einfachste Lösung:

html Kopieren

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

Manchmal möchtest du unterschiedliche Bildformate oder -größen abhängig vom Gerät oder Browser nutzen. Moderne Browser unterstützen Formate wie WebP oder AVIF , die kleiner und schneller laden als klassische JPG oder PNG . Für Browser, die diese Formate nicht kennen, solltest du immer ein Fallback-Bild angeben.

Das erreichst du mit dem <picture> -Element:

html Kopieren

<picture>
    <source srcset="bild.avif" type="image/avif">
    <source srcset="bild.webp" type="image/webp">
    <img src="bild.jpg" alt="Beispielbild">
</picture>

Du kannst zusätzlich media -Attribute verwenden, um Bilder für bestimmte Bildschirmgrößen zu laden:

HTML Kopieren

<picture>
    <source srcset="bild-klein.jpg" media="(max-width: 600px)">
    <source srcset="bild-gross.jpg" media="(min-width: 601px)">
    <img src="bild.jpg" alt="Beispielbild">
</picture>

So passt sich dein Bild an die Bildschirmgröße an und lädt jeweils die passende Variante.

srcset und sizes - Bilder für verschiedene Auflösungen

Neben dem <picture> -Element gibt es eine weitere Möglichkeit, responsive Bilder bereitzustellen: die Attribute srcset und sizes direkt am <img> -Tag.

srcset für verschiedene Pixeldichten (Retina)

Moderne Displays haben unterschiedliche Pixeldichten. Mit srcset kannst du hochauflösende Varianten für Retina-Displays bereitstellen:

HTML Kopieren

<!-- Pixeldichte-Varianten (1x, 2x, 3x) -->
<img 
    src="logo.png"
    srcset="logo.png 1x,
            logo@2x.png 2x,
            logo@3x.png 3x"
    alt="Firmenlogo"
    width="200"
    height="100">

srcset mit Breiten-Deskriptoren

Für Content-Bilder, die ihre Größe je nach Viewport ändern, verwendest du Breiten-Deskriptoren ( w ):

HTML Kopieren

<img 
    src="bild-800.jpg"
    srcset="bild-400.jpg 400w,
            bild-800.jpg 800w,
            bild-1200.jpg 1200w,
            bild-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           800px"
    alt="Landschaftsfoto">

Bilder mit Beschriftung - figure und figcaption

Das <figure> -Element ist ein semantischer Container für Bilder, Diagramme, Code-Beispiele oder andere Medien, die eine Beschriftung benötigen. Die Beschriftung wird mit <figcaption> hinzugefügt.

HTML Kopieren

<figure>
    <img src="see.jpg" alt="Blick über den See">
    <figcaption>Ein ruhiger Morgen am See</figcaption>
</figure>

figure mit mehreren Bildern

Ein <figure> -Element kann auch mehrere Bilder enthalten:

HTML Kopieren

<figure>
    <img src="vorher.jpg" alt="Raum vor der Renovierung">
    <img src="nachher.jpg" alt="Raum nach der Renovierung">
    <figcaption>Vorher-Nachher-Vergleich der Wohnzimmer-Renovierung</figcaption>
</figure>

Bilder als Hintergrund

HTML Kopieren

<style>
.hero {
  background-image: url('header-bg.jpg');
  background-size: cover;
  background-position: center;
}
</style>

Positionierung im Text

HTML Kopieren

<style>
img.left {
  float: left;
  margin-right: 1em;
}
</style>

Text umfließt das Bild. Alternativ: display: flex; oder grid .

Alt-Texte und Barrierefreiheit

Das alt -Attribut ist eines der wichtigsten Attribute für Bilder. Es wird von Screenreadern vorgelesen, erscheint wenn das Bild nicht lädt, und hilft Suchmaschinen beim Verstehen des Bildinhalts.

Gute Alt-Texte schreiben

Wann ein leerer Alt-Text sinnvoll ist

Dekorative Bilder, die keine Information vermitteln, erhalten einen leeren Alt-Text. So überspringen Screenreader sie:

HTML Kopieren

<!-- Dekoratives Trennelement -->
<img src="divider.svg" alt="">

<!-- Icon neben Text (Text erklärt bereits) -->
<button>
    <img src="search-icon.svg" alt="">
    Suchen
</button>

<!-- Hintergrundbild als CSS ist besser -->

Performance-Optimierung für Bilder

Bilder sind oft der größte Anteil am Seitengewicht. Mit ein paar Techniken kannst du die Ladezeit drastisch verbessern.

Lazy Loading - Bilder erst bei Bedarf laden

Mit loading="lazy" werden Bilder erst geladen, wenn sie in den sichtbaren Bereich scrollen:

HTML Kopieren

<!-- Lazy Loading für Bilder unterhalb des sichtbaren Bereichs -->
<img 
    src="bild.jpg" 
    alt="Beispielbild" 
    loading="lazy"
    width="800"
    height="600">

<!-- Hero-Bilder sollten NICHT lazy sein -->
<img 
    src="hero.jpg" 
    alt="Hero Banner" 
    loading="eager">

Width und Height gegen Layout-Shifts

Gib immer width und height an - so reserviert der Browser Platz und verhindert Layoutsprünge (CLS):

HTML Kopieren

<!-- Mit Dimensionen - Browser reserviert Platz -->
<img 
    src="foto.jpg" 
    alt="Produktfoto" 
    width="400" 
    height="300"
    loading="lazy">

<!-- CSS macht es trotzdem responsiv -->
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>

fetchpriority für wichtige Bilder

Das fetchpriority -Attribut teilt dem Browser mit, welche Bilder priorisiert geladen werden sollen:

HTML Kopieren

<!-- LCP-Bild (Largest Contentful Paint) priorisieren -->
<img 
    src="hero-banner.jpg" 
    alt="Willkommen auf unserer Seite"
    fetchpriority="high">

<!-- Unwichtige Bilder herabstufen -->
<img 
    src="decoration.jpg" 
    alt="" 
    fetchpriority="low"
    loading="lazy">

decoding="async" für flüssiges Rendering

Mit decoding="async" blockiert das Dekodieren des Bildes nicht das Rendering der Seite:

HTML Kopieren

<img 
    src="grosses-bild.jpg" 
    alt="Hochauflösendes Foto"
    decoding="async"
    loading="lazy">

Häufige Fehler bei HTML-Bildern

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.