08 – Medien 🖼️

Bilder, Videos, GIFs, SVG – visuelle Inhalte richtig einbinden

👁️ 1. Warum Medien wichtig sind & warum sie oft scheitern

Bilder, Grafiken und Animationen machen Webseiten ansprechend, verständlich und emotional. Ohne sie wäre das Web ein reiner Text – trocken und schwer erfassbar.

Doch viele Anfänger machen denselben Fehler: Sie fügen ein Bild ein, und es wird nicht angezeigt. Warum? Meistens liegt es an einem der folgenden Gründe:

Der Dateipfad ist falsch (z. B. Groß-/Kleinschreibung, falscher Ordner)
Die Dateiendung fehlt oder ist falsch (z. B. .jpg statt .jpeg)
Das Bild wurde nicht in den Projektordner kopiert
Der Browser-Cache zeigt eine alte Version (Lösung: Strg+F5)

⚠️ Merke: Ein Bild ist kein Teil der HTML-Datei – es ist eine externe Ressource, die über einen Pfad geladen wird. Wenn der Pfad nicht stimmt, bleibt das Bild unsichtbar.

📚 Vertiefung auf W3Schools – Bilder

W3Schools erklärt alle Attribute des <img>-Tags und zeigt praktische Beispiele.

🔗 W3Schools: HTML Images

🖼️ 2. Das `<img>`-Tag – korrekt und barrierefrei verwenden

Das <img>-Element ist leer – es hat keinen End-Tag. Es benötigt zwei zwingende Attribute:

src – der Pfad zur Bilddatei
alt – eine alternativen Textbeschreibung

<img src="assets/images/logo.svg" alt="Logo der HTBLA Traun">

Der alt-Text ist keine Option – er ist Pflicht für:

Blindenscreenreader – sie lesen den Text vor
Langsame Internetverbindungen – das Bild lädt nicht, aber der Text erscheint
Suchmaschinen – sie verstehen den Inhalt des Bildes

💡 Was in alt gehört:
Eine kurze, präzise Beschreibung dessen, was das Bild zeigt – nicht „Bild von ...“.
Beispiel: alt="Schulgebäude der HTBLA Traun" – nicht alt="Bild vom Schulgebäude".

📊 3. Bildformate – wann welches Format nutzen?

Nicht jedes Bildformat eignet sich für jeden Zweck. Die Wahl beeinflusst: - Die Dateigröße (Ladezeit!) - Die Bildqualität - Die Unterstützung durch Browser

Format	Eigenschaften	Wann verwenden?
JPG / JPEG	Verlustbehaftet, kleine Datei, Millionen Farben	Fotos, komplexe Bilder mit vielen Farbverläufen
PNG	Verlustfrei, Transparenz möglich, größere Datei	Logos, Grafiken, Screenshots mit scharfen Kanten
GIF	Nur 256 Farben, Animation möglich	Einfache Animationen (z. B. aus GIMP erstellt)
SVG	Vektorgrafik, beliebig skalierbar, textbasiert	Icons, Logos, Illustrationen – perfekt für dein Tutorial-Logo!
WebP	Modern, klein, guter Support (aber nicht in allen alten Browsern)	Wenn du moderne Browser voraussetzen kannst

💡 Empfehlung für Anfänger:
- Fotos → JPG
- Grafiken mit Transparenz → PNG
- Logos/Icons → SVG

⚖️ 4. Bildoptimierung – warum sie entscheidend ist

Ein ungefiltertes Handybild kann bis zu 5 MB groß sein. Eine komplette Webseite sollte jedoch unter 1–2 MB laden – besonders auf mobilen Geräten mit begrenztem Datenvolumen.

Große Bilder führen zu:

Langen Ladezeiten → Nutzer verlassen die Seite
Höherem Datenverbrauch → teuer für Schüler mit Prepaid-Tarifen
Schlechterem Ranking in Suchmaschinen (Google bevorzugt schnelle Seiten)

So optimierst du Bilder einfach und kostenlos:

Größe anpassen: Nutze GIMP (kostenlos!) → „Bild → Bildgröße“
→ Für eine Webseite mit 900px Breite reichen Bilder mit max. 1000px Breite völlig aus.
Qualität reduzieren: Bei JPG: Qualität auf 70–80 % setzen.
→ Oft kaum sichtbarer Qualitätsverlust, aber bis zu 70 % kleinere Datei.
Online-Tools: Squoosh.app (von Google)
→ Einfach, webbasiert, keine Installation nötig, unterstützt WebP, AVIF, etc.

⚠️ Regel im Unterricht: Lade niemals Original-Handybilder hoch – optimiere sie vor dem Upload!

🎨 5. SVG – skalierbare Vektorgrafiken

SVG (Scalable Vector Graphics) ist ein textbasiertes Format, das Grafiken durch mathematische Anweisungen beschreibt – nicht durch Pixel. Das hat riesige Vorteile:

🔍 Beliebig skalierbar – ohne Qualitätsverlust (perfekt für Retina-Displays!)
📦 Sehr kleine Dateien – oft nur wenige Kilobyte
🎨 Per CSS anpassbar – Farbe, Größe, Animation
♿ Barrierearm – kann Text enthalten, der von Screenreadern gelesen wird

Dein Tutorial-Logo ist ein SVG – und deshalb sieht es auf jedem Gerät gestochen scharf aus!

<!-- SVG direkt im HTML einbetten (empfohlen für Icons) -->
<svg width="50" height="50" viewBox="0 0 50 50">
  <rect width="50" height="50" fill="#E67E22"/>
  <text x="25" y="35" text-anchor="middle" fill="white" font-size="24"></text>
</svg>

💡 Merke: SVG ist das ideale Format für Logos, Icons und einfache Illustrationen.

🎥 6. Videos – zwei Wege, sie einzubinden

Videos machen Webseiten lebendig – aber sie sind groß und komplex. Du hast zwei Möglichkeiten:

🔗 6.1 Eingebettete Videos (z. B. YouTube)

Du nutzt die Einbettungsfunktion einer Video-Plattform:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

✅ Vorteile:

Keine Bandbreite deines Servers verbraucht
Automatische Anpassung an Gerät (responsive)
Keine Kompatibilitätsprobleme (läuft überall)

❌ Nachteile:

Datenschutz: YouTube setzt Cookies – muss im Impressum erwähnt werden
Video kann gelöscht werden → Link ist tot
Keine Offline-Nutzung möglich

📂 6.2 Lokale Videos (direkt in deinem Projekt)

Du speicherst das Video in deinem Projektordner und nutzt das <video>-Element:

<video controls width="600">
  <source src="assets/videos/demo.mp4" type="video/mp4">
  <source src="assets/videos/demo.webm" type="video/webm">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

✅ Vorteile:

Vollständige Kontrolle über Inhalt
Keine externen Abhängigkeiten
Offline-Nutzung möglich

❌ Nachteile:

Sehr große Dateien → lange Ladezeiten
Muss für mehrere Formate angeboten werden (MP4, WebM)
Verbraucht Bandbreite deines Webspace

📌 Empfehlung: Für Schulprojekte ist YouTube-Einbettung meist die bessere Wahl – solange du die Datenschutz-Hinweise beachtest.

📚 Vertiefung auf W3Schools – Videos

W3Schools zeigt, wie du das <video>-Element nutzt und mehrere Formate anbietest.

🔗 W3Schools: HTML Video

🧠 7. KI als Lernpartner – guter Prompt

❌ Schlecht: „Gib mir ein Bild für meine Website.“ ✅ Gut: „Kannst du mir helfen, ein passendes Bildformat für ein Schul-Logo auszuwählen – und zeig mir, wie ich es barrierefrei mit alt-Text in HTML einbinde? Außerdem: Wie optimiere ich die Dateigröße ohne Qualitätsverlust? Und: Soll ich ein Video lokal hosten oder lieber von YouTube einbetten – mit Begründung?“