Wix-Bildgröße und WebP: Qualität und Ladezeit abwägen

Kurzantwort und erste Kontrollen

Ermitteln Sie zuerst das verspätete Bild und seine Anzeigegröße in einer Messung. Prüfen Sie die von Wix ausgelieferten Versionen und vermeiden Sie unnötig große Quellen. Bilder im ersten Bildschirm und weit darunter brauchen nicht automatisch dieselbe Ladepriorität.

Langsames Bild durch Messung bestimmen
Quell- und Anzeigegröße vergleichen
Anfangsansicht und untere Inhalte getrennt betrachten

Dieser Ratgeber hilft bei einem konkreten Problem und ist keine reine Funktionsliste. Prüfen Sie die Schritte in Ihrem eigenen Wix-Editor und auf der veröffentlichten Website; die verfügbaren Oberflächenoptionen können sich mit der Zeit ändern.

Bildabmessungen und Dateigröße sind nicht dasselbe

Ein Foto mit 1600 × 1000 Pixeln kann je nach Qualitätsstufe sehr unterschiedliche Dateigrößen haben. Bewerten Sie Pixelauflösung, Komprimierung und angezeigte Fläche getrennt. Ein nur wenige Hundert Pixel breites Kartenbild muss nicht auf jedem Gerät als riesige Datei ausgeliefert werden.

Wann sind WebP und AVIF sinnvoll?

WebP und AVIF können viele Fotos für moderne Browser gut komprimieren. Wählen Sie dennoch nicht für jeden Fall blind dasselbe Format. Vergleichen Sie je nach Verwendung von Logo, transparenter Grafik oder Foto. Bewahren Sie die Quelldatei sicher auf und prüfen Sie die veröffentlichten Ausgaben.

LCP: Das Hauptbild im ersten sichtbaren Bereich

Das für den Largest Contentful Paint wichtigste Bild hängt häufig mit dem Hero- oder großen Titelbereich zusammen. Verzögern Sie dieses Hauptbild nicht mit loading=lazy. Bei Bedarf kann ein einzelnes wichtiges Bild fetchpriority=high erhalten. Wenn alle Bilder hohe Priorität bekommen, verliert das Signal seinen Nutzen.

Lazy Loading für weiter unten liegende Bilder

Bei Galerien, Karten und Blogbildern unterhalb des sichtbaren Bereichs kann Lazy Loading die Netzwerklast verringern. Zu frühes oder zu spätes Laden beeinflusst jedoch die wahrgenommene Geschwindigkeit. Reservieren Sie vorab Platz mit width/height oder CSS aspect-ratio.

Responsive Bilder mit srcset und sizes

Wenn Karten auf dem Smartphone 340 und am Desktop 400 Pixel breit sind, können Sie verschiedene Ausgabegrößen bereitstellen. Anhand von srcset und sizes wählt der Browser ein Bild passend zur Pixeldichte. Fehlerhafte Angaben oder eine unpassende Beschreibung der tatsächlichen Breite verringern den Nutzen.

Alternativtext und Zusammenhang

Ein Alternativtext sollte das Bild so beschreiben, dass er Nutzern hilft. Er dient nicht zum Füllen mit Suchbegriffen. Beschreiben Sie das Foto, statt irrelevante Begriffe wie „Çorum SEO Webdesign“ in jeden Alternativtext zu kopieren. Bei rein dekorativen Bildern kann ein leerer Alternativtext sinnvoll sein.

Wie messen Sie nach einer Änderung?

Vergleichen Sie mobile Labormessungen in Lighthouse und PageSpeed Insights und möglichst auch Daten echter Nutzer. Entscheiden Sie nicht nach einem einzelnen Messwert. Beobachten Sie LCP, CLS und INP und prüfen Sie zusätzlich, ob die Bildqualität sichtbar nachgelassen hat.

Der nächste Schritt

Messen Sie zunächst die tatsächlichen Bildgrößen und die Ladereihenfolge. Nehmen Sie dann jeweils eine Änderung vor und vergleichen Sie das Ergebnis.

Unsere technische SEO kennenlernen →

Weitere Ratgeber

Eine suchmaschinenfreundliche Website erstellen Technische SEO

Informationen zu Funktionsumfang und Grenzen: Filigrunner.

Quellen und Überprüfung

Die Inhalte wurden unter Einbeziehung offizieller Informationen von Wix und Google geprüft. Überprüfen Sie die Einrichtung auf Ihrer veröffentlichten Website.