WebP, Web-Performance und SEO: schnellere Seiten, bessere Rankings

Wenn du dir die Ladezeit deiner Website genauer ansiehst, landest du fast immer beim selben Verdächtigen: den Bildern. Auf vielen Seiten sind sie mit Abstand der größte Datenposten, oft größer als HTML, CSS und JavaScript zusammen. Genau hier setzt WebP an. Das Format komprimiert Fotos deutlich effizienter als klassisches JPG und schrumpft damit den Löwenanteil des Transfers. Weniger Bytes bedeuten schnellere Seiten, und schnellere Seiten sind ein Baustein für bessere Rankings.

In diesem Ratgeber schauen wir uns an, warum Bilder so viel wiegen, wie WebP hilft, welche Rolle die Core Web Vitals und speziell der LCP spielen und wie du das Ganze technisch sauber umsetzt. Und weil ehrliche Einordnung wichtiger ist als Marketing-Versprechen: Am Ende ordnen wir ein, was ein Formatwechsel realistisch bringt und was eben nicht.

Warum Bilder der größte Datenposten sind

Öffne die Entwicklertools deines Browsers, wechsle in den Netzwerk-Tab und lade eine typische Content-Seite neu. In den meisten Fällen wirst du feststellen: Die Bilder machen den größten Teil der übertragenen Datenmenge aus. Ein einziges unkomprimiertes Foto in voller Auflösung kann leicht mehrere Megabyte wiegen, während der gesamte restliche Seitencode oft nur ein paar hundert Kilobyte braucht.

Das ist kein Zufall. Fotos enthalten enorm viele Bildinformationen, und je höher die Auflösung, desto mehr Pixel müssen übertragen werden. Kommt dann noch eine Retina-Darstellung ins Spiel, verdoppelt oder vervierfacht sich die Pixelmenge schnell. Wer Bilder einfach so hochlädt, wie die Kamera sie ausgibt, verschenkt fast immer viel Ladezeit.

Der Hebel ist also klar: Wer bei den Bildern spart, spart am meisten. WebP ist dabei einer der wirkungsvollsten und zugleich einfachsten Ansätze, weil du nur das Format tauschst, ohne die Bildwirkung merklich zu verändern. Wenn du die Grundlagen des Formats vertiefen willst, findest du sie im Ratgeber WebP-Format: Grundlagen und Aufbau.

Wie WebP Ladezeit und Transfergröße senkt

WebP nutzt modernere Kompressionsverfahren als JPG. Bei der verlustbehafteten Kompression erreicht es bei vergleichbarer Bildqualität in der Regel deutlich kleinere Dateien. Je nach Motiv und Qualitätsstufe sind Einsparungen von 25 bis 35 Prozent gegenüber einem gut komprimierten JPG üblich, bei manchen Bildern sogar mehr.

Diese eingesparten Bytes wirken sich unmittelbar auf die Ladezeit aus. Ein Bild, das statt 800 Kilobyte nur noch 500 Kilobyte wiegt, ist auf einer langsamen Mobilverbindung spürbar früher da. Multipliziere das mit zehn oder zwanzig Bildern auf einer Seite, und aus vielen kleinen Einsparungen wird eine echte Beschleunigung.

Wichtig ist dabei die Balance zwischen Dateigröße und sichtbarer Qualität. Zu starke Kompression erzeugt Artefakte, zu schwache verschenkt Einsparung. Wie du diesen Kompromiss findest, erklärt der Ratgeber WebP-Qualität und Kompression richtig einstellen. Mit jpgwebp.de kannst du das direkt ausprobieren: Du wählst deine JPG-Datei, stellst die Qualität über den Regler ein und siehst sofort, wie viel Prozent du sparst. Die Umwandlung passiert vollständig lokal in deinem Browser, deine Bilder werden also nicht hochgeladen.

Core Web Vitals und der LCP

Google fasst die wichtigsten Kennzahlen für das Nutzererlebnis unter dem Begriff Core Web Vitals zusammen. Drei Werte stehen im Mittelpunkt: der Largest Contentful Paint (LCP) misst, wie schnell der größte sichtbare Inhaltsblock geladen ist. Der Cumulative Layout Shift (CLS) misst, wie stark das Layout beim Laden noch verrutscht. Und das Interaction to Next Paint (INP) misst, wie schnell die Seite auf Eingaben reagiert.

Für Bilder ist vor allem der LCP entscheidend. Auf vielen Seiten ist das größte sichtbare Element genau ein Bild, etwa das Hero-Bild ganz oben oder das erste große Foto im Artikel. Wenn dieses Bild groß und langsam ist, verschlechtert es den LCP direkt. Ein leichteres WebP-Bild lädt schneller und verbessert damit genau die Kennzahl, die Google besonders im Blick hat.

Der LCP-Zielwert liegt bei 2,5 Sekunden oder weniger, gemessen an echten Nutzerdaten. Wer sein wichtigstes Bild als schlankes WebP ausliefert, priorisiert lädt und in der richtigen Auflösung bereitstellt, kommt diesem Ziel ein gutes Stück näher. WebP allein reicht dafür meist nicht, aber es ist ein sehr direkter Hebel an genau der richtigen Stelle.

Welche Rolle das für SEO spielt

Jetzt zur Gretchenfrage: Bringt WebP bessere Rankings? Die ehrliche Antwort lautet: indirekt und als Baustein, nicht als Wundermittel. Google bewertet die Page Experience, zu der die Core Web Vitals gehören, als eines von vielen Signalen. Es gibt keinen direkten Ranking-Bonus dafür, dass ein Bild im WebP-Format vorliegt. Das Format selbst ist Google im Grunde egal, entscheidend ist das Ergebnis: eine schnelle, stabile, gut nutzbare Seite.

Der Zusammenhang läuft also über das Nutzererlebnis. Schnellere Seiten führen zu weniger Abbrüchen, längerer Verweildauer und zufriedeneren Besuchern. Diese Verhaltenssignale und die messbaren Core Web Vitals fließen in Googles Gesamtbild einer Seite ein. Bei zwei inhaltlich vergleichbaren Seiten kann die schnellere im Zweifel die Nase vorn haben.

Relevanter Inhalt bleibt aber der Kern. Eine blitzschnelle Seite mit schwachem Content rankt nicht wegen ihrer Ladezeit auf Platz eins. Umgekehrt kann exzellenter Inhalt trotz mäßiger Performance ranken, nur eben schwerer, als er müsste. Performance ist der Verstärker, nicht der Motor. Wer wissen will, wann sich der Wechsel überhaupt lohnt, findet eine Entscheidungshilfe im Ratgeber Wann du WebP statt JPG verwenden solltest.

Bilder richtig ausliefern: das picture-Element

WebP wird heute von allen modernen Browsern unterstützt, aber ganz alte Umgebungen kennen es nicht. Statt darauf zu setzen, dass alle mitspielen, lieferst du sauber ein Fallback mit. Das <picture>-Element ist dafür der Standardweg: Der Browser nimmt die erste Quelle, die er versteht, und fällt sonst auf das JPG im <img> zurück.

<picture>
  <source srcset="foto.webp" type="image/webp" />
  <img
    src="foto.jpg"
    alt="Beschreibung des Motivs"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

Der Aufbau ist bewusst simpel. Die <source> mit type="image/webp" bietet die moderne Variante an. Das <img> innerhalb des <picture> bleibt als Fallback und trägt gleichzeitig das Alt-Attribut, das für Barrierefreiheit und Bilder-SEO wichtig ist. Ein Browser, der WebP kann, lädt nie das JPG, es entsteht also kein doppelter Transfer. Details zur Browser-Landschaft findest du im Ratgeber WebP-Browser-Support im Überblick. Die Attribute width, height und loading schauen wir uns gleich genauer an.

Layout-Shift, Lazy Loading und srcset

Drei kleine Attribute machen bei der Bildauslieferung einen großen Unterschied. Zusammen mit dem Format sind sie das eigentliche Handwerkszeug für gute Web-Performance.

Erstens width und height: Gib immer die tatsächlichen Bildmaße an. Der Browser reserviert dann schon vor dem Laden den richtigen Platz, und der Inhalt springt nicht mehr nach unten, sobald das Bild eintrifft. Genau dieses Springen misst der CLS-Wert. Bilder ohne feste Maße sind eine der häufigsten Ursachen für schlechten Layout-Shift, und die Lösung kostet nur zwei Attribute.

Zweitens loading="lazy": Damit sagst du dem Browser, dass er Bilder erst laden soll, wenn sie in die Nähe des sichtbaren Bereichs kommen. Bilder weit unten auf der Seite blockieren so nicht den ersten Seitenaufbau. Wichtig: Setze Lazy Loading nicht auf dein LCP-Bild ganz oben, denn das soll ja gerade so früh wie möglich da sein. Für alles unterhalb des ersten Bildschirms ist es dagegen ideal.

Drittens srcset: Damit lieferst du je nach Bildschirmgröße unterschiedlich große Varianten aus. Ein Smartphone bekommt ein kleineres Bild als ein großer Desktop-Monitor, statt für alle dieselbe riesige Datei zu laden.

<picture>
  <source
    type="image/webp"
    srcset="foto-480.webp 480w, foto-1024.webp 1024w, foto-1920.webp 1920w"
    sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1920px"
  />
  <img
    src="foto-1024.jpg"
    alt="Beschreibung des Motivs"
    width="1024"
    height="683"
    loading="lazy"
  />
</picture>

So kombinierst du modernes Format, passende Auflösung und verzögertes Laden in einem einzigen Block. Das ist der Punkt, an dem die Einsparung wirklich spürbar wird.

Die richtige Größe zuerst

Ein Formatwechsel ersetzt keine vernünftige Bildgröße. Wenn du ein 4000 Pixel breites Kamerafoto in einen 800 Pixel breiten Container packst, überträgst du jede Menge Pixel, die der Nutzer nie zu sehen bekommt. WebP macht diese Datei zwar kleiner als das JPG, aber du transportierst immer noch das Fünffache der nötigen Bildinformation.

Deshalb gilt die Reihenfolge: erst auf die tatsächlich benötigte Auflösung skalieren, dann komprimieren, dann ins moderne Format bringen. Überlege dir, wie breit ein Bild auf deiner Seite maximal dargestellt wird, rechne für scharfe Darstellung auf hochauflösenden Displays einen Faktor dazu und exportiere in dieser Größe. Alles darüber ist verschenkter Transfer.

Wenn du diese Kette einhältst, arbeiten alle Hebel zusammen: kleine Ausgangsgröße, effiziente WebP-Kompression, passende srcset-Varianten und Lazy Loading. Das Ergebnis ist eine Seite, die auf dem Smartphone genauso zügig lädt wie am Schreibtisch.

Ehrliches Fazit

WebP ist ein wirkungsvoller Baustein für schnellere Seiten, aber kein Ranking-Trick. Der Formatwechsel senkt zuverlässig die Transfergröße, verbessert den LCP und trägt so zu besseren Core Web Vitals bei. Über den Umweg des Nutzererlebnisses kann das Rankings stützen, doch einen direkten Bonus nur fürs Format gibt es nicht. Wer inhaltlich schwach ist, wird durch schnelle Bilder nicht plötzlich sichtbar.

Der ehrliche Weg ist der pragmatische: guten Inhalt schreiben, Bilder in der richtigen Größe exportieren, als WebP mit JPG-Fallback ausliefern, width und height setzen, unterhalb des ersten Bildschirms lazy laden und mit srcset die passende Auflösung bereitstellen. Das sind ein paar einfache Handgriffe mit spürbarer Wirkung. Deine JPG-Dateien wandelst du dafür bequem und ohne Upload auf jpgwebp.de um, direkt im Browser und mit sofort sichtbarer Ersparnis. Wenn dir Datenschutz wichtig ist, lohnt auch ein Blick in den Ratgeber Datenschutz bei Bild-Konvertern.

Hast du einen Fehler entdeckt oder einen Quellen-Hinweis für uns? Schreib gern an info@akara-solutions.de.