🎮 LEVEL 04 • WEB WIZARD

Formate & Web

Wie du Grafiken optimal für Webseiten vorbereitest

📚 PHASE 1: TUTORIAL

Warum das Format entscheidend ist

Die Wahl des richtigen Grafikformats beeinflusst:

Ladezeit der Webseite
Bildqualität auf verschiedenen Geräten
Zugänglichkeit für alle Nutzer:innen
Wartbarkeit deines Projekts

MERKE: "Ein falsches Format kann eine schnelle Seite in eine lahme verwandeln!"

📊 Vergleich: Welches Format wofür?

Format	Typ	Vorteile	Nachteile	Web-Einsatz
JPG	Pixel	Kleine Datei bei Fotos	Keine Transparenz, Qualitätsverlust bei Kompression	Fotogalerien, Hintergrundbilder
PNG	Pixel	Transparenz, scharfe Kanten	Größere Datei als JPG	Logos mit Transparenz, Icons, Screenshots
WebP	Pixel	30 % kleiner als JPG/PNG, unterstützt Transparenz	Ältere Browser (IE) unterstützen es nicht	Modernes Web – überall wo möglich einsetzen!
SVG	Vektor	Beliebig skalierbar, extrem klein, editierbar	Nicht für Fotos geeignet	Logos, Icons, Illustrationen, Diagramme

🤖

KI Coach Tip

Frag die KI nach einer detaillierten Erklärung:

„Vergleiche JPG, PNG, WebP und SVG für den Einsatz in einer responsiven Website – inklusive Empfehlungen für Fotos, Logos und Icons, und wann man auf WebP verzichten sollte."

⚔️ PHASE 2: PRACTICE

Praxis: Optimierung in GIMP & Inkscape

🖌️

GIMP (Pixel)

Exportiere Fotos als WebP oder JPG (Qualität: 70–80 %)
Logos mit Transparenz als PNG
Verwende „Datei → Exportieren als…“ – nicht „Speichern unter"

→ Siehe: GIMP – Export & Formate

📐

Inkscape (Vektor)

Speichere Logos immer als SVG
Exportiere nach PNG nur, wenn SVG nicht möglich ist
Entferne ungenutzte Objekte vor dem Export

→ Siehe: Inkscape – Export nach SVG & PNG

🌐 Einbindung in HTML

So fügst du Grafiken korrekt in deine Webseite ein:

<!-- Foto -->
<img src="foto.jpg" alt="Beschreibung des Fotos">

<!-- Transparentes Logo -->
<img src="logo.png" alt="Mein Logo">

<!-- Skalierbares Logo -->
<svg width="200" height="50">
  <use href="logo.svg#symbol"></use>
</svg>

🔗 W3Schools – Bilder in HTML

✅ CHECKPOINT: Hast du ein Bild in beiden Programmen exportiert und die Dateigrößen verglichen? Dann weiter zu Phase 3!

🏆 PHASE 3: CHALLENGE

Der "Format-Optimierer" Boss

🎯 Mission: Optimiere 3 Bilder für deine Webseite

⚔️ Aufgaben (wähle mindestens eine):

🟢 Einfach: Exportiere ein Foto als JPG (Qualität 75%) und vergleiche die Dateigröße mit dem Original

🟠 Mittel: Erstelle ein transparentes PNG in GIMP und bind es in eine HTML-Seite ein

🔴 Schwer: Erstelle eine HTML-Seite, die ein SVG-Logo enthält und auf verschiedenen Bildschirmgrößen scharf bleibt

🤖 KI Sparring-Partner

Schritt 1: Frage die KI nach der Strategie:

"Ich habe ein Foto, ein Logo und ein Icon. Welches Format wähle ich für welche Datei, um eine schnelle Webseite zu erstellen?"

Schritt 2: Wenn du hängen bleibst:

"Wie füge ich ein SVG in HTML ein, damit es responsiv skaliert?"

📝 3-2-1 Review

Bevor du weitergehst, reflektiere (klicke und schreibe direkt hier):

3 Dinge die ich gelernt habe:

2 Dinge die ich anwenden werde:

1 Frage die ich noch habe:

💡 Diese Frage kannst du an die KI oder den Lehrer stellen!

💾 Automatische Speicherung: Deine Einträge werden automatisch in deinem Browser gespeichert. Wenn du das Tutorial in VS Code öffnest, bleiben sie erhalten!

🎯 Level 04 Abschluss

📋 Lehrer-Kontrolle

Der Lehrer prüft:

☐ Format-Quiz bestanden (JPG vs PNG vs SVG)
☐ Alt-Text für Barrierefreiheit erklärt
☐ Bildoptimierung (Größe vs. Qualität) verstanden
☐ Responsive Bilder (srcset) demonstriert
☐ 3-2-1 Reflexion ausgefüllt

⚠️ Wichtig: Erst nach Lehrer-Freigabe auf "Abschließen" klicken!