Bilder sind auf den meisten Websites der größte Brocken. Sie machen oft mehr als die Hälfte des gesamten Datenvolumens einer Seite aus. Wer hier unsauber arbeitet, lädt schnell mehrere Megabyte an Pixeln, die kein Besucher braucht. Die Folge: lange Wartezeiten, abspringende Nutzer und ein schlechteres Ranking. Die gute Nachricht ist, dass sich Bilder mit überschaubarem Aufwand deutlich verkleinern lassen, ohne dass man den Unterschied sieht. Diese Anleitung zeigt, worauf es bei der Bildoptimierung ankommt.
Warum Bilder über die Ladezeit entscheiden
Jedes Bild muss vom Server geladen und vom Browser verarbeitet werden. Ein einziges unkomprimiertes Foto aus der Kamera bringt schnell vier oder fünf Megabyte mit. Liegen mehrere solcher Dateien auf einer Seite, dauert der Aufbau spürbar länger, gerade auf dem Smartphone im Mobilfunknetz. Google bewertet die Ladezeit als Rankingfaktor, und das gilt besonders für die mobile Ansicht. Bilder sind dabei meist der größte Hebel, weil sich an ihnen am einfachsten viel Datenvolumen einsparen lässt.
Die richtigen Maße: Nicht größer als nötig
Der häufigste Fehler ist, Bilder in einer viel höheren Auflösung einzubinden, als sie tatsächlich angezeigt werden. Ein Foto, das auf der Seite 800 Pixel breit dargestellt wird, muss nicht in 4000 Pixel Breite hochgeladen werden. Der Browser skaliert es zwar herunter, lädt aber trotzdem die volle Datei.
Gehen Sie deshalb in zwei Schritten vor:
- Prüfen Sie, wie breit das Bild auf der Seite maximal angezeigt wird.
- Skalieren Sie die Datei vor dem Hochladen auf diese Breite, mit etwas Reserve für hochauflösende Displays.
Allein dieser Schritt halbiert bei vielen Websites das Datenvolumen, ohne dass sich an der sichtbaren Qualität etwas ändert.
Das richtige Format: WebP und AVIF statt JPEG
Lange waren JPEG und PNG die Standardformate. Heute gibt es bessere Alternativen. WebP liefert bei gleicher Qualität deutlich kleinere Dateien als JPEG, oft 25 bis 35 Prozent weniger. AVIF geht noch einen Schritt weiter und komprimiert in vielen Fällen noch stärker.
Eine grobe Orientierung:
- WebP eignet sich als solider Standard für fast alle Fotos und Grafiken und wird von allen modernen Browsern unterstützt.
- AVIF bietet die beste Komprimierung, ist aber etwas rechenintensiver beim Erzeugen.
- PNG bleibt sinnvoll, wo Transparenz und absolute Schärfe nötig sind, etwa bei Logos.
- SVG ist die beste Wahl für Icons und einfache Grafiken, weil es ohne Pixel auskommt und beliebig skaliert.
Moderne Systeme können mehrere Formate hinterlegen, sodass der Browser automatisch das beste verfügbare wählt. So bleibt die Seite auch in älteren Browsern funktionsfähig.
Komprimierung: Qualität gezielt absenken
Komprimierung bedeutet, überflüssige Bildinformationen zu entfernen, die das Auge ohnehin kaum wahrnimmt. Bei JPEG und WebP lässt sich ein Qualitätswert einstellen, meist zwischen 0 und 100. Ein Wert um 75 bis 82 ist für die meisten Fotos ein guter Kompromiss: deutlich kleinere Datei, kein sichtbarer Verlust.
Verlassen Sie sich nicht allein auf die Zahl, sondern schauen Sie sich das Ergebnis an. Bei Flächen mit feinen Verläufen oder Text im Bild kann eine zu starke Komprimierung Artefakte erzeugen. Hier lohnt es sich, den Wert etwas höher zu setzen. Werkzeuge zur Komprimierung gibt es kostenlos im Browser, als Programm oder direkt im Content-Management-System.
Responsive Bilder: Für jedes Gerät die passende Größe
Ein Smartphone braucht ein kleineres Bild als ein großer Desktop-Monitor. Mit responsiven Bildern hinterlegen Sie mehrere Größen derselben Datei, und der Browser lädt automatisch die passende. Das spart auf mobilen Geräten erheblich Datenvolumen und beschleunigt den Seitenaufbau dort, wo es am meisten zählt.
Technisch geschieht das über die Attribute srcset und sizes im HTML. Viele Content-Management-Systeme und moderne Frameworks erzeugen diese Varianten automatisch, sobald ein Bild hochgeladen wird. Ein sauberes responsives Webdesign bezieht die Bilder von Anfang an in diese Logik ein, statt sie nachträglich anzupassen.
Lazy Loading und CDN: Laden zur richtigen Zeit, vom richtigen Ort
Zwei Techniken setzen am Ende des Prozesses an. Beim Lazy Loading werden Bilder erst geladen, wenn der Nutzer sie tatsächlich erreicht. Bilder weit unten auf der Seite blockieren so nicht den ersten Seitenaufbau. Wichtig ist, das sichtbare Bild ganz oben davon auszunehmen, damit es nicht verzögert erscheint.
Ein Content Delivery Network liefert Ihre Bilder von einem Server in der Nähe des Besuchers aus. Das verkürzt die Übertragungswege und entlastet Ihren eigenen Server. Für Websites mit überregionalem Publikum oder vielen Bildern ist das ein spürbarer Gewinn. Wie diese Bausteine ins Gesamtbild der Performance passen, zeigt unser Beitrag zum Thema Website-Ladezeit verbessern.
Häufige Fehler
- Bilder in voller Kameraauflösung hochladen und vom Browser herunterskalieren lassen
- weiterhin nur JPEG und PNG verwenden, obwohl WebP und AVIF bereitstehen
- die Qualität so stark absenken, dass sichtbare Artefakte entstehen
- Lazy Loading auch auf das oberste sichtbare Bild anwenden und so den Bildaufbau verzögern
- den Alt-Text vergessen, der Bildern für Suchmaschinen und Barrierefreiheit Bedeutung gibt
Wer diese Punkte vermeidet, holt aus jedem Bild die maximale Geschwindigkeit bei minimaler Dateigröße heraus.
So bauen Sie ein dauerhaftes System
Einmalige Optimierung hilft, aber sie verpufft, wenn beim nächsten Upload wieder unkomprimierte Dateien landen. Sinnvoller ist ein fester Ablauf, in dem jedes neue Bild automatisch skaliert, ins richtige Format gebracht und komprimiert wird. Genau das gehört für uns zu einem soliden Webdesign, denn eine schnelle Website ist kein einmaliges Projekt, sondern das Ergebnis sauberer Prozesse. Weitere Beiträge rund um Tempo und Technik finden Sie in unserem Performance-Blog.
Wenn Sie wissen möchten, wie viel Geschwindigkeit in Ihrer Website steckt, melden Sie sich über unser Kontaktformular. Wir prüfen Ihre Bilder und Ladezeiten und zeigen Ihnen für Ihr Projekt in der Region Neckar-Alb, wo die größten Reserven liegen.