4 Min Lesezeit

Bilder auf der Website richtig optimieren

Wenn eine Website langsam wirkt, liegt das selten am Server. Es liegt fast immer an Bildern. Sie sind das häufigste Element, das gross, ungeprüft und in voller Auflösung in den Browser geliefert wird. Dabei sind sie gleichzeitig die Stelle, an der sich Performance am deutlichsten verbessern lässt.

Bildoptimierung klingt nach IT-Detail. Tatsächlich entscheidet sie darüber, wie schnell eine Seite "ankommt", wie ruhig sie steht und wie viel Datenvolumen Besucher dafür mitbringen müssen.

Warum unbearbeitete Bilder so teuer sind

Eine Kameradatei aus modernen Smartphones liegt schnell bei mehreren Megabyte. Ein typisches Hero-Visual auf einer Website sollte unter 200 Kilobyte liegen, oft sogar deutlich darunter. Wenn diese Differenz nicht aktiv aufgelöst wird, gilt:

die Seite lädt sichtbar später
der LCP-Wert verschlechtert sich
Mobilfunkverbindungen brechen schneller ab
der Eindruck der Seite wirkt schwerer als nötig

Es geht nicht darum, Bilder kaputt zu komprimieren. Es geht darum, sie bewusst auf den Webgebrauch zuzuschneiden.

Die wichtigsten Hebel im Überblick

Wirklich relevant sind nur wenige Punkte, die in Kombination wirken:

das richtige Bildformat
die richtige Auflösung pro Endgerät
sinnvolle Kompression
feste Massvorgaben im Markup
eine durchdachte Pflegelogik im CMS

Wenn diese fünf Punkte sauber sitzen, sind 90 Prozent aller typischen Bildprobleme gelöst.

Formate: WebP und AVIF statt JPG

Klassische JPG- und PNG-Dateien sind nicht mehr Stand der Technik für Webausspielung. Moderne Formate liefern bei gleicher Qualität deutlich kleinere Dateien:

WebP ist breit unterstützt und ein guter Standard
AVIF liefert oft die besten Werte, ist etwas aufwendiger
PNG bleibt sinnvoll für Logos mit harten Kanten und Transparenzen
SVG ist für Icons und einfache Grafiken die richtige Wahl

Wichtig ist nicht, jedes Format zu nutzen, sondern bewusst zu entscheiden, welches an welcher Stelle passt.

Eine Datei reicht nicht: responsive Bilder

Ein Bild, das auf dem Desktop 1600 Pixel breit ist, hat auf dem Smartphone keine Berechtigung in voller Grösse. Saubere Setups liefern verschiedene Auflösungen aus, je nach Gerät:

kleinere Versionen für Mobile
mittlere Versionen für Tablets und kleinere Desktops
die Vollversion erst bei wirklich grossen Bildschirmen

Diese Logik gehört in das CMS, nicht in einen manuellen Prozess. Niemand soll für jedes Bild fünf Versionen exportieren und benennen müssen. Das ist Aufgabe der technischen Pipeline.

Kompression mit Augenmass

Kompression ist kein Werkzeug, mit dem du jedes Bild halbieren willst, bis Qualität sichtbar leidet. Sie ist ein bewusster Eingriff:

Hero-Bilder dürfen mehr Qualität behalten, aber sind eher kleiner als gedacht
Inhaltsbilder vertragen meist deutlich mehr Kompression als befürchtet
Bilder mit feinen Strukturen sind empfindlicher
Fotos mit weichen Flächen sind sehr robust

Es lohnt sich, einmal mit echten Beispielen zu prüfen, wie weit eine bestimmte Bildwelt geht, bevor sichtbare Artefakte entstehen.

Fest definierte Massvorgaben

Wer Bilder im Markup ohne feste Höhe und Breite einbindet, riskiert Layout-Sprünge beim Laden. Das wirkt sich direkt auf den CLS-Wert aus und auf das Gefühl der Seite. Eine ausführliche Einordnung dazu findest du im Beitrag zu Layout-Sprüngen und CLS.

In der Praxis bedeutet das:

jedes Bild bekommt einen Container mit definierter Grösse
Seitenverhältnisse bleiben über Breakpoints konsistent
Embeds und Videos werden gleich behandelt

Lazy Loading sinnvoll, aber nicht überall

Lazy Loading wird oft als Patentrezept verkauft. Tatsächlich hilft es nur an Stellen, an denen Bilder noch nicht sichtbar sind. Wer es pauschal aktiviert, verschlechtert manchmal die wahrgenommene Performance, weil das LCP-Bild zu spät geladen wird. Genauer einordnen lässt sich das im Beitrag Lazy Loading: nützlich, aber nicht überall.

Pflegelogik im CMS

Bildoptimierung ist nichts, was man einmal macht und dann vergisst. Sie muss in den Alltag der Inhaltspflege eingebaut sein. Das bedeutet:

das CMS akzeptiert Bilder grosszügig und konvertiert sie selbst
die Redaktion muss keine technischen Spezifikationen kennen
Vorgaben und Beispiele sind im CMS dokumentiert
Fallbacks für ältere Browser laufen automatisch

Wer hier sauber arbeitet, gewinnt nicht nur Performance, sondern auch Tempo bei jedem späteren Inhaltsupdate.

Pragmatische Reihenfolge

Wenn Bilder auf einer bestehenden Seite ein Thema sind, lohnt eine ruhige Reihenfolge:

das LCP-Bild auf jeder wichtigen Seite identifizieren
dieses Bild zuerst optimieren, in Format, Grösse und Kompression
danach systematisch alle weiteren Bildbereiche durchgehen
zuletzt Lazy Loading und Vorschau-Logik feinjustieren

Diese Reihenfolge bringt schnell sichtbaren Effekt, ohne dass alles gleichzeitig umgebaut werden muss.

Fazit und nächster Schritt

Bilder sind die Stelle, an der die meisten Websites schnell besser werden können, ohne dass Design oder Inhalt leiden. Wer hier sauber arbeitet, entlastet Performance, Vertrauen und SEO gleichzeitig.

Wenn du nicht sicher bist, wie sauber Bilder auf deiner Website eingebunden sind, lässt sich das in einer kurzen Bestandsaufnahme meist gut einordnen. Oft reicht ein Blick auf einige zentrale Seiten, um zu sehen, ob das Thema im CMS, im Stack oder in der Pflegeroutine liegt.