Das hier ist der zweite Teil zum Thema Bilder. Im ersten geht es ums Format, also WebP statt JPG. Hier geht es um die Grösse und um die Masse, und zwar um zwei Dinge, die oft verwechselt werden: wie schwer eine Datei ist, und ob im Quelltext steht, wie gross sie dargestellt wird.
Teil 1: Das Gewicht
Ein Foto direkt aus der Kamera oder vom Handy hat heute 4000 bis 6000 Pixel Breite und wiegt drei bis acht Megabyte. Auf einer Website wird es auf vielleicht 800 Pixel dargestellt. Der Browser lädt trotzdem die volle Datei und rechnet sie danach herunter.
Das ist, als würdest du eine Palette Ziegel liefern lassen, um ein Loch in der Wand zu stopfen.
Die Zahlen, an denen du dich orientieren kannst
- Bildschirmbreites Titelbild: 1600 bis 2000 Pixel Breite.
- Bilder im Text, Referenzen, Teambilder: 800 bis 1200 Pixel.
- Vorschaubilder und Symbole: 400 Pixel reichen.
- Je Datei: unter 200 KB. Bei einem grossen Titelbild sind 300 KB noch vertretbar.
- Alle Bilder einer Seite zusammen: unter 800 KB ist gut, über 2 MB wird es im Mobilnetz spürbar.
Genau diese Marken verwendet auch unser Website-Check unter «Gewicht der Bilder». Dort steht das Gesamtgewicht, der Schnitt je Bild und die fünf schwersten Dateien mit Namen, direkt anklickbar.
So verkleinerst du
Zuerst die Pixel, dann die Kompression. In dieser Reihenfolge, denn ein auf 800 Pixel verkleinertes Bild wird von selbst leicht.
Mit Squoosh geht beides in einem Durchgang: Bild hineinziehen, rechts unter «Resize» die Breite setzen, darüber das Format auf WebP und die Qualität auf 80. Für viele Bilder auf einmal eignet sich XnConvert.
Bei WordPress erledigen das auch Erweiterungen wie ShortPixel oder Imagify beim Hochladen. Achte darauf, dass die Originale erhalten bleiben.
Teil 2: Die Masse im Quelltext
Das ist etwas völlig anderes und wird oft mit dem Gewicht verwechselt. Es geht darum, dass beim Bild im Quelltext Breite und Höhe stehen:
<img src="werkstatt.webp" width="1200" height="800" alt="Unsere Werkstatt">Warum das zählt: Der Browser baut die Seite auf, während er noch lädt. Steht bei einem Bild kein Mass, weiss er nicht, wie viel Platz er freihalten soll, und setzt den Text direkt darunter. Sobald das Bild ankommt, schiebt es alles nach unten weg.
Jeder kennt das: Man will etwas anklicken, im selben Moment springt die Seite, und man landet woanders. Google misst das als Cumulative Layout Shift, gut ist ein Wert unter 0,1.
Das Missverständnis dabei
Die Zahlen im Quelltext legen nicht fest, wie gross das Bild angezeigt wird. Das macht weiterhin die Gestaltung. Sie sagen dem Browser nur das Seitenverhältnis, damit er den richtigen Platz reservieren kann. Du kannst also ruhig die echten Pixelmasse der Datei eintragen, auch wenn das Bild auf dem Handy schmaler dargestellt wird.
Wo du sie einträgst
- WordPress: Setzt die Masse bei über die Mediathek eingefügten Bildern von selbst. Fehlen sie, stammt das Bild meist aus einem Seitenbaukasten wie Elementor oder aus einem Theme-Element. Dort im jeweiligen Element nachtragen.
- Wix und Squarespace: Machen es automatisch. Hier musst du nichts tun.
- Selbst gebaut: Bei jedem
<img>beide Attribute setzen. Deine KI macht das auf Zuruf für die ganze Seite.
Teil 3: Verzögertes Laden
Bilder, die erst weiter unten auf der Seite stehen, muss niemand sofort laden. Das Attribut loading="lazy" sagt dem Browser, er soll damit warten, bis jemand hinunterscrollt.
Eine wichtige Ausnahme: Beim obersten Bild, also dem, das man ohne Scrollen sieht, gehört es nicht hin. Sonst verzögerst du genau den Teil, den Google als «Bis der Hauptinhalt da ist» misst. Das ist einer der häufigsten gut gemeinten Fehler.
Faustregel: alles ausser dem ersten Bild.
Was das zusammen bringt
Eine Startseite mit zwölf unbearbeiteten Fotos wiegt schnell 6 Megabyte. Dieselbe Seite mit auf 1200 Pixel verkleinerten WebP-Dateien liegt bei etwa 700 Kilobyte. Das ist der Unterschied zwischen einer Seite, die im Zug lädt, und einer, bei der man vorher weiterklickt.
Dazu kommen die Masse und das verzögerte Laden, und die Seite springt beim Aufbau nicht mehr herum. Zusammen sind das drei Handgriffe, die keinen Rappen kosten und bei den meisten Seiten mehr bringen als alles andere.
So prüfst du, ob es geklappt hat
Der Website-Check zeigt dir alle drei Punkte im Bereich «Bilder»: das Gesamtgewicht mit dem Schnitt je Bild, wie viele Bilder Masse haben, und ob verzögertes Laden gesetzt ist. Bei den Punkten, die noch offen sind, stehen die betroffenen Bilder mit Namen und Grösse, jedes davon anklickbar.
Unter «Tempo» siehst du danach, ob sich der Wert für «Springt das Layout beim Laden» verbessert hat.
Wenn du es lieber gemeinsam machst
Im Workshop gehen wir das an deiner eigenen Seite durch, mit deinen Bildern. Danach weisst du, worauf du beim nächsten Hochladen achtest.
Quellen
- web.dev zu Cumulative Layout Shift, Schwellenwert 0,1.
- web.dev zum verzögerten Laden, inklusive der Ausnahme beim ersten Bild.
- Squoosh, Verkleinern und Umwandeln im Browser.