Cluster C5: Bildverarbeitung
Bildoptimierung für das Web: kompletter Workflow
Bildoptimierung ist keine Einzelaktion, sondern ein wiederholbarer Ablauf aus Display-Größe, Formatpolitik und Release-Prüfung.
Mit den Darstellungsgrenzen beginnen
Nicht die Kompression ist der erste Schritt, sondern die Frage, wie groß das Bild im echten Layout angezeigt wird. Erst daraus ergeben sich sinnvolle Exportgrößen.
Hero-Bilder, Karten, Thumbnails und Icons brauchen unterschiedliche Regeln statt eines universellen Exportschemas.
Formatregeln und Release-Gates kombinieren
- Fotos in moderne verlustbehaftete Formate, UI-Grafiken und Vektoren möglichst verlustfrei oder direkt als SVG.
- Dateigrößenbudgets, responsive Varianten und Sichtprüfung in den Release-Prozess aufnehmen.
- Mindestens ein Fehlbeispiel in QA behalten, damit Grenzverletzungen sichtbar blockiert werden.
Praktisches Ein-/Ausgabe-Beispiel
Eingabe
Hero-Bild: 3840x2160, 5.4MB PNG Kartenbild: 1920x1080, 1.3MB JPG
Ausgabe
Hero: 1920x1080-Variantenset Karte: auf 800x450 komprimiert, Ziel <180KB