Bilder sind fast immer
der größte Ballast.

Die richtige Größe finden

Der wichtigste Schritt ist der einfachste: Ein Bild sollte nicht größer sein, als es angezeigt wird. Ein Foto, das auf der Seite 800 Pixel breit erscheint, braucht keine 6000 Pixel.

Faustregel für gängige Fälle: Bilder über die volle Breite etwa 1600 bis 2000 Pixel, Bilder in einer Spalte etwa 800 bis 1200, kleine Vorschaubilder 400 bis 600. Für hochauflösende Bildschirme reicht es, die doppelte Anzeigebreite bereitzustellen – mehr bringt nichts Sichtbares.

Das richtige Format

• WebP — heute der Standard. Deutlich kleiner als JPEG bei gleicher Qualität, von allen aktuellen Browsern unterstützt.
• AVIF — noch kleiner, aber nicht überall unterstützt. Sinnvoll mit WebP als Rückfallebene.
• JPEG — nur noch als Rückfallebene für sehr alte Browser.
• PNG — für Grafiken mit harten Kanten und für alles mit Transparenz. Für Fotos ungeeignet, weil zu groß.
• SVG — für Logos, Symbole und einfache Grafiken. Beliebig skalierbar bei winziger Dateigröße.

Komprimierung: wo die Grenze liegt

Bei JPEG und WebP gibt es einen Qualitätsregler. Zwischen 75 und 85 Prozent liegt der Bereich, in dem die Datei deutlich kleiner wird, ohne dass es auffällt. Darunter beginnen sichtbare Artefakte, darüber gewinnt man nichts mehr.

Prüf es am eigenen Bild: Speichere dasselbe Foto mit 90 und mit 80 Prozent und sieh sie nebeneinander an. In den allermeisten Fällen ist kein Unterschied zu sehen – die Datei ist aber spürbar kleiner.

Was im HTML stehen muss

1. Breite und Höhe angeben. Dann reserviert der Browser den Platz, bevor das Bild da ist — und das Layout springt nicht. Das ist der direkteste Hebel gegen Layoutverschiebungen.
2. loading="lazy" für alles, was nicht sofort sichtbar ist. Das Bild wird erst geladen, wenn es in die Nähe des Bildschirms kommt.
3. Alternativtext. Beschreibe, was zu sehen ist. Für Screenreader, für den Fall, dass das Bild nicht lädt, und weil Suchmaschinen daraus lesen, worum es geht.
4. Dateinamen mit Bedeutung. badsanierung-vorher-nachher.webp statt IMG_4821.webp.

Ein Ablauf, der sich lohnt

Wer regelmäßig Bilder einstellt, sollte das nicht jedes Mal von Hand machen. Ein fester Ablauf dauert nach dem Einrichten Sekunden:

1. Bild auf die maximal benötigte Breite verkleinern.
2. Als WebP mit etwa 80 Prozent Qualität speichern.
3. Sprechenden Dateinamen vergeben.
4. Beim Einbinden Maße, loading und Alternativtext setzen.

Das lässt sich automatisieren – viele Systeme erledigen die ersten beiden Schritte beim Hochladen selbst, wenn man es einmal einrichtet.