alt-Attribut vergeben und Bilder mit <figure> und
<figcaption> beschriften.
Du brauchst für diese Aufgabe Bilder zum Thema Wasser. Möglichkeiten:
Lege einen Unterordner bilder/ in deinem Projektordner an und speichere dort
mindestens zwei Bilder (z. B. als wasser1.jpg,
wasser2.jpg).
Öffne deine (bisher leere) wasser.html und baue sie aus.
<h1>: „Wasser" und zwei einleitende
Absätze ein (Eigenschaften, Bedeutung für das Leben).
<img src="bilder/wasser1.jpg" alt="Wassertropfen auf einem Blatt">
Das src-Attribut gibt den Pfad zur Datei an.
Das alt-Attribut enthält einen Beschreibungstext –
er wird angezeigt, wenn das Bild nicht lädt, und ist wichtig für Screenreader.
Ohne CSS wirken Bilder in Originalgröße. Du kannst sie mit
width- und height-Attributen begrenzen:
<img src="bilder/wasser1.jpg" alt="…" width="400">
Gib nur width an – der Browser berechnet die Höhe automatisch proportional.
Probiere verschiedene Werte aus (200, 400, 600).
HTML5 bietet <figure> und <figcaption>
für semantisch korrekte Bilder mit Beschriftung:
<figure>
<img src="bilder/wasser2.jpg" alt="Meereswellen am Strand" width="400">
<figcaption>Wellen am Strand – Wasser in Bewegung.</figcaption>
</figure>
Binde so mindestens zwei Bilder mit Bildunterschrift ein.
Ein Bild kann gleichzeitig ein Link sein – dazu wird das <img>-Tag
in ein <a>-Tag eingeschlossen:
<a href="https://de.wikipedia.org/wiki/Wasser" target="_blank">
<img src="bilder/wasser1.jpg" alt="Mehr über Wasser auf Wikipedia" width="200">
</a>
| Format | Geeignet für | Besonderheit |
|---|---|---|
| JPG / JPEG | Fotos | Kompression, kein transparenter Hintergrund |
| PNG | Grafiken, Screenshots | Transparenz möglich, größere Dateien |
| GIF | Animationen | Veraltet, nur 256 Farben |
| SVG | Icons, Logos, Illustrationen | Vektorgrafik, beliebig skalierbar |
| WebP | Fotos & Grafiken | Modern, gute Kompression, breite Browser-Unterstützung |
Ein Foto frisch von der Kamera oder vom Smartphone hat oft 4–10 MB und eine Auflösung von 4000 × 3000 Pixeln oder mehr. Auf einer Webseite wird es aber meist nur 400–800 Pixel breit dargestellt – die restlichen Pixel sind verschenkte Ladezeit.
Zwei Faustregeln:
Breite: Bilder vor dem Einbinden auf die tatsächlich angezeigte Größe skalieren, in der Regel reichen 800–1200 px für einen Hauptinhalt, 400–600 px für Vorschaubilder.
Dateigröße: Ein Foto auf einer Webseite sollte unter 200 KB liegen, besser unter 100 KB. Ein Bild mit 6 MB lädt auf einem Smartphone im Mobilfunknetz entsprechend langsam.
Zum Verkleinern und Komprimieren eignen sich:
macOS: Vorschau → Werkzeuge → Größe anpassen
Windows: Paint → Größe ändern, oder der Foto-Editor
Online (ohne Installation): z.B. squoosh.app (zeigt Vorher/Nachher und Dateigrößen direkt im Vergleich)
Das width-Attribut im <img>-Tag skaliert das Bild nur optisch im Browser herunter – die volle Dateigröße wird trotzdem übertragen. Die Verkleinerung muss also vor dem Einbinden passieren.