Bilder optimieren für Core Web Vitals
By ArturAktualisiert 7 Min. Lesezeit
Deine Website lädt langsam. Du machst einen Lighthouse-Test. Der Bericht sagt: Deine Bilder sind das Problem.
Dieser rote „Largest Contentful Paint"-Wert? Der wird fast immer durch nicht optimierte Bilder verursacht. Und Google nutzt genau diesen Wert, um deine Seite zu ranken.
Core Web Vitals sind die Metriken, die Google am meisten interessieren. Bilder beeinflussen die wichtigste davon. Optimiere deine Bilder und deine Werte springen nach oben. So geht's.
Core Web Vitals sind drei Leistungskennzahlen, die Google auf jeder Seite misst:
Bilder beeinflussen zwei dieser drei Metriken direkt. Ein schweres Hero-Bild ruiniert deinen LCP-Wert. Ein Bild ohne feste Abmessungen verursacht Layout-Verschiebungen, die deinen CLS-Wert verschlechtern.
Warum ist das wichtig für dein Business? Google hat bestätigt, dass Core Web Vitals ein Ranking-Faktor sind. Seiten mit guten Werten bekommen mehr organischen Traffic. Seiten mit schlechten Werten rutschen in den Ergebnissen nach unten.
Die Daten belegen das. Websites, die ihren LCP um über 2 Sekunden verbessert haben, sahen messbare Ranking-Gewinne. Bei umkämpften Keywords kann dieser Geschwindigkeitsunterschied zwischen Seite eins und Seite drei entscheiden.
Bilder sind meistens die schwersten Elemente auf einer Seite. Eine durchschnittliche Webseite lädt über 1 MB an Bildern. Das ist mehr als Skripte, Schriften und HTML zusammen. Optimiere die Bilder und du löst den Großteil des Performance-Problems.
LCP misst, wann das größte sichtbare Element fertig gerendert ist. Auf den meisten Seiten ist das ein Hero-Bild, ein Produktfoto oder ein Banner.
Wenn dieses Bild 4 Sekunden zum Laden braucht, ist dein LCP 4 Sekunden. Google will unter 2,5. So schließt du die Lücke.
Komprimiere deine Bilder. Ein 2 MB großes Hero-Bild ist zu groß. Komprimiere es auf 150-200 KB und die Ladezeit sinkt dramatisch. Nutze eine Qualitätseinstellung von 75-85% für Fotos. Der visuelle Unterschied ist fast unsichtbar, aber die Dateigröße sinkt um 80-90%.
Nutze moderne Formate. WebP-Dateien sind 25-35% kleiner als JPEG bei gleicher Qualität. AVIF spart noch mehr. Jeder moderne Browser unterstützt WebP. Der Formatwechsel ist einer der einfachsten LCP-Gewinne.
Skaliere auf die Anzeigegröße. Liefere kein 4000px-Bild, wenn die Seite es nur bei 800px anzeigt. Zuerst skalieren, dann komprimieren. Das allein kann die Dateigröße um 70-80% reduzieren.
Lade dein LCP-Bild vor. Füge einen Preload-Hinweis in dein HTML ein, damit der Browser das Hero-Bild sofort abruft. Ohne diesen Hinweis entdeckt der Browser das Bild erst nach dem Parsen des CSS. Diese Verzögerung kostet hunderte Millisekunden.
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
Setze fetchpriority="high" auf das LCP-Bild. Das sagt dem Browser, dieses Bild vor anderen Ressourcen zu priorisieren. Eine kleine Änderung, die echte Zeit beim LCP spart.
Lazy-loade dein LCP-Bild nicht. Das ist ein häufiger Fehler. Lazy Loading verzögert das Bild, bis es in den Sichtbereich scrollt. Dein Hero-Bild ist aber schon beim Laden sichtbar. Lazy Loading fügt unnötige Verzögerung hinzu und verschlechtert deinen LCP-Wert.
Lazy Loading ist super für Bilder unterhalb des sichtbaren Bereichs. Für Bilder oberhalb ist es schrecklich.
Wenn du loading="lazy" zu einem Bild hinzufügst, wartet der Browser, bis der Nutzer in die Nähe scrollt, bevor er es herunterlädt. Das spart Bandbreite für Bilder, die der Nutzer vielleicht nie sieht. Es reduziert das anfängliche Seitengewicht und beschleunigt den ersten Ladevorgang.
Aber wenn du das Hero-Bild oder ein anderes beim ersten Laden sichtbares Bild lazy-loadest, sagst du dem Browser: Warte, bevor du das wichtigste visuelle Element lädst. Das erhöht direkt den LCP.
Die Regel ist einfach. Lazy-loade jedes Bild unterhalb des sichtbaren Bereichs. Lazy-loade nie Bilder oberhalb des sichtbaren Bereichs. Dein Hero-Bild, Header-Logo und alle Inhalte, die ohne Scrollen sichtbar sind, sollten sofort laden.
Für die meisten Seiten bedeutet das: 1-3 Bilder laden sofort. Alles andere bekommt Lazy Loading. Diese Balance gibt dir den besten LCP-Wert bei gleichzeitiger Bandbreiteneinsparung.
Achte auch auf Layout-Verschiebungen durch lazy-geladene Bilder. Wenn ein Bild lädt und den Inhalt nach unten schiebt, ist das ein CLS-Problem. Setze immer explizite width- und height-Attribute auf deine Bilder. Der Browser reserviert Platz, bevor das Bild lädt, und verhindert so Layout-Sprünge.
Das Format, das du wählst, beeinflusst direkt die Dateigröße. Kleinere Dateien laden schneller. Schnelleres Laden bedeutet besseren LCP.
WebP ist aktuell die beste Standardwahl für Webbilder. Es komprimiert 25-35% besser als JPEG ohne sichtbaren Qualitätsverlust. Die Browserunterstützung liegt bei über 97%. Solange du keine sehr alten Browser unterstützen musst, sollte WebP dein Standardformat sein.
AVIF komprimiert noch besser als WebP. Bis zu 50% kleiner als JPEG. Aber die Kodierung ist langsamer und die Browserunterstützung holt noch auf. Nutze AVIF, wenn deine Build-Pipeline es unterstützt und du Fallbacks liefern kannst.
JPEG funktioniert immer noch gut für Fotos. Wenn du es gut komprimierst (Qualität 75-85), ist es eine solide Wahl. Aber WebP liefert fast immer eine kleinere Datei bei gleicher visueller Qualität.
PNG ist richtig für Logos, Icons und Bilder mit Transparenz. Aber PNG-Dateien sind groß. Wenn keine Transparenz nötig ist, konvertiere zu WebP oder JPEG.
Das <picture>-Element lässt dich das beste Format an jeden Browser liefern:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero-Bild" width="1200" height="600">
</picture>
Das liefert AVIF an Browser, die es unterstützen, WebP an die nächste Gruppe und JPEG als Fallback. Jeder Besucher bekommt die kleinstmögliche Datei, die sein Browser verarbeiten kann.
Bilder für schnellere Websites komprimieren. Die richtigen Qualitätseinstellungen, Formate, Skalierungs-Workflow und Stapeltools für 80-95% weniger Bildgewicht.
WebP-Dateien sind 25-35% kleiner als JPEG bei gleicher Qualität. Erfahre wie WebP-Komprimierung funktioniert, Browser-Support und wie du deine Bilder konvertierst.
AVIF und WebP im direkten Vergleich. Dateigröße, Browser-Support, Encoding-Speed und Qualität. Finde das richtige Format für deine Bilder.
So komprimierst du Bilder für E-Mail-Anhänge. Dateigröße um bis zu 90% reduzieren ohne sichtbaren Qualitätsverlust. Mehr Fotos versenden ohne Größenlimit.
Layout-Verschiebung passiert, wenn ein Bild lädt und anderen Inhalt verschiebt. Der Text, den du gerade gelesen hast, springt plötzlich nach unten. Ein Button, den du klicken wolltest, rutscht weg. Das ist frustrierend für Nutzer und schlecht für deinen CLS-Wert.
Die Lösung ist einfach. Sag dem Browser immer, wie groß das Bild sein wird, bevor es lädt.
Setze width und height auf jedes Bild. Der Browser nutzt diese Angaben, um das Seitenverhältnis zu berechnen und den richtigen Platz zu reservieren. Auch wenn das Bild noch nicht geladen ist, bleibt das Layout stabil.
<img src="/foto.webp" alt="Produktfoto" width="800" height="600">
Nutze CSS aspect-ratio für responsive Bilder. Wenn deine Bilder mit dem Viewport skalieren, setze das Seitenverhältnis in CSS. Der Browser reserviert den korrekten proportionalen Platz bei jeder Bildschirmgröße.
img {
aspect-ratio: 4 / 3;
width: 100%;
height: auto;
}
Füge keine Bilder dynamisch über bestehenden Inhalt ein. Wenn JavaScript ein Werbebanner oder ein Karussell oben auf der Seite lädt, verschiebt sich alles darunter. Reserviere entweder Platz für dynamische Inhalte oder lade sie unterhalb des sichtbaren Bereichs.
Achte auf schrift-abhängige Layouts. Manchmal kommt Layout-Verschiebung gar nicht von Bildern. Web-Schriften, die spät laden, können Text umformatieren und Bilder verschieben. Nutze font-display: swap und lade deine wichtigsten Schriften vor.
Hier ist eine Schritt-für-Schritt-Checkliste für jede Seite:
Vor dem Hochladen:
In deinem HTML:
width und height auf jeden <img>-Tag.loading="lazy" zu allen Bildern unterhalb des sichtbaren Bereichs hinzu.fetchpriority="high" zum LCP-Bild hinzu.<link rel="preload"> vor.<picture>-Element, um moderne Formate mit Fallbacks zu liefern.Nach dem Deployment:
Wenn du diese Checkliste konsequent befolgst, bleiben deine Core Web Vitals grün. Die meisten Websites sehen einen LCP-Rückgang von 1-3 Sekunden allein durch Bildoptimierung.
Einmal optimieren reicht nicht. Neue Bilder kommen dazu. Inhalte ändern sich. Du musst die Performance laufend überwachen.
Google PageSpeed Insights gibt dir einen schnellen Überblick. Füge eine URL ein und erhalte LCP-, INP- und CLS-Werte für Mobil und Desktop. Es zeigt auch Felddaten von echten Chrome-Nutzern, wenn verfügbar.
Lighthouse (in den Chrome DevTools integriert) führt einen vollständigen Audit durch. Es markiert übergroße Bilder, fehlendes Lazy Loading, Bilder ohne Abmessungen und Bilder in veralteten Formaten. Führe es in einem Inkognito-Fenster aus, um Störungen durch Erweiterungen zu vermeiden.
Google Search Console zeigt Core Web Vitals-Daten für deine gesamte Website. Sie gruppiert URLs nach Status: gut, verbesserungswürdig oder schlecht. Prüfe das monatlich, um Verschlechterungen früh zu erkennen.
WebPageTest zeigt dir eine Filmstreifen-Ansicht, wie deine Seite Frame für Frame lädt. Du siehst genau, wann jedes Bild erscheint und wie es die Render-Timeline beeinflusst.
Der Vergleich beliebter Komprimierungstools hilft dir, das richtige Tool für deinen Workflow zu finden. Ob du ein Bild nach dem anderen komprimierst oder hunderte im Stapel verarbeitest — das richtige Tool macht Optimierung einfach.
Bilder sind das größte Gewicht auf den meisten Webseiten. Sie zu optimieren ist die wirkungsvollste Änderung für bessere Core Web Vitals.
Komprimiere deine Bilder. Nutze moderne Formate. Setze korrekte Abmessungen. Lade vor, was wichtig ist. Lazy-loade, was es nicht ist.
CompressIMG übernimmt den Komprimierungsschritt. Lade deine Bilder hoch, wähle deine Qualität und lade optimierte Dateien in Sekunden herunter. Kein Konto nötig. Fang mit deinen Hero-Bildern an und arbeite dich nach unten.
Dein LCP-Wert wird es dir danken.
CompressIMG
Bilder komprimieren ohne Qualitätsverlust. Kostenlos, schnell und direkt im Browser.