Zielsetzung des Kurses
Der Kurs Bildoptimierung für Web adressiert die technische und gestalterische Aufbereitung von Bildmaterial für digitale Anwendungen. Behandelt werden Kompression, Dateiformate und responsive Ausspielung innerhalb des Themenfelds Webdesign und Webentwicklung. Ziel ist die Vermittlung von Verfahren zur Reduktion von Ladezeiten unter Wahrung der Darstellungsqualität, einschließlich Automatisierung und Workflows. Ergänzt wird dies um Aspekte zu Barrierefreiheit, Urheberrecht und Bereitstellung in Content-Management-Systemen.
Inhalte
Grundlagen der Bildverarbeitung für Web: Eigenschaften gängiger Raster- und Vektorformate (JPEG, PNG, WebP, AVIF, SVG), Farbräume, Auflösung, Pixeldichte und responsive Bildkonzepte mit srcset und sizes
Kompression und Qualitätssteuerung: verlustbehaftete und verlustfreie Verfahren, Artefaktanalyse, Batch-Verarbeitung, Metadaten-Handling (EXIF, IPTC) sowie Automatisierung mit CLI-Tools und Build-Prozessen
Workflow-Integration: Einbindung in CMS und Static-Site-Generatoren, CDNs, Caching, Naming-Konventionen, Versionierung und Bereitstellung für unterschiedliche Viewports
Gestaltung und Barrierefreiheit: Zuschnitt, Seitenverhältnis, Konsistenz von Bildstilen, Alt-Texte, Kontrastanforderungen und rechtliche Grundlagen zu Lizenzen und Urheberangaben
Performance-Messung und Qualitätssicherung: Kennzahlen wie LCP und TTFB in Bezug auf Medien, Lab- und Field-Testing mit gängigen Tools, Monitoring und schrittweise Optimierung in laufenden Projekten
Lernziele
- Analysieren von Bildquellen hinsichtlich Auflösung, Farbraum, Metadaten und Kompressionsartefakten
- Unterscheiden und Auswählen passender Dateiformate (JPEG, PNG, WebP, AVIF, SVG) für definierte Einsatzzwecke
- Anwenden von Kompressions- und Skalierungsverfahren einschließlich Batch-Verarbeitung und Metadaten-Reduktion
- Erstellen responsiver Bildauslieferung mit srcset, sizes und geeigneter Server- oder CDN-Konfiguration
- Implementieren von Bildpipelines in Entwicklungs- und CMS-Workflows unter Nutzung von Automatisierungswerkzeugen
- Bewerten der Auswirkungen von Bildressourcen auf Ladezeiten und Nutzererlebnis anhand festgelegter Kennzahlen
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie Webentwicklung und Frontend-Engineering, in denen Bildformate, Performance und Auslieferung konfiguriert werden.
Typische Tätigkeitsfelder umfassen UI-/UX-Design mit Fokus auf Bildaufbereitung und konsistente Darstellung über Endgeräte.
Der Kurs adressiert Inhalte für Tätigkeiten wie Content-Management und Digital-Redaktion, bei denen Bildressourcen in CMS gepflegt und veröffentlicht werden.
Zusammenfassung
Der Kurs Bildoptimierung für Web behandelt Verfahren zur Aufbereitung, Kompression und Auslieferung von Bildern für digitale Oberflächen. Im Rahmen dieser Weiterbildung werden technische Formate, Workflows und Qualitätsprüfung mit Bezügen zu Webentwicklung, UI-/UX-Design und Content-Management thematisiert. Die Inhalte stehen im Zusammenhang mit Aufgaben in Frontend-Teams, Designabteilungen und Redaktionen.