Bilder richtig ausliefern: weniger Gewicht, mehr Ruhe beim Laden

Viele Performance-Probleme kommen nicht aus „kompliziertem Code“, sondern aus Bildmaterial, das einfach zu groß ausgeliefert wird. Das ist fies, weil es oft nicht auffällt. Auf dem eigenen Rechner sieht alles okay aus, das WLAN ist schnell, und im Browser-Cache ist das meiste eh schon da. Im echten Leben landet die Seite aber auf dem Handy, im Zug, mit miesem Netz und einem Browser, der erstmal alles neu holen muss.

Das Ziel ist nicht, Bilder kaputt zu optimieren, bis alles nach Plastik aussieht. Ziel ist, dass Bilder in der richtigen Größe, im passenden Format und ohne unnötige Blocker kommen. Dann wirkt eine Seite sofort stabiler, und man muss weniger „tricksen“, um gute Werte zu bekommen.

Zur Performance-Übersicht

Was bei Bildern meistens schief läuft

Der Klassiker: Du hast ein Bild mit 3000 Pixel Breite, zeigst es aber in einem Container, der auf Mobile effektiv 360 Pixel breit ist. Das Bild wird zwar im Browser kleiner gerendert, aber du lädst trotzdem die volle Datei. Das ist nicht „ein bisschen ineffizient“, das ist oft der Unterschied zwischen „fühlt sich sofort da an“ und „lädt ewig, wirkt wackelig“.

Zweiter Klassiker: ein Format, das nicht zum Inhalt passt. Logos als riesige PNGs, Fotos als schwere PNGs, Screenshots als JPEG mit Matsch. Dazu kommt oft noch eine Bildkette, die nie hinterfragt wurde: erst in einem Tool exportiert, dann nochmal in WordPress hochgeladen, dann vom Theme nochmal skaliert, am Ende hat man drei Varianten, aber keine ist wirklich sinnvoll.

  • Zu große Originale werden ungefiltert ausgeliefert
  • Kein srcset, also keine echte Responsive-Auslieferung
  • Fehlende width/height, dadurch springt das Layout
  • Lazy Loading überall, auch da wo es schadet
  • Schlechte Cache-Header, dadurch ständiges Nachladen

Pragmatische Regeln, die du fast immer nutzen kannst

1) Bildgröße nach Darstellung, nicht nach Gefühl

Nimm als Ausgangspunkt: Wie groß ist das Bild wirklich im Layout, in Pixeln, auf typischen Geräten. Für ein Hero-Bild musst du nicht 4000 Pixel liefern, aber du musst überlegen, ob es auch auf großen Screens sauber wirkt. Eine solide Faustregel ist: orientiere dich an der maximalen Darstellungsbreite im Layout und gib etwas Puffer. Alles darüber ist meistens nur Ballast.

2) width und height immer setzen

Das ist nicht nur „nice to have“. Wenn du width/height setzt, kann der Browser Platz reservieren und das Layout bleibt ruhig. Das spart Stress bei Layout Shifts und wirkt einfach professioneller, weil nichts rutscht, während Bilder nachladen.

3) srcset nutzen, ohne es zu übertreiben

Responsive Images sind kein Hexenwerk. Du brauchst nicht 20 Varianten pro Bild. Aber zwei bis vier sinnvolle Größen bringen oft schon viel. Der Browser nimmt dann die passende Datei statt immer die größte. Wichtig ist, dass die Größen zu deinem Layout passen, sonst sammelst du nur Varianten, die nie genutzt werden.

4) Lazy Loading gezielt einsetzen

Lazy Loading ist super für Bilder, die weiter unten kommen. Für das wichtigste Bild „oben“ ist es oft kontraproduktiv, weil du es künstlich verzögerst. Wenn ein Bild den ersten Eindruck macht, soll es normal laden. Alles, was weiter unten liegt, kann lazy sein.

Formatwahl: was passt wann

Du musst nicht dogmatisch sein, aber ein paar Entscheidungen helfen:

  • Fotos: moderne Formate (wenn möglich) oder saubere JPEGs, nicht als riesige PNG
  • Grafiken mit wenigen Farben: oft WebP/AVIF oder PNG, je nach Schärfe und Kanten
  • Logos/Icons: wenn es wirklich Vektor ist, SVG, sonst klein gehaltene Raster
  • Screenshots: lieber scharf und kontrolliert exportieren, statt im Upload kaputt zu komprimieren

Der wichtigste Punkt ist nicht, „das beste Format“ zu finden, sondern konsequent zu sein. Wenn du pro Seite fünf verschiedene Bildwege hast, wird es unübersichtlich. Ein kleiner Standard spart später Zeit, weil man nicht bei jedem Bild neu diskutieren muss.

Caching: der unterschätzte Teil

Bilder sind oft der größte Anteil am Gewicht. Umso wichtiger ist, dass sie nicht ständig neu geladen werden. Saubere Cache-Header für statische Assets sorgen dafür, dass wiederkehrende Besucher nicht immer wieder die gleichen Dateien ziehen. Das ist kein „SEO-Trick“, das ist einfach respektvoll gegenüber Zeit und Datenvolumen.

Wenn du Bilder richtig auslieferst, fühlt sich die Seite nicht nur schneller an. Sie wirkt auch aufgeräumter: weniger Ruckeln, weniger „Baustelle“, mehr Ruhe. Und genau das ist am Ende der Unterschied, den Nutzer merken.