Bilder für die Website optimieren: Grundlagen für Einsteiger

Wenn eine Website langsam lädt, suchen viele zuerst beim Hosting, beim Theme oder beim Server. Die Ursache ist meistens viel einfacher: Bilder, die zu groß, im falschen Format oder ohne jede Vorbereitung hochgeladen wurden. Nach über einem Jahrzehnt in der Webentwicklung und mehr als 100 Projekten für kleine und mittlere Unternehmen in Deutschland und Polen ist das der mit Abstand häufigste Befund, wenn ich eine neue Website zur Hand bekomme.

Diesen Leitfaden habe ich für alle geschrieben, die eine Website oder einen Onlineshop betreiben, aber keinen technischen Hintergrund haben. Sie müssen kein Entwickler sein, um die Grundlagen zu verstehen - und diese Grundlagen helfen Ihnen, die richtigen Entscheidungen zu treffen, egal welches System Sie nutzen.

Warum Bilder die Ladezeit so stark beeinflussen

Bilder sind das Schwergewicht jeder Webseite. Während ein normaler HTML-Text wenige Kilobyte groß ist, kann ein einziges unkomprimiertes Foto mehrere Megabyte wiegen. Wenn eine Seite fünf oder zehn solcher Bilder lädt, summiert sich das schnell auf eine Datenmenge, die ein Mobilgerät über das Mobilfunknetz mehrere Sekunden beschäftigt.

Und Sekunden zählen. Studien aus der Webentwicklung zeigen seit Jahren konsistent: Je länger eine Seite braucht, um sichtbar zu werden, desto mehr Besucher verlassen sie, bevor sie überhaupt etwas sehen. Für einen Onlineshop bedeutet das direkt entgangenen Umsatz.

Das Gute: Bildoptimierung ist kein Hexenwerk. Es gibt vier Grundprinzipien - das richtige Format wählen, Komprimierung anwenden, korrekte Abmessungen verwenden und Lazy Loading aktivieren. Wenn Sie diese vier Punkte kennen und konsequent anwenden, haben Sie das Wichtigste bereits erledigt.

Die drei wichtigsten Bildformate - und wann man welches nutzt

Wer Bilder für das Web vorbereitet, begegnet unweigerlich drei Formaten: JPEG, PNG und WebP. Sie unterscheiden sich grundlegend darin, wie sie Bildinformationen speichern - und das macht sie für unterschiedliche Anwendungsfälle geeignet.

JPEG ist das älteste der drei Formate und noch immer weit verbreitet. Es eignet sich hervorragend für Fotos, weil es mit verlustbehafteter Komprimierung arbeitet: Es entfernt Bildinformationen, die das menschliche Auge in einem komplexen Foto kaum wahrnimmt, und erreicht damit kleine Dateigrößen. Was JPEG nicht kann: Transparenz. Ein Produktfoto auf weißem Hintergrund funktioniert problemlos, aber ein Logo, das auf verschiedenen Hintergrundfarben platziert wird, gehört nicht ins JPEG-Format.

PNG speichert Bildinformationen verlustfrei und unterstützt Transparenz. Damit ist es die richtige Wahl für Logos, Icons, Screenshots und alle Grafiken, die harte Kanten und klare Farben haben - oder eben einen transparenten Hintergrund brauchen. Der Nachteil: Für Fotos ist PNG meist deutlich größer als JPEG, weil es keine Details entfernt.

WebP ist das modernste der drei Formate und kombiniert die Stärken der beiden anderen: Es unterstützt Transparenz wie PNG, erreicht aber bei Fotos kleinere Dateigrößen als JPEG bei vergleichbarer Qualität. Alle modernen Browser unterstützen WebP, und viele Content-Management-Systeme konvertieren Bilder inzwischen automatisch in dieses Format.

Eine einfache Faustregel: Wenn Sie ein Foto haben, nehmen Sie WebP - oder JPEG als Fallback. Wenn Sie eine Grafik, ein Logo oder ein Bild mit transparentem Hintergrund haben, nehmen Sie WebP oder PNG.

Was Bildkomprimierung bedeutet - verlustfrei und verlustbehaftet

Komprimierung ist der Prozess, bei dem die Datenmenge eines Bildes reduziert wird, ohne die sichtbare Qualität unnötig zu verschlechtern. Das Prinzip lässt sich gut an einem Alltagsbeispiel erklären: Stellen Sie sich vor, Sie packen einen Koffer. Verlustfreies Packen bedeutet, Sie rollen die Kleidung enger zusammen - alles ist noch da, der Koffer ist kleiner. Verlustbehaftetes Packen bedeutet, Sie lassen ein Ersatz-T-Shirt zuhause - kaum jemand würde es vermissen, aber der Koffer ist spürbar leichter.

Verlustfreie Komprimierung (Lossless) reduziert die Dateigröße, indem sie redundante Datenmuster im Bild effizienter codiert. Das Ergebnis ist pixelgenau identisch mit dem Original. Die Einsparung ist real, aber oft moderat - typischerweise zwischen 10 und 30 Prozent. PNG-Dateien werden immer verlustfrei komprimiert.

Verlustbehaftete Komprimierung (Lossy) geht einen Schritt weiter: Sie entfernt Bildinformationen, die für das menschliche Auge bei normaler Betrachtung nicht wahrnehmbar sind. Bei einem Foto mit vielen Farbübergängen - zum Beispiel einem Himmel oder einer Holztextur - merkt man den Unterschied bei mittlerer Komprimierungsstufe praktisch nicht. Die Einsparung kann dagegen enorm sein: Aus einem 3 MB großen Originalfoto können 200 KB werden.

Für Fotos auf Websites ist verlustbehaftete Komprimierung fast immer die richtige Wahl. Eine Qualitätseinstellung von 75 bis 85 Prozent (bei einem Tool, das diese Einstellung anbietet) ist für die meisten Verwendungszwecke der optimale Kompromiss.

Warum die Anzeigedimension so wichtig ist

Hier begegne ich einem Missverständnis, das ich in fast jedem Projekt korrigieren muss: Viele Websitebetreiber glauben, dass ein Bild automatisch kleiner wird, wenn es kleiner angezeigt wird. Das ist leider falsch.

Der Browser bekommt zunächst die vollständige Originaldatei - egal wie groß oder klein das Bild auf der Seite dargestellt wird. Erst nachdem die komplette Datei heruntergeladen wurde, skaliert er sie auf die tatsächliche Anzeigebreite. Das bedeutet: Wenn Sie ein 4000 Pixel breites Kamerafoto hochladen und es auf der Seite nur 800 Pixel breit anzeigen, wird trotzdem das 4000-Pixel-Bild übertragen. Sie belasten die Ladezeit Ihrer Besucher mit dem Fünffachen der notwendigen Datenmenge.

Die Lösung ist einfach: Bilder vor dem Hochladen auf die tatsächliche Anzeigebreite skalieren. Wenn ein Bild im Layout maximal 1200 Pixel breit angezeigt wird, reicht ein Bild mit 1200 Pixeln Breite völlig aus.

Für die Praxis: Wenn Sie eine professionelle Webseite betreiben, schauen Sie in Ihrem CMS nach, welche Bildgrößen das Theme tatsächlich verwendet. Diese Maße sind Ihr Ausgangspunkt.

Was Lazy Loading ist - und warum es funktioniert

Stellen Sie sich vor, Sie betreten ein Restaurant und der Kellner bringt Ihnen sofort alle Gerichte der Speisekarte auf den Tisch - auch alles, was Sie vielleicht nie bestellen werden. Genau das passiert ohne Lazy Loading: Der Browser lädt beim Seitenaufruf alle Bilder herunter, auch jene, die sich ganz unten auf der Seite befinden und der Besucher möglicherweise nie zu Gesicht bekommt.

Lazy Loading kehrt dieses Prinzip um. Bilder werden erst dann geladen, wenn sie in den sichtbaren Bereich des Bildschirms scrollen. Was oben auf der Seite steht, wird sofort geladen. Was weiter unten liegt, wartet - und wird erst geladen, wenn der Nutzer dorthin scrollt.

Das Ergebnis: Die Seite zeigt sich dem Besucher viel schneller, weil beim ersten Aufruf nur ein Bruchteil der Bilder übertragen werden muss. Wer die Seite verlässt, ohne nach unten zu scrollen, hat niemals Daten für Bilder verbraucht, die er nie gesehen hätte.

Moderne Browser unterstützen Lazy Loading nativ - es muss also kein aufwendiges JavaScript mehr eingebunden werden. In HTML genügt ein einfaches Attribut im Bild-Tag, und die meisten Content-Management-Systeme aktivieren diese Funktion inzwischen standardmäßig oder auf Knopfdruck.

Für die Beziehung zwischen Lazy Loading und Suchmaschinenoptimierung gibt es eine häufige Frage: Sehen Suchmaschinen Bilder mit Lazy Loading überhaupt? Ja - der Google-Bot versteht natives Lazy Loading korrekt und indexiert diese Bilder ohne Probleme. Mehr über die technischen Grundlagen einer suchmaschinenoptimierten Präsenz lesen Sie in unserem Artikel zu SEO-Grundlagen.

Das Zusammenspiel der vier Grundprinzipien

Jedes der vier Prinzipien - richtiges Format, Komprimierung, korrekte Abmessungen, Lazy Loading - bringt für sich allein bereits einen Vorteil. Zusammen angewendet multiplizieren sie sich.

Ein konkretes Beispiel: Eine Produktseite in einem Onlineshop hatte ursprünglich sechs Produktfotos mit insgesamt 18 MB. Nach dem Skalieren auf die tatsächliche Anzeibreite, Konvertierung in WebP und verlustbehafteter Komprimierung waren es 1,8 MB. Mit Lazy Loading auf den vier Bildern unterhalb der ersten Bildschirmansicht wurden beim ersten Aufruf noch etwa 600 KB geladen. Die Ladezeit sank von über acht Sekunden auf unter zwei Sekunden - ohne eine einzige Zeile Code zu ändern, nur durch die korrekte Vorbereitung der Bilddateien.

Für Betreiber von Onlineshops ist dieser Punkt besonders relevant: Produktseiten mit vielen Bildern profitieren stärker von Bildoptimierung als fast jeder andere Seitentyp.

Die grundlegende Idee hinter all diesen Maßnahmen ist dieselbe: Der Browser soll so wenig wie möglich herunterladen müssen, um dem Besucher genau das anzuzeigen, was er sehen soll - in bestmöglicher Qualität. Alles andere ist überflüssiges Gewicht.

Wenn Sie sich fragen, ob Ihre bestehende Website an diesem Punkt Nachholbedarf hat, sprechen Sie mich gerne an - eine erste Einschätzung ist schnell gemacht. Meine Kontaktseite finden Sie hier.

Weitere Grundlagenartikel, die gut zu diesem Thema passen: Was es mit Domains auf sich hat und wie Webhosting funktioniert - beides hat direkten Einfluss darauf, wie schnell Ihre Bilder beim Besucher ankommen.