EMZETT.
Login

Emzett Wiki

HTML + CSS: Bilder und Grafiken

Properties1
tagsprogrammiersprachen, html-css

4 Min. Lesezeit

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

Teil des Kurses HTML + CSS

Kapitel 5 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23fde68a'/%3E%3Ccircle cx='100' cy='60' r='35' fill='%23f59e0b'/%3E%3C/svg%3E"
     alt="Eine orange Sonne auf gelbem Hintergrund" width="200" height="120">

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

AttributBedeutung
srcPfad oder Adresse des Bildes
altErsatztext: für Screenreader, Suchmaschinen und wenn das Bild nicht lädt
width, heightGröße in Pixeln; verhindert, dass die Seite beim Laden “springt”
loading="lazy"Bild erst laden, wenn es fast sichtbar ist
decoding="async"Bild ohne Blockieren dekodieren

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

FormatGut fürEigenschaft
WebPFotos und Grafikenklein, moderne Browser
AVIFFotosnoch kleiner, neuer
JPEGFotosverlustbehaftet, überall
PNGGrafiken, Screenshots, Transparenzverlustfrei
SVGLogos, Icons, DiagrammeVektor, skalierbar, per CSS stilbar
GIFeinfache Animationenveraltet, besser Video/WebP

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>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' fill='%23bfdbfe'/%3E%3Cpath d='M0 100 L50 40 L90 80 L120 50 L160 100Z' fill='%231e40af'/%3E%3C/svg%3E"
       alt="Blaue Berge vor hellblauem Himmel" width="160" height="100">
  <figcaption>Abbildung 1: Berge in der Abenddämmerung</figcaption>
</figure>

<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:

<svg width="160" height="100" viewBox="0 0 160 100" role="img" aria-label="Ein Smiley">
  <circle cx="50" cy="50" r="40" fill="gold" stroke="black" stroke-width="3"/>
  <circle cx="36" cy="40" r="5"/><circle cx="64" cy="40" r="5"/>
  <path d="M30 62 Q50 82 70 62" stroke="black" stroke-width="3" fill="none"/>
</svg>
<style>svg circle:first-child:hover { fill: orange; }</style>

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.

Merke

  • <img src alt width height>: alt ist Pflicht (leer bei reiner Dekoration)
  • Formate: WebP/AVIF für Fotos, SVG für Logos und Icons, PNG für Transparenz
  • srcset, sizes und <picture> liefern passende Bilder je Gerät
  • loading="lazy" für Bilder außerhalb des sichtbaren Bereichs
  • <figure> und <figcaption> beschriften Abbildungen

Übungsaufgabe

Füge einer Seite ein Bild mit gutem alt, Größenangaben und Bildunterschrift hinzu. Ersetze es danach durch eine inline SVG-Grafik.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Links und Navigation

Weiter: Listen

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks