Das <img>-Tag erklärt

Das <img>-Tag ist ein selbstschließendes HTML-Element, das zum Einbetten von Bildern in Webseiten verwendet wird. Im Gegensatz zu anderen HTML-Elementen benötigt es kein schließendes Tag und verwendet Attribute, um die Bildquelle und -eigenschaften zu definieren.

Grundlegende Bildsyntax

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

Wesentliche <img>-Attribute

Erforderliche Attribute:

• src: Gibt den Pfad zur Bilddatei an
• alt: Stellt alternativen Text für die Barrierefreiheit bereit

Optionale Attribute:

• width: Setzt die Bildbreite in Pixeln
• height: Setzt die Bildhöhe in Pixeln
• title: Fügt einen Tooltip beim Überfahren des Bildes hinzu
• loading: Steuert, wann das Bild geladen wird (Lazy Loading)

Vollständiges Beispiel

<img
  src="bilder/sonnenuntergang-strand.jpg"
  alt="Wunderschöner Sonnenuntergang über einem tropischen Strand mit Palmen"
  width="800"
  height="600"
  title="Sonnenuntergang Strand Paradies"
  loading="lazy"
/>

Die Bedeutung von Alt-Text

Alt-Text (alternativer Text) ist entscheidend für die Web-Barrierefreiheit und SEO. Er erfüllt mehrere Zwecke:

Warum Alt-Text wichtig ist

1. Barrierefreiheit: Screenreader verwenden Alt-Text, um Bilder für sehbehinderte Nutzer zu beschreiben
2. SEO: Suchmaschinen verwenden Alt-Text, um Bildinhalte zu verstehen
3. Fallback: Wird angezeigt, wenn Bilder nicht geladen werden können
4. Kontext: Bietet Bedeutung und Kontext für das Bild

Effektiven Alt-Text schreiben

Gute Alt-Text-Beispiele:

<!-- Beschreibend und spezifisch -->
<img
  src="golden-retriever.jpg"
  alt="Golden Retriever spielt Apportieren in einem sonnigen Park"
/>

<!-- Funktionale Beschreibung für Buttons -->
<img src="suche-icon.png" alt="Suchen" />

<!-- Leerer Alt-Text für dekorative Bilder -->
<img src="dekorative-umrandung.png" alt="" />

Alt-Text Best Practices:

• Seien Sie beschreibend, aber prägnant (unter 125 Zeichen)
• Schließen Sie wichtige Details und Kontext ein
• Vermeiden Sie "Bild von" oder "Foto von"
• Verwenden Sie leeren Alt-Text (alt="") für rein dekorative Bilder
• Schließen Sie Text ein, der im Bild erscheint

Schlechte Alt-Text-Beispiele:

<!-- Zu vage -->
<img src="hund.jpg" alt="hund" />

<!-- Redundant -->
<img src="sonnenuntergang.jpg" alt="Bild eines Sonnenuntergangs" />

<!-- Zu lang -->
<img
  src="buero.jpg"
  alt="Ein sehr großes modernes Bürogebäude mit Glasfenstern und Stahlrahmenkonstruktion in der Innenstadt mit vorbeigehenden Menschen"
/>

Bilddateiformate und wann sie verwendet werden

Die Wahl des richtigen Bildformats ist entscheidend für Web-Performance und Qualität. Hier sind die wichtigsten Formate und ihre Anwendungsfälle:

JPEG (.jpg, .jpeg)

Am besten für: Fotografien und Bilder mit vielen Farben

Eigenschaften:

• Verlustbehaftete Kompression
• Kleine Dateigrößen
• Unterstützt Millionen von Farben
• Keine Transparenz-Unterstützung

<img src="landschaftsfoto.jpg" alt="Berglandschaft bei Sonnenaufgang" />

PNG (.png)

Am besten für: Bilder mit Transparenz, Logos, Grafiken mit wenigen Farben

Eigenschaften:

• Verlustfreie Kompression
• Unterstützt Transparenz
• Größere Dateigrößen als JPEG
• Perfekt für Logos und Icons

<img src="firmen-logo.png" alt="Mediaweb Firmenlogo" />

WebP (.webp)

Am besten für: Moderne Webanwendungen (wenn unterstützt)

Eigenschaften:

• Überlegene Kompression gegenüber JPEG und PNG
• Unterstützt Transparenz und Animation
• Nicht von allen Browsern unterstützt
• 25-35% kleinere Dateigrößen

<picture>
  <source srcset="hero-bild.webp" type="image/webp" />
  <img src="hero-bild.jpg" alt="Hero-Banner zeigt unser Produkt" />
</picture>

SVG (.svg)

Am besten für: Einfache Grafiken, Icons, Logos, die skaliert werden müssen

Eigenschaften:

• Vektorformat (skalierbar)
• Sehr kleine Dateigrößen
• Perfekte Schärfe in jeder Größe
• Kann mit CSS gestylt werden

<img src="pfeil-icon.svg" alt="Pfeil nach rechts" />

GIF (.gif)

Am besten für: Einfache Animationen (sparsam verwenden)

Eigenschaften:

• Unterstützt Animation
• Begrenzt auf 256 Farben
• Große Dateigrößen für Animationen
• Erwägen Sie Videoformate für komplexe Animationen

Responsive Bilder und Srcset

Moderne Websites müssen auf verschiedenen Bildschirmgrößen und Auflösungen funktionieren. Responsive Bilder gewährleisten optimale Performance und Qualität auf allen Geräten.

Das srcset-Attribut

Das srcset-Attribut ermöglicht es Ihnen, mehrere Bildquellen für verschiedene Bildschirmbedingungen bereitzustellen:

<img
  src="bild-800w.jpg"
  srcset="bild-400w.jpg 400w, bild-800w.jpg 800w, bild-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Responsives Landschaftsbild"
/>

Srcset-Syntax verstehen

Breitendeskriptoren (w):

srcset=" kleines-bild.jpg 400w, mittleres-bild.jpg 800w, grosses-bild.jpg 1200w "

Dichtedeskriptoren (x):

srcset=" bild.jpg 1x, bild-2x.jpg 2x, bild-3x.jpg 3x "

Das <picture>-Element

Für komplexere responsive Bildszenarien verwenden Sie das <picture>-Element:

<picture>
  <!-- Mobile: kleineres, zugeschnittenes Bild -->
  <source media="(max-width: 600px)" srcset="mobil-hero.jpg" />

  <!-- Tablet: mittelgroßes Bild -->
  <source media="(max-width: 1024px)" srcset="tablet-hero.jpg" />

  <!-- Desktop: vollgroßes Bild -->
  <source media="(min-width: 1025px)" srcset="desktop-hero.jpg" />

  <!-- Fallback für ältere Browser -->
  <img src="desktop-hero.jpg" alt="Hero-Banner zeigt unsere Dienstleistungen" />
</picture>

Art Direction mit Picture

Verwenden Sie verschiedene Bilder für verschiedene Bildschirmgrößen:

<picture>
  <!-- Mobile: Hochformat -->
  <source media="(max-width: 600px)" srcset="hochformat-bild.jpg" />

  <!-- Desktop: Querformat -->
  <img src="querformat-bild.jpg" alt="Teamzusammenarbeit im modernen Büro" />
</picture>

Bilder für Web-Performance optimieren

Bildoptimierung ist entscheidend für schnell ladende Websites. Hier sind wesentliche Techniken:

1. Die richtige Größe wählen

<!-- Nicht so: großes Bild herunterskaliert -->
<img
  src="riesiges-bild-4000x3000.jpg"
  width="400"
  height="300"
  alt="Produktfoto"
/>

<!-- So: angemessen dimensioniertes Bild -->
<img src="produkt-400x300.jpg" width="400" height="300" alt="Produktfoto" />

2. Lazy Loading implementieren

<!-- Moderne Browser -->
<img src="bild.jpg" alt="Beschreibung" loading="lazy" />

<!-- Mit Intersection Observer Fallback -->
<img
  src="platzhalter.jpg"
  data-src="echtes-bild.jpg"
  alt="Beschreibung"
  class="lazy-load"
  loading="lazy"
/>

3. Angemessene Kompression verwenden

Für JPEG-Bilder:

• Verwenden Sie 80-85% Qualität für die meisten Fotos
• Verwenden Sie 90-95% Qualität für wichtige Hero-Bilder
• Verwenden Sie 60-75% Qualität für Thumbnails

Für PNG-Bilder:

• Verwenden Sie Tools wie TinyPNG oder ImageOptim
• Erwägen Sie die Konvertierung zu WebP, wenn möglich

4. Progressive Enhancement implementieren

<picture>
  <!-- Modernes Format für unterstützte Browser -->
  <source srcset="bild.avif" type="image/avif" />
  <source srcset="bild.webp" type="image/webp" />

  <!-- Fallback für alle Browser -->
  <img src="bild.jpg" alt="Beschreibung" />
</picture>

5. Richtige Größenattribute hinzufügen

<!-- Verhindert Layout-Verschiebung -->
<img
  src="bild.jpg"
  alt="Beschreibung"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;"
/>

Fortgeschrittene Bildtechniken

Image Maps

Erstellen Sie klickbare Bereiche innerhalb eines Bildes:

<img src="weltkarte.jpg" alt="Weltkarte" usemap="#weltkarte" />

<map name="weltkarte">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="nordamerika.html"
    alt="Nordamerika"
  />
  <area shape="circle" coords="200,200,50" href="europa.html" alt="Europa" />
</map>

Figure und Figcaption

Semantische Bedeutung und Bildunterschriften bereitstellen:

<figure>
  <img src="diagramm.jpg" alt="Umsatzwachstumsdiagramm zeigt 25% Steigerung" />
  <figcaption>
    Umsatzwachstum: Q4 2024 zeigt 25% Steigerung gegenüber dem Vorquartal
  </figcaption>
</figure>

CSS-Integration

Bilder mit CSS stylen:

<img src="profil.jpg" alt="Benutzerprofilfoto" class="profil-bild" />

.profil-bild {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
}

Häufige Bildfehler vermeiden

1. Fehlender Alt-Text

<!-- Falsch -->
<img src="wichtiges-diagramm.jpg" />

<!-- Richtig -->
<img
  src="wichtiges-diagramm.jpg"
  alt="Umsatzwachstumsdiagramm zeigt 40% Steigerung"
/>

2. Bilder für Text verwenden

<!-- Falsch: Text im Bild -->
<img src="ueberschrift-text.jpg" alt="Willkommen auf unserer Website" />

<!-- Richtig: echter Text -->
<h1>Willkommen auf unserer Website</h1>

3. Dateigrößen nicht optimieren

<!-- Falsch: riesige Datei -->
<img src="foto-5mb.jpg" alt="Teamfoto" />

<!-- Richtig: optimierte Datei -->
<img src="foto-optimiert-200kb.jpg" alt="Teamfoto" />

4. Responsive Design ignorieren

<!-- Falsch: feste Größe -->
<img src="hero.jpg" width="1200" height="800" alt="Hero-Bild" />

<!-- Richtig: responsiv -->
<img
  src="hero.jpg"
  srcset="hero-400w.jpg 400w, hero-800w.jpg 800w, hero-1200w.jpg 1200w"
  sizes="100vw"
  alt="Hero-Bild"
  style="max-width: 100%; height: auto;"
/>

Zusammenfassung der Best Practices

1. Immer Alt-Text einschließen für Barrierefreiheit und SEO
2. Das richtige Dateiformat wählen basierend auf Bildtyp und Anwendungsfall
3. Dateigrößen optimieren ohne notwendige Qualität zu opfern
4. Responsive Bilder verwenden mit srcset und sizes Attributen
5. Lazy Loading implementieren für bessere Performance
6. Width- und Height-Attribute einschließen um Layout-Verschiebung zu verhindern
7. Semantisches HTML verwenden mit figure und figcaption wenn angemessen
8. Geräteübergreifend testen um sicherzustellen, dass Bilder korrekt angezeigt werden
9. Moderne Formate erwägen wie WebP und AVIF mit Fallbacks
10. Performance überwachen und basierend auf echten Nutzerdaten optimieren

Fazit

Das Arbeiten mit Bildern in HTML umfasst viel mehr als nur das Hinzufügen eines <img>-Tags zu Ihrer Seite. Durch das Verständnis der ordnungsgemäßen Implementierung, Barrierefreiheitsanforderungen, Dateiformate, responsive Techniken und Optimierungsstrategien können Sie Websites erstellen, die schnell, barrierefrei und visuell ansprechend auf allen Geräten sind.

Denken Sie daran, dass Bilder sowohl die Benutzererfahrung als auch die Website-Performance erheblich beeinflussen. Nehmen Sie sich die Zeit, diese Techniken ordnungsgemäß zu implementieren, und Ihre Nutzer werden es Ihnen mit besserem Engagement und schnelleren Seitenladezeiten danken.

Beginnen Sie mit der Implementierung dieser Bildoptimierungstechniken in Ihrem nächsten Projekt, und Sie werden sofortige Verbesserungen sowohl bei Performance- als auch bei Barrierefreiheits-Scores sehen.