Der Kunde ruft an, weil ein Bekannter ihm gesteckt hat, seine Website sei „viel zu langsam". Du jagst die Startseite durch Googles PageSpeed Insights und siehst rot: Der Largest Contentful Paint dümpelt bei über vier Sekunden. Ein Blick in die Details verrät sofort den Übeltäter – ein Hero-Bild, 3,8 Megabyte schwer, als PNG exportiert und in voller Kameraauflösung eingebunden, obwohl es am Ende auf 1.200 Pixel Breite angezeigt wird. Kein exotisches Problem, sondern der Normalfall. Und einer, den du in wenigen Stunden lösen kannst, ohne das Design anzufassen.
Bilder sind auf den allermeisten Seiten der größte Posten beim Datenverkehr – und damit der stärkste Hebel für Ladezeit, Rankings und zufriedene Kunden. Trotzdem werden sie in der Hektik des Projektalltags oft einfach hochgeladen, wie sie aus Handy oder Bilddatenbank kommen. Dieser Beitrag zeigt dir, worauf es beim Optimieren wirklich ankommt: das richtige Format, die richtige Größe, das richtige Ladeverhalten – und wie du das Ganze so automatisierst, dass es nicht bei jedem Upload wieder von Hand gemacht werden muss.
Bilder für die Website optimieren: der größte Hebel für Tempo
Wie groß der Hebel ist, zeigt der Web Almanac 2025 von HTTP Archive, die wohl umfangreichste jährliche Auswertung des echten Webs. Die durchschnittliche Startseite wiegt am Desktop rund 2.862 Kilobyte. Der größte einzelne Brocken darin sind die Bilder: Mit etwa 1.058 Kilobyte machen sie rund 37 Prozent des gesamten Seitengewichts der Median-Startseite aus – mehr als jede andere Ressourcenart. Auf dem Smartphone, wo die Verbindung oft schlechter ist, sieht das Bild ähnlich aus.
Für dich heißt das: Wenn du an einer langsamen Kundenseite nur eine Sache anfassen kannst, dann die Bilder. Nirgends sparst du mit so wenig Aufwand so viele Kilobyte. Und weil das Hero-Bild häufig zugleich das größte sichtbare Element beim Seitenaufbau ist, wirkt sich seine Optimierung direkt auf den Largest Contentful Paint aus – einen der Core Web Vitals, deren Bedeutung wir im Beitrag zu Core Web Vitals verbessern erläutert haben.
Das richtige Format: JPEG war gestern
Der erste und wirkungsvollste Schritt ist ein Formatwechsel. Jahrelang war JPEG der Standard für Fotos, PNG für Grafiken mit Transparenz. Beide sind heute überholt. Zwei modernere Formate liefern bei gleicher Bildqualität deutlich kleinere Dateien.
WebP, von Google entwickelt, komprimiert Fotos je nach Motiv rund ein Viertel bis ein Drittel effizienter als JPEG und beherrscht zugleich Transparenz wie PNG. Es ist damit ein universeller Ersatz für beide alten Formate. Noch einen Schritt weiter geht AVIF, das jüngste der breit unterstützten Formate. Laut Googles Entwicklerdokumentation auf web.dev erreicht AVIF gegenüber JPEG Einsparungen von rund 60 Prozent und liegt selbst gegenüber WebP noch etwa 35 Prozent darunter – bei vergleichbarer visueller Qualität. Aus unserem 3,8-Megabyte-PNG von oben werden so schnell ein paar Hundert Kilobyte.
Die berechtigte Sorge, ob diese Formate überall funktionieren, ist 2026 weitgehend ausgeräumt: Laut web.dev unterstützen praktisch alle aktuellen Browser AVIF. Der saubere Weg, den letzten Rest an alten Browsern abzusichern, ist das <picture>-Element, das dem Browser mehrere Formate anbietet und ihn das beste unterstützte wählen lässt – mit einem klassischen JPEG als Rückfallebene.
Ob du auf WebP oder AVIF setzt, ist keine Glaubensfrage. AVIF holt bei großen Fotos und Hero-Bildern das Maximum an Ersparnis heraus und lohnt sich dort am meisten; das Kodieren dauert allerdings etwas länger, was bei sehr vielen Bildern ins Gewicht fallen kann. WebP ist der pragmatische Allrounder, der praktisch überall läuft und bei kleineren Grafiken, Icons und Logos schon fast das ganze Potenzial ausschöpft. In der Praxis liefern viele Agenturen beides aus und überlassen dem <picture>-Element die Wahl – der Browser nimmt automatisch das kleinste Format, das er darstellen kann.
Die richtige Größe: nicht größer ausliefern als nötig
Das beste Format nützt wenig, wenn die Dimensionen nicht stimmen. Der häufigste Fehler ist, ein Bild in Originalauflösung einzubinden – 4.000 Pixel breit direkt aus der Kamera –, obwohl es im Layout nie größer als 800 oder 1.200 Pixel dargestellt wird. Der Browser lädt dann Millionen Pixel herunter, um sie anschließend wegzurechnen. Reine Verschwendung.
Zwei Techniken lösen das. Erstens skalierst du jedes Bild auf die maximale Größe herunter, in der es tatsächlich angezeigt wird. Zweitens lieferst du unterschiedlichen Geräten unterschiedliche Größen aus – das übernimmt das srcset-Attribut zusammen mit sizes. So bekommt das Smartphone eine kleine, das große Display eine größere Variante, und niemand lädt mehr, als er braucht. Bei der Kompression selbst gilt: Eine Qualitätsstufe von etwa 75 bis 85 Prozent ist für Fotos im Web meist nicht vom Original zu unterscheiden, spart aber erheblich. Weniger Bytes bedeuten dabei nicht nur Tempo, sondern auch weniger Energie pro Aufruf – ein Aspekt, den wir im Beitrag zur nachhaltigen Website vertieft haben.
Das richtige Ladeverhalten: Lazy Loading mit Augenmaß
Neben Format und Größe entscheidet der Zeitpunkt des Ladens über die gefühlte Geschwindigkeit. Bilder, die erst weiter unten auf der Seite auftauchen, müssen nicht sofort geladen werden. Das Attribut loading="lazy" weist den Browser an, sie erst zu holen, wenn der Nutzer in ihre Nähe scrollt. Das entlastet den ersten Seitenaufbau spürbar.
Eine wichtige Ausnahme: Das große Bild „above the fold", also der sichtbare Bereich ganz oben, ist meist das LCP-Element und sollte gerade nicht verzögert geladen werden. Hier hilft im Gegenteil fetchpriority="high", damit der Browser es bevorzugt behandelt. Und ganz gleich, welches Bild – gib immer Breite und Höhe an. Fehlen diese Angaben, springt das Layout beim Nachladen, und du handelst dir einen schlechten Cumulative Layout Shift ein, den zweiten kritischen Core-Web-Vitals-Wert.
In der Praxis: einmal automatisieren, immer profitieren
Das alles von Hand für jedes Bild zu erledigen, wäre in einer Agentur mit vielen Projekten nicht zu schaffen. Der Trick ist, es einmal einzurichten und dann laufen zu lassen. Bei WordPress erledigen etablierte Optimierungs-Plugins die Umwandlung in WebP oder AVIF, die Komprimierung und das Erzeugen der passenden Bildgrößen automatisch beim Upload – der Redakteur des Kunden lädt weiter sein schweres Foto hoch, ausgeliefert wird die schlanke Variante.
Wer statische Seiten oder moderne Frameworks baut, erledigt dasselbe im Build-Prozess. Und ein vorgeschaltetes CDN kann Bilder zusätzlich formatabhängig ausliefern und näher am Nutzer zwischenspeichern. Wichtig ist vor allem, das Thema aus dem Zufall zu nehmen: Ein fester Schritt „Bilder optimieren" gehört in deine Projekt-Checkliste und idealerweise in den Wartungsvertrag, damit auch nachträglich hochgeladene Bilder nicht zur Bremse werden.
Zwei Dinge solltest du dabei nicht vergessen. Bewahre die unkomprimierten Originale getrennt auf, denn aus einer stark komprimierten Datei lässt sich Qualität nicht zurückholen – du willst später neu skalieren können. Und prüfe nach der Optimierung stichprobenartig mit eigenen Augen: Automatische Kompression trifft in seltenen Fällen daneben, etwa bei Farbverläufen oder feinen Texturen. Ein kurzer Sichttest verhindert, dass du Tempo gegen sichtbare Artefakte eintauschst.
Was es dem Kunden bringt – und wie du es verkaufst
Der Aufwand lohnt sich mehrfach, und das kannst du dem Kunden konkret vorrechnen. Schnellere Seiten ranken bei Google tendenziell besser, weil Ladezeit über die Core Web Vitals in die Bewertung einfließt. Vor allem aber springen weniger Besucher ab: Jede Sekunde, die eine Seite schneller lädt, senkt die Absprungrate messbar und erhöht die Chance, dass aus einem Besucher eine Anfrage wird. Für Shop-Kunden übersetzt sich das direkt in Umsatz.
Am überzeugendsten ist der Vorher-Nachher-Vergleich. Mach einen Screenshot des roten PageSpeed-Ergebnisses, optimiere die Bilder, und zeig das grüne Ergebnis daneben – dazu die eingesparten Megabyte. Aus einer abstrakten „langsamen Seite" wird so ein sichtbarer Erfolg, den du geliefert hast. Und weil neue Bilder immer wieder dazukommen, ist die Bildoptimierung kein einmaliges Projekt, sondern ein guter Grund für eine dauerhafte Betreuung.
- Bilder sind der größte Posten beim Seitengewicht: Laut Web Almanac 2025 machen sie mit rund 1.058 KB etwa 37 Prozent der durchschnittlichen Desktop-Startseite aus – der stärkste Hebel für die Ladezeit.
- Ein Formatwechsel bringt am meisten: WebP komprimiert rund ein Viertel bis ein Drittel besser als JPEG, AVIF laut web.dev sogar etwa 60 Prozent – bei vergleichbarer Qualität und breiter Browser-Unterstützung.
- Bilder nie größer ausliefern als nötig: herunterskalieren auf die tatsächliche Anzeigegröße, per srcset gerätegerechte Varianten liefern und mit Qualität um 75 bis 85 Prozent komprimieren.
- Ladeverhalten steuern: loading="lazy" für Bilder weiter unten, aber fetchpriority="high" statt Lazy Loading für das LCP-Hero – und immer Breite und Höhe angeben, um Layout-Sprünge zu vermeiden.
- In der Agentur lohnt Automatisierung: Optimierungs-Plugins oder ein Build-Schritt erledigen Umwandlung und Komprimierung beim Upload, sodass auch nachträglich hochgeladene Bilder schlank bleiben.