Bilder fürs Web optimieren: WebP, Grösse und Ladezeit

Wenn eine Webseite langsam lädt, sind in den allermeisten Fällen die Bilder schuld. Ein einziges Foto, frisch aus der Kamera oder dem Handy geladen, kann mehr wiegen als der gesamte restliche Inhalt einer Seite zusammen. Und das Tückische daran: Man sieht es dem Bild nicht an. Auf dem Bildschirm wirkt es gleich gut, egal ob es fünf Megabyte oder fünfzig Kilobyte gross ist.

Die gute Nachricht ist, dass sich genau hier am leichtesten Tempo gewinnen lässt. Bilder optimieren fürs Web heisst im Kern: das Gewicht deutlich senken, ohne dass jemand einen Unterschied sieht. In diesem Beitrag zeige ich Ihnen, worauf es ankommt, ohne Fachjargon und so, dass Sie es selbst umsetzen können.

Warum schwere Bilder so teuer sind

Jedes Bild, das Ihre Seite anzeigt, muss zuerst über die Leitung zum Besucher wandern. Je schwerer die Datei, desto länger dauert das, besonders auf dem Handy bei mässigem Empfang, und genau dort schauen die meisten Menschen heute auf Ihre Seite.

Wartet jemand zu lange, ist er weg, bevor er überhaupt gesehen hat, was Sie anbieten. Schwere Bilder kosten also nicht nur Ladezeit, sondern echte Kunden. Und weil Google die Geschwindigkeit ins Ranking einrechnet, kosten sie zusätzlich Sichtbarkeit.

Die richtige Grösse: das halbe Geheimnis

Der häufigste Fehler ist erstaunlich simpel: Bilder werden in einer viel grösseren Auflösung hochgeladen, als sie je angezeigt werden. Ein Foto aus dem Handy ist oft 4000 Pixel breit. Auf Ihrer Webseite erscheint es vielleicht 800 Pixel breit. Den ganzen Rest schleppt der Besucher mit, ohne je etwas davon zu sehen.

Die Lösung ist, ein Bild auf die Grösse zu bringen, in der es tatsächlich gebraucht wird, bevor man es hochlädt. Ein paar Richtwerte:

• Ein grosses Bild über die ganze Breite braucht selten mehr als 1600 bis 2000 Pixel Breite.
• Ein Bild in einer Spalte oder einem Textblock kommt mit 800 bis 1000 Pixeln gut aus.
• Kleine Vorschaubilder brauchen oft nur 400 Pixel oder weniger.

Allein dieser Schritt, das Verkleinern auf die echte Anzeigegrösse, nimmt vielen Bildern schon den grössten Teil ihres Gewichts.

WebP: das moderne Format für Webbilder

Jahrelang waren JPG und PNG die Standardformate im Web. Sie funktionieren, sind aber nicht mehr die effizienteste Wahl. WebP ist ein neueres Format, das speziell fürs Web entwickelt wurde. Es liefert dieselbe Bildqualität bei deutlich kleinerer Dateigrösse, oft sind WebP-Bilder 25 bis 35 Prozent leichter als ein vergleichbares JPG.

Das Beste: Alle aktuellen Browser unterstützen WebP problemlos. Sie können ein JPG oder PNG in WebP umwandeln und dabei in den meisten Fällen viel Gewicht sparen, ohne dass das Auge einen Unterschied bemerkt. Es gibt kostenlose Online-Werkzeuge dafür, und auch viele Bildbearbeitungsprogramme exportieren inzwischen direkt nach WebP.

Komprimieren ohne sichtbaren Qualitätsverlust

Beim Speichern eines Bildes lässt sich ein Qualitätswert einstellen, meist als Prozentzahl. Hier liegt ein grosses Missverständnis: Viele glauben, sie müssten auf 100 Prozent speichern, damit es gut aussieht. Das stimmt nicht. Der Unterschied zwischen 100 und etwa 80 Prozent ist mit blossem Auge praktisch nicht zu erkennen, das Bild wird aber spürbar leichter.

Ein guter Bereich für Fotos liegt bei rund 75 bis 85 Prozent Qualität. Probieren Sie es aus: Speichern Sie dasselbe Bild einmal mit voller und einmal mit reduzierter Qualität und vergleichen Sie. In den allermeisten Fällen sehen Sie keinen Unterschied, aber die Dateigrösse hat sich halbiert oder mehr.

Zwei Hebel, die nochmals helfen

Zwei weitere Dinge bringen ohne grossen Aufwand viel:

• Lazy Loading: Bilder, die erst weiter unten auf der Seite liegen, müssen nicht sofort geladen werden, sondern erst, wenn der Besucher hinscrollt. So lädt der sichtbare Teil der Seite schneller.
• Höhe und Breite angeben: Wenn im Code festgelegt ist, wie gross ein Bild wird, weiss der Browser von Anfang an, wie viel Platz er reservieren muss. Das verhindert das nervige Verrutschen des Layouts beim Laden.

Was bringt das konkret?

Nehmen wir ein typisches Beispiel: ein Foto direkt aus dem Handy, vier Megabyte schwer. Verkleinert auf die echte Anzeigegrösse, umgewandelt in WebP und sinnvoll komprimiert, landet dieselbe Aufnahme oft bei 150 bis 250 Kilobyte, sichtbar identisch, aber rund zwanzigmal leichter. Rechnen Sie das auf eine Seite mit zehn Bildern hoch, und Sie verstehen, warum Bildoptimierung der grösste einzelne Hebel für die Ladezeit ist.

Bilder optimieren fürs Web ist keine Geheimwissenschaft. Mit der richtigen Grösse, dem Format WebP und einer vernünftigen Komprimierung holen Sie das meiste heraus, und Ihre Besucher danken es Ihnen mit mehr Geduld und mehr Vertrauen.

Wenn Sie wissen möchten, was bei Ihrer aktuellen Seite an Tempo drinliegt, schaue ich mir das gern an. Melden Sie sich einfach über das Kontaktformular, oder stöbern Sie in weiteren Beiträgen rund um schnelle, saubere Webseiten.