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