Bilder und Grafiken

Mit <img> bindest du Bilder ein. Es ist ein leeres Element mit zwei Pflichtangaben:

(Hier ist das Bild direkt als Daten-URL eingebettet. Normalerweise steht in src ein Dateiname wie sonne.jpg.)

Gute alt-Texte

• Beschreibe, was für das Verständnis wichtig ist: "Diagramm: Umsatz steigt 2025 um 20 Prozent"
• Beginne nicht mit "Bild von ...", das weiß der Screenreader schon
• Rein dekorative Bilder bekommen ein leeres alt="", dann überspringen Screenreader sie
• Bei Bildern in Links beschreibt alt das Ziel des Links, nicht das Bild
• Bei Logos: Firmenname als alt

Bildformate

Responsive Bilder

Auf kleinen Bildschirmen soll nicht das riesige Desktop-Bild geladen werden. Mit srcset und sizes wählt der Browser die passende Datei:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Strand bei Sonnenuntergang" width="800" height="533" loading="lazy">

Mit <picture> lieferst du unterschiedliche Formate oder Ausschnitte:

<picture>
  <source type="image/avif" srcset="foto.avif">
  <source type="image/webp" srcset="foto.webp">
  <source media="(max-width: 600px)" srcset="foto-hochkant.jpg">
  <img src="foto.jpg" alt="Strand bei Sonnenuntergang" width="800" height="533">
</picture>

Der Browser nimmt die erste passende <source>; <img> ist der Rückfall und Pflicht.

Bild mit Beschriftung

<figure> fasst Bild (oder Code, Diagramm, Zitat) und <figcaption> zusammen.

Bilder verkleinern: das Thema Ladezeit

Bilder sind meist der größte Teil einer Seite. Beachte:

1. Skaliere Bilder auf die tatsächlich benötigte Größe, bevor du sie hochlädst
2. Nutze WebP/AVIF und Kompression
3. Setze immer width und height (oder CSS aspect-ratio)
4. loading="lazy" für alles außerhalb des ersten Bildschirms, aber nicht für das große Bild ganz oben
5. SVG für Logos und Icons

SVG direkt im HTML

SVG-Grafiken kannst du als Code in die Seite schreiben und per CSS und JavaScript verändern:

Hintergrundbilder

Bilder, die nur Dekoration sind, gehören in CSS (background-image), nicht in HTML. Inhaltliche Bilder mit Bedeutung gehören als <img> mit alt ins HTML.

Rechte nicht vergessen

Du darfst nur Bilder verwenden, die du selbst gemacht hast oder deren Lizenz es erlaubt (zum Beispiel Creative Commons, Unsplash, Wikimedia Commons). Gib bei Bedarf die Quelle und den Urheber an.