Wie Bildgröße die Geschwindigkeit Ihrer Website beeinflusst

Wenn sich Ihre Website langsam anfühlt, sind Bilder der erste Ort, an dem Sie nachsehen sollten. Auf den meisten Websites machen sie mehr Gesamtgewicht der Seite aus als alle anderen Ressourcen zusammen — HTML, CSS und JavaScript eingeschlossen. Das macht sie auch zum Punkt mit dem größten Hebel, da eine Handvoll gut komprimierter Bilder Sekunden von einer Ladezeit abschneiden kann, an die ein Dutzend kleiner Code-Anpassungen nicht herankäme.

Wo Bilder wirklich schaden: Core Web Vitals

Googles Core Web Vitals sind die Geschwindigkeitskennzahlen, die ins Suchranking einfließen, und Bilder beeinflussen zwei der drei direkt:

• Largest Contentful Paint (LCP): wie lange es dauert, bis das größte sichtbare Element gerendert wird. Auf den meisten Seiten ist dieses Element ein Bild — ein Hero-Banner, ein Produktfoto, das Titelbild eines Blogbeitrags. Ein schweres, unoptimiertes Bild ist eine der häufigsten Einzelursachen für einen schlechten LCP-Wert.
• Cumulative Layout Shift (CLS): wie stark sich Inhalte beim Laden der Seite verschieben. Das hängt nicht direkt von der Dateigröße ab, sondern davon, dass Bilder laden, ohne dass ihre Abmessungen vorab reserviert wurden, wodurch sich der Rest der Seite verschiebt, sobald sie erscheinen.

Wenn Sie schon einmal eine Seite durch PageSpeed Insights oder Lighthouse laufen lassen haben und „Largest Contentful Paint“ rot markiert gesehen haben, ist die Wahrscheinlichkeit groß, dass ein Bild der Grund war.

Was wirklich etwas bringt

In ungefährer Reihenfolge der Wirkung:

1. Vor dem Hochladen komprimieren, nicht danach. Ein Foto direkt vom Handy oder von der Kamera ist oft 3–10 MB groß. Dasselbe Bild, richtig komprimiert, kann bei ein paar hundert KB liegen, ohne sichtbaren Unterschied bei normaler Anzeigegröße. Dieser eine Schritt macht meist den größten Unterschied.
2. Bilder in der Größe ausliefern, in der sie tatsächlich angezeigt werden. Ein 4000px breites Foto in einer 600px breiten Blog-Spalte verschwendet nur Bandbreite: der Browser lädt trotzdem alle 4000px an Daten herunter, nur um sie visuell zu verkleinern. Auf eine Größe nahe der tatsächlichen Anzeigegröße zuschneiden, bevor Sie hochladen.
3. Ein modernes Format verwenden. WebP lässt sich heute überall bedenkenlos einsetzen und fällt meist 25–35 % kleiner aus als ein vergleichbares JPG bei gleicher visueller Qualität; AVIF kann, wo unterstützt, noch kleiner ausfallen. (Wir behandeln die Kompromisse in WebP vs JPG vs PNG vs AVIF.)
4. Platz für Bilder reservieren, bevor sie laden. Eine explizite Breite und Höhe (oder ein Seitenverhältnis) auf Ihren Bild-Tags lässt den Browser sofort den richtigen Platz zuweisen, statt das Layout zu verschieben, sobald das Bild eintrifft — das behebt CLS tatsächlich.
5. Alles unterhalb des sichtbaren Bereichs per Lazy-Loading laden. Bilder, zu denen der Besucher noch nicht gescrollt hat, müssen nicht sofort laden, und die meisten modernen Browser unterstützen das mit einem einzigen HTML-Attribut (loading="lazy"), ohne zusätzliche Werkzeuge.

Die Schritte 1–3 betreffen das Dateigewicht. Die Schritte 4–5 betreffen, wie der Browser dieses Gewicht während des Ladens handhabt. Beides zählt, aber wenn Sie heute nur eine Sache tun können, dann Ihre Bilder richtig zu komprimieren — das beste Verhältnis von Aufwand zu Wirkung der fünf.

Wie Sie herausfinden, wo Sie tatsächlich stehen

Bevor Sie raten, messen Sie. PageSpeed Insights (Googles eigenes, auf Lighthouse aufbauendes Tool) zeigt Ihre tatsächlichen LCP- und CLS-Werte für jede öffentliche URL und markiert gezielt, welche Bilder die größten Übeltäter sind. Es ist kostenlos, dauert etwa 30 Sekunden und sagt Ihnen genau, worauf Sie sich konzentrieren sollten, statt blind zu optimieren.

Den Komprimierungsteil richtig machen

Der häufigste Fehler ist nicht, die Komprimierung auszulassen — es ist, ein Tool zu verwenden, das Ihre Bilder auf einen fremden Server hochlädt, um sie dort zu verarbeiten. Das ist langsam und bedeutet, dass eine Kopie Ihres (möglicherweise noch unveröffentlichten) Inhalts während der Verarbeitung irgendwo außerhalb Ihrer Kontrolle liegt.

Die Schritte 1 und 3 von oben, das Komprimieren und Konvertieren zwischen JPG, PNG, WebP und AVIF, laufen direkt in Ihrem Browser mit img-compress. Es liest außerdem HEIC-Fotos (der iPhone-Standard) unter Safari, und nichts wird irgendwohin hochgeladen: genauso schnell für ein einzelnes Hero-Bild wie für einen ganzen Stapel Produktfotos vor einem Website-Launch. (Die Größenanpassung auf die richtigen Anzeigemaße, Schritt 2, lohnt sich weiterhin in Ihrem Bildeditor oder CMS, bevor Sie hierher kommen.)