Termine:

• 20. Mai 2025, 13:00 Uhr, Raum 3.217

Ziel des Workshops

In diesem Workshop lernen die Teilnehmenden verschiedene Techniken zur Optimierung der Bilddarstellung im Web kennen. Dabei werden sie Schritt für Schritt an Werkzeuge und Methoden herangeführt, mit denen sich Bildgrößen reduzieren und Ladezeiten verbessern lassen – ohne sichtbaren Qualitätsverlust. Am Ende des Workshops sind die Teilnehmenden in der Lage, geeignete Bildformate auszuwählen, diese effizient einzubinden und die Darstellung im HTML gezielt zu steuern.

Es werden folgende Themen behandelt:

• Wie erkennt man unoptimierte Bilder? (Lighthouse, DevTools)
• Ansätze zur Bildoptimierung (Komprimierung, Formatwahl, HTML-Attribute)
• Geeignete Formate für verschiedene Einsatzzwecke
• Vor- und Nachteile gängiger Bildformate
• Steuerung des Bildladens im HTML (srcset, sizes, Lazy Loading)

Zielgruppe

Dieser Workshop richtet sich an alle Personen, die Websites erstellen oder betreuen und dabei Wert auf schnelle Ladezeiten, gute Nutzererfahrung und moderne Webstandards legen.

Vorkenntnisse

• HTML
• grundlegende Browser-Entwicklungstools (DevTools)
• Vue + Tailwind (optional, wird nur sehr rudimentär benötigt)

Technische Voraussetzung

• IDE
• Node.js
• Chromium basierter Browser
• Docker
• Git

Material

Workshop-Repository