Bilder

Was wir prüfen

Wir laden die Startseite in einem echten Browser und schauen uns jedes Bild an:

• Format: Wie viele Daten entfallen auf alte Formate wie JPEG, PNG oder GIF? Ab 500 KB gibt es eine Warnung.
• Grösse: Ist ein Bild mehr als dreimal so breit wie angezeigt und grösser als 100 KB, ist es viel grösser als nötig.
• Lazy Loading: Laden mindestens drei Bilder weiter unten auf der Seite sofort mit, statt erst beim Scrollen? Lazy Loading per JavaScript, bei dem zuerst ein Platzhalter dasteht, zählt dabei als verzögert, und direkt im HTML eingebettete Bilder (data:-URI) laden nichts nach. Und umgekehrt: Trägt ein Bild, das beim Öffnen sichtbar ist, loading="lazy"? Das verzögert es unnötig und ist eine Warnung.
• Breite und Höhe: Fehlen bei mindestens drei Bildern die Grössenangaben im HTML?

Im Bericht siehst Du ausserdem die Anzahl Bilder und ihre gesamte Datenmenge.

Warum das wichtig ist

Bilder machen auf den meisten Websites den grössten Teil der Datenmenge aus, oft mehr als 70 %. Ein einziges unbearbeitetes Smartphone-Foto mit 4 MB kann die Ladezeit auf dem Smartphone um Sekunden verlängern.

• Alte Formate sind 30 bis 50 % grösser als moderne wie WebP oder AVIF, bei gleicher Qualität.
• Zu grosse Bilder werden vollständig geladen und dann vom Browser verkleinert. Die Daten sind umsonst übertragen.
• Ohne Lazy Loading lädt der Browser alle Bilder sofort, auch jene ganz unten, die viele Besucher nie sehen. Das verzögert das, was oben sichtbar sein soll.
• Lazy Loading am falschen Ort schadet: Ein sichtbares Bild mit loading="lazy" wartet, bis der Browser das Layout berechnet hat, statt sofort zu laden. Trifft es das grosse Titelbild, verschlechtert sich der Core-Web-Vitals-Wert LCP direkt. Viele WordPress-Themes und Page-Builder setzen die Angabe pauschal auf alle Bilder.
• Ohne Breite und Höhe weiss der Browser nicht, wie viel Platz er freihalten muss. Der Text springt nach unten, sobald das Bild erscheint.

So behebst Du es

Bilder vor dem Hochladen vorbereiten

1. Verkleinere Bilder auf die benötigte Breite, für bildschirmbreite Bilder etwa 1600 bis 2000 Pixel, für Bilder in einer Spalte entsprechend weniger.
2. Speichere sie als WebP oder AVIF, oder als JPEG mit Qualität 75 bis 85.
3. Kostenlose Werkzeuge wie squoosh.app erledigen beides im Browser.

WordPress

Bild-Plugins wie ShortPixel, Imagify, EWWW Image Optimizer oder Converter for Media wandeln bestehende und neue Bilder automatisch in WebP um und verkleinern sie. WordPress setzt seit Version 5.5 Lazy Loading und Bildgrössen selbst, sofern das Theme mitspielt. Bei Page-Buildern wie Elementor findest Du die Option in den Leistungseinstellungen.

Wix, Jimdo, Squarespace

Die Baukästen optimieren Bilder beim Hochladen und liefern sie in modernen Formaten aus. Lade trotzdem keine riesigen Originale hoch, und verzichte auf Galerien mit dutzenden Bildern auf der Startseite.

Eigener Code

<img src="team.webp" width="800" height="533" loading="lazy" alt="Unser Team in der Werkstatt">

Setze loading="lazy" nur bei Bildern unterhalb des ersten Bildschirms. Das grosse Titelbild oben soll sofort laden, am besten mit fetchpriority="high". In WordPress schliesst Du das Titelbild über die Option «Lazy Loading überspringen» des Bild-Plugins aus, oder Du setzt loading="eager" im Block-Editor unter «Erweitert».

So prüfst Du es selbst

Öffne die Entwicklertools (F12), Reiter «Netzwerk», filtere nach «Img» und lade die Seite neu. Sortiere nach Grösse: Alles über 300 KB verdient einen zweiten Blick.

Häufige Fragen

Leidet die Bildqualität unter WebP?

Sichtbar nicht. WebP und AVIF erreichen bei gleicher Qualität deutlich kleinere Dateien als JPEG. Bei einer Qualitätsstufe von 75 bis 85 sehen die meisten Menschen keinen Unterschied.

Wie gross darf ein Bild höchstens sein?

Als Faustregel: ein grosses Titelbild unter 200 KB, normale Inhaltsbilder unter 100 KB. In der Breite reichen meist 1600 bis 2000 Pixel für ein bildschirmbreites Bild.