Bilder richtig ausliefern: schneller ohne Qualitätsverlust

05.03.2018 · 10:11 · Oliver Misch · Kommentieren

Wenn eine Website langsam ist, sind Bilder fast immer ein großer Teil des Problems. Nicht, weil Bilder „schlecht“ sind, sondern weil sie oft komplett unvernünftig ausgeliefert werden: zu groß, falsches Format, keine sinnvollen Varianten, manchmal sogar unkomprimiert. Das Schöne daran: Bild-Optimierung ist einer der wenigen Performance-Hebel, der fast immer sofort spürbar ist, ohne dass man das Layout umbauen muss.

„Richtig ausliefern“ heißt nicht, alles kaputt zu komprimieren. Es heißt, die richtige Größe für den richtigen Kontext zu liefern. Nutzer wollen schnelle Seiten, aber niemand will matschige Bilder. Der Trick ist, beides zusammenzubekommen, und das ist heute leichter als viele denken.

Die häufigste Ursache: ein Bild, das viel größer ist als der Platz

Klassiker: Ein Hero-Bild wird in 3000px Breite hochgeladen, auf der Seite aber nur in 1200px angezeigt. Der Browser lädt trotzdem die volle Datei. Das ist verschenkte Bandbreite, besonders auf Mobile. Die wichtigste Regel lautet deshalb: Die ausgelieferte Bildbreite sollte ungefähr zur tatsächlich genutzten Breite passen. „Ungefähr“ heißt: lieber ein bisschen Puffer, aber nicht Faktor 3 oder 4.

Formate: JPEG, PNG, WebP, AVIF

Du musst nicht jedes Format bis ins Letzte ausreizen, aber ein Grundverständnis spart dir viel. JPEG ist für Fotos oft okay, aber nicht mehr die moderne Bestlösung. PNG ist sinnvoll für Transparenz oder scharfe Kanten, wird aber schnell groß. WebP ist in vielen Fällen ein guter Standard, weil es bei ähnlicher Qualität deutlich kleiner sein kann. AVIF ist oft noch kleiner, aber nicht überall gleich gut integriert, je nach Setup.

In der Praxis ist es selten sinnvoll, sich dogmatisch festzulegen. Wichtig ist: Fotos nicht als PNG. Icons nicht als riesige JPEGs. Und wenn du moderne Formate nutzen kannst, nutz sie, solange du eine saubere Fallback-Strategie hast.

Responsive Bilder: eine Datei pro Kontext statt „eine für alles“

Ein Bild für Desktop ist nicht automatisch richtig für Mobile. Auf einem Smartphone brauchst du oft nur einen Bruchteil der Pixel. Wenn du mehrere Größen bereitstellst, kann der Browser sich die passende Variante ziehen. Das ist keine Spielerei, sondern genau dafür gedacht, Daten zu sparen, ohne Qualität zu verlieren. Online-Dienste wie Ultrashare verkleinern Bilder ohne Qualitätsverlust.

Auch ohne komplizierte Pipelines kannst du hier viel gewinnen. Selbst zwei bis drei Varianten pro wichtigem Bild sind oft ein großer Schritt: klein, mittel, groß. Dazu ein klares Naming, damit du später nicht raten musst, was was ist.

Lazy Loading: sinnvoll, aber nicht blind

Bilder, die nicht im sichtbaren Bereich liegen, müssen nicht sofort geladen werden. Lazy Loading ist dafür eine solide Lösung. Der Fehler ist nur: manche machen alles lazy, auch das wichtigste Bild im ersten Viewport. Dann dauert es länger, bis überhaupt etwas „fertig“ wirkt. Ein guter Ansatz ist: Above-the-fold Bilder direkt laden, alles darunter kann lazy sein.

Kompression: lieber sauber einstellen als raten

Viele komprimieren nach Gefühl und übertreiben entweder oder machen gar nichts. Ein besserer Weg ist, einmal ein paar Werte zu testen und zu vergleichen. Kompression ist nicht nur „Qualität runter“, sondern oft auch „bessere Einstellungen“. Bei Fotos kannst du häufig ordentlich sparen, ohne dass es jemand sieht. Bei Grafiken musst du vorsichtiger sein.

Ein guter Test ist simpel: Bild auf der Seite ansehen, nicht im Editor. Auf Desktop und auf Mobile. Wenn du im normalen Betrachtungsabstand keine Artefakte siehst, bist du meistens richtig. Wenn du reinzoomst und Pixel suchst, verlierst du dich. Nutzer zoomen selten in Logos auf 400 Prozent.

Stabilität: feste Maße verhindern Layout-Sprünge

Performance ist nicht nur Ladezeit, sondern auch Ruhe. Wenn Bilder ohne definierte Größe geladen werden, verschiebt sich das Layout, sobald sie ankommen. Das nervt. Deshalb sollten Bilder im Layout immer ihren Platz „reserviert“ bekommen. Das geht über feste width/height oder über CSS-Container, die eine stabile Höhe haben.

Wer Bilder richtig ausliefert, macht eine Seite nicht nur schneller. Sie fühlt sich auch sauberer an. Und das ist am Ende der wichtigste Effekt: weniger Wartezeit, weniger Ruckeln, mehr Vertrauen.