Deutsch ▾
Free, Fast & Secure Online Tools
„Meine Website ist langsam, aber ich weiß nicht, warum.“ Das gehört zu den häufigsten Klagen von Website-Betreibern. In den meisten Fällen sind die Bilder der Hauptgrund. Unoptimierte Bilder machen aus einer schnellen Website eine zähe — und ihre Optimierung verkürzt die Ladezeit oft um 50 % oder mehr. Dieser Leitfaden erklärt genau, wie Bilder die Geschwindigkeit beeinflussen, beziffert die Effekte und liefert umsetzbare Strategien.
Nach der laufenden Auswertung von Millionen Websites durch das HTTP Archive (Daten von 2024):
Allein die Bildoptimierung kann das Seitengewicht also um 30–60 % verringern — eine erhebliche Verbesserung mit unmittelbarer Wirkung auf die Ladezeit.
Seit 2021 zählt Google die Core Web Vitals zu den Ranking-Signalen. Bilder wirken unmittelbar auf zwei der drei Kernwerte:
LCP misst die Zeit, bis das größte sichtbare Inhaltselement fertig dargestellt ist. Googles Bewertungsschwellen:
Untersuchungen zeigen, dass das LCP-Element auf den meisten Webseiten ein Bild ist (Hero-Bild, Hauptproduktfoto, Beitragsbild) — Studien nennen Wahrscheinlichkeiten über 70 %. Anders gesagt: Wie schnell das größte Bild Ihrer Seite lädt, bestimmt unmittelbar Ihren LCP-Wert.
Bildstrategien zur Verbesserung des LCP:
<link rel="preload"> für das Hero-Bild, damit Browser es früh im Ladevorgang holenbackground-image — der Preload-Scanner des Browsers erkennt CSS-Hintergrundbilder nichtCLS misst, wie stark eine Seite während des Ladens visuell springt. Ein verbreitetes Muster: Der Text steht bereits, dann lädt ein Bild und schiebt alles nach unten. Das schadet der Nutzererfahrung und dem CLS-Wert gleichermaßen.
So vermeiden Sie bildbedingtes CLS:
<img>-Tags immer ausdrückliche width– und height-Attribute an — so kann der Browser den Platz reservieren, bevor das Bild geladen istaspect-ratio: img { aspect-ratio: 16/9; width: 100%; }Lazy Loading verschiebt das Laden eines Bildes, bis der Besucher in dessen Nähe scrollt. Das verringert die Zahl der Ressourcen beim ersten Seitenaufbau drastisch.
Die einfachste Umsetzung (von modernen Browsern direkt unterstützt):
<img src="produktfoto.jpg" alt="Produktfoto" loading="lazy">Wichtige Hinweise:
loading="eager" (die Vorgabe) nutzen, damit sie umgehend geladen werdenloading="lazy"Beziffert: Eine typische Kategorieseite im Onlinehandel zeigt 24 Produktvorschaubilder. Mit Lazy Loading lädt der erste Aufbau nur die 4–6 Bilder im ersten Sichtbereich. Bei 80 KB je Vorschaubild spart das rund 1,4 MB beim Seitenaufbau.
Ein Content Delivery Network (CDN) ist ein weltweites Servernetz, das Kopien Ihrer Bilder in geografischer Nähe zu den Besuchern vorhält. Ohne CDN muss jemand in Taiwan, der eine in den USA gehostete Website aufruft, die Bilder über den Pazifik holen — 200–300 ms Umlaufzeit. Mit einem CDN-Knoten in Taiwan kommen die Bilder in 10–20 ms vom lokalen Server.
Wirkung auf die Bildleistung:
Für kleine und mittlere Websites deckt das kostenlose CDN-Angebot von Cloudflare die meisten Bedürfnisse ab. Die Einrichtung ist unkompliziert und verbessert die Ladezeiten für internationale Besucher spürbar.
Ein konkretes Beispiel dafür, was Bildoptimierung bringt:
Vor der Optimierung: eine Produktdetailseite im Onlinehandel
Nach der Optimierung: in WebP umgewandelt und komprimiert
In diesem Beispiel verkürzte allein die Bildoptimierung die mobile Ladezeit um 5,7 Sekunden — mit belegbar deutlichen Auswirkungen auf Absprungrate, Abschlüsse und Zufriedenheit.
Moderne Websites müssen auf ganz unterschiedlichen Bildschirmgrößen funktionieren. Ein Bild mit 1920 × 1080 px an Desktop- und Mobilnutzer gleichermaßen auszuliefern bedeutet, dass mobile Besucher ein Bild laden, das weit größer ist als ihr Bildschirm — reine Verschwendung von Bandbreite.
Die Lösung: mit den Attributen srcset und sizes mehrere Auflösungen anbieten:
<img
src="produkt-800.jpg"
srcset="produkt-400.jpg 400w,
produkt-800.jpg 800w,
produkt-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Produktname"
>Der Browser wählt anhand von Bildschirmgröße und Pixeldichte die passende Fassung: mobil die 400er, am Desktop die 1200er — jeder lädt genau das, was er braucht, und nicht mehr.
<picture> als Rückfallebene für ältere Browsersrcset einsetzen, um für verschiedene Bildschirmgrößen mehrere Auflösungen bereitzustellenloading="lazy" geben<link rel="preload"> für das Hero-Bild und andere LCP-Kandidaten setzen<img>-Tags ausdrückliche width– und height-Attribute geben, um CLS zu vermeidenBilder sind die größte Einzelgröße bei der Geschwindigkeit einer Website. Die gute Nachricht: Keine andere Art von Leistungsverbesserung liefert ein besseres Verhältnis von Aufwand zu Ertrag. Der Einsatz — Komprimierung, Formatumwandlung, Lazy Loading, srcset ergänzen — ist überschaubar. Der Gewinn ist erheblich: spürbar schnellere Seiten, niedrigere Absprungraten, höhere Abschlussraten und bessere Platzierungen bei Google. Wenn Ihre Website langsam ist und Sie die Bilder noch nie systematisch geprüft haben, fangen Sie genau dort an.