Bilder-Optimierung: Weniger Datenvolumen, schnellere Ladezeiten

Ein typischer Produktions-Workflow liefert Bilder in JPEG oder PNG aus, die direkt aus der Kamera oder einem Grafikprogramm stammen. Ein solches JPEG kann leicht 2 bis 5 Megabyte wiegen, obwohl auf dem Smartphone nur 400 Pixel Breite angezeigt werden. Der Browser lädt das vollständige Bild, skaliert es per CSS herunter – und verschwendet dabei Bandbreite, Akkulaufzeit und wertvolle Millisekunden Ladezeit. Auf mobilen Verbindungen mit begrenzter Bandbreite summiert sich das über eine Seite mit 10 bis 20 Bildern schnell auf mehrere Megabyte unnötiger Übertragung.

Der direkte Zusammenhang zur Performance: Der Largest Contentful Paint (LCP) wird in den meisten Fällen von einem Hero-Bild oder Produktfoto bestimmt. Wenn dieses Bild unkomprimiert, im falschen Format und in einer für Desktop ausgelegten Auflösung ausgeliefert wird, entsteht ein Rendering-Engpass, der selbst bei schnellem Server und optimiertem JavaScript die Ladezeit in den roten Bereich treibt. Unsere Performance-Analysen zeigen regelmäßig, dass allein die Bild-Optimierung den LCP um 1 bis 3 Sekunden verbessern kann (Projekterfahrung). Das entspricht oft dem Unterschied zwischen „schlecht“ und „gut“ in der Google-Bewertung.

JPEG und PNG waren Jahrzehnte lang Standard, wurden aber für die Anforderungen der modernen Web-Performance nie ausgelegt. WebP und AVIF sind zwei neuere Bildformate, die speziell für effiziente Webauslieferung entwickelt wurden und bei gleicher oder höherer wahrgenommener Qualität deutlich kleinere Dateien erzeugen.

Ein Bild, das auf einem 27-Zoll-Monitor mit 2560 Pixel Breite optimal aussieht, ist auf einem Smartphone mit 390 Pixel Viewport-Breite überflüssig groß. Ohne responsive Bilder laden Mobilgeräte trotzdem die volle Desktop-Auflösung – ein Designfehler mit erheblichen Performance-Konsequenzen. Die HTML-Attribute srcset und sizes lösen dieses Problem: Sie geben dem Browser eine Auswahl von Bildvarianten in verschiedenen Auflösungen und beschreiben, wie groß das Bild im Layout erscheint. Der Browser wählt dann autonom die passende Variante für das jeweilige Gerät und die aktuelle Displayauflösung.

Beim initialen Seitenaufruf sind nur die Bilder im sichtbaren Bereich (Above the Fold) tatsächlich relevant. Alle weiteren Bilder werden erst benötigt, wenn der Nutzer nach unten scrollt. Ohne Lazy Loading werden trotzdem sämtliche Bilder der Seite sofort geladen – auch jene, die sich am Ende einer langen Produktliste befinden und vielleicht nie angesehen werden. Das kostet Bandbreite, belastet den Main Thread und verzögert den Aufbau des sichtbaren Inhalts.

Wichtig: Das LCP-Bild – typischerweise das Hero-Bild oder das erste sichtbare Produktfoto – darf nicht auf Lazy Loading gesetzt werden. Es erhält stattdessen fetchpriority="high" und ggf. einen <link rel="preload">-Hint im HTML-Head, damit der Browser den Download so früh wie möglich beginnt. Nur die korrekte Priorisierung des LCP-Bilds kombiniert mit Lazy Loading für alle weiteren Bilder maximiert die LCP-Verbesserung bei gleichzeitig minimalem Gesamt-Datenvolumen.

Komprimierung reduziert die Dateigröße eines Bildes, ohne oder mit nur minimalem sichtbaren Qualitätsverlust. Es gibt zwei Grundkategorien: Verlustfreie Komprimierung (lossless) reduziert redundante Daten ohne Informationsverlust – sie eignet sich für Grafiken, Logos und Screenshots mit klaren Kanten. Verlustbehaftete Komprimierung (lossy) hingegen reduziert auch die tatsächliche Bildinformation, was bei Fotos und natürlichen Motiven zu kleineren Dateien führt, ohne dass ein Mensch den Qualitätsunterschied wahrnimmt.

Eine manuelle Optimierung jedes Bilds ist bei Websites mit Dutzenden oder Hunderten von Bildern – erst recht bei CMS-basierten Projekten mit regelmäßig wechselndem Content – weder praktikabel noch skalierbar. Wir implementieren vollautomatische Pipelines, die bei jedem Bild-Upload oder Build-Vorgang alle benötigten Varianten in optimierten Formaten erzeugen.

Bild-Optimierung ist kein einmaliger Eingriff, sondern muss in den redaktionellen Workflow integriert werden. Wenn ein Redakteur morgen ein neues Bild hochlädt, muss die Pipeline automatisch alle Varianten erzeugen – ohne manuelle Nacharbeit. Wir haben umfangreiche Erfahrung in der Integration vollständiger Bild-Pipelines in die drei meistgenutzten CMS-Systeme.

Die folgenden Werte spiegeln typische Verbesserungen wider, die wir in unseren Projekten durch vollständige Bild-Optimierung erzielen. Die konkreten Ergebnisse hängen vom Ausgangszustand und der Art der Website ab – Shops mit vielen Produktbildern profitieren oft stärker als einfache Corporate-Websites. Auf unserer Referenzseite beschreiben wir typische Projektszenarien im Detail (Projekterfahrung).

Bilder-Optimierung ist ein zentraler, aber nicht der einzige Faktor für schnelle Ladezeiten. Eine schlecht konfigurierte Server-Infrastruktur mit hohen TTFB-Werten oder render-blockierendes JavaScript können selbst perfekt optimierte Bilder in ihrer Wirkung begrenzen. Außerdem verbessert Bilder-Optimierung primär die Übertragungszeit; Aspekte wie Interaktivität (INP) oder JavaScript-Ausführungszeit werden davon nicht direkt beeinflusst. Für ein vollständiges Performance-Bild empfehlen wir eine kombinierende Betrachtung aller Optimierungsebenen: Server, Frontend, Bilder und Caching-Strategien greifen ineinander. Wenn Sie eine umfassende Analyse wünschen, sprechen Sie uns über unsere technische Performance-Analyse an.