Bildoptimierung: Wenn zwischen Kilobytes und Pixeln Millisekunden entscheiden

Nicht optimierte Bilder sind wie Ziegelsteine, die an den Flügeln Ihrer Website hängen. Während sich die Seite mühsam zu den Besuchern schleppt, durchlaufen diese die Stadien von Hoffnung („gleich ist es soweit...“) bis zur Resignation („ich gehe zurück zu Google“) und kehren nie wieder zurück.

Zum Glück gibt es bewährte Tricks, um dieses digitale Ballast abzuwerfen und Ihre Website fliegen zu lassen.

Die Datenmenge von Bildern ist entscheidend, da diese oft das LCP-Element darstellen, das die Ladegeschwindigkeit direkt beeinflusst.

Die Bildoptimierung ist eine grundlegende Best-Practice, die Sie nie falsch machen können, sei es bei der Optimierung von WordPress, Shoptet, Drupal oder anderen CMS.

1. WebP und AVIF: warum JPEG und PNG in Rente schicken#

Wenn Sie immer noch Bilder in Formaten des letzten Jahrtausends servieren, wird es Zeit für ein Upgrade. Moderne Formate wie WebP und AVIF bieten deutlich bessere Kompression bei gleichbleibender Qualität.

WebP: Dieses Format von Google wirkt wie ein kleines Wunder. In einem der Audits von PageSpeed.ONE haben wir durch die einfache Umstellung von Bannern auf WebP deren Größe um 60 % reduziert. Wenn Sie sich um ältere Browser sorgen, können Sie eine Fallback-Lösung verwenden:

<picture>
	<source srcset="bild.webp" type="image/webp" />
	<img src="bild.jpg" alt="Bildbeschreibung" />
</picture>

AVIF oder JPEG XL sind noch neuere Formate mit noch besserer Kompression. AVIF kann 30–40 % mehr Daten sparen als WebP. Die Unterstützung in Browsern wächst täglich, aber ein Fallback für ältere Browser ist immer erforderlich. Eine detaillierte Anleitung zur Implementierung von AVIF finden Sie in unserem Artikel.

Je kleiner, desto besser. Datenvolumen von Bildern in einem der Tests.

2. Experimentieren Sie mit der Qualität: 100 % retten die Welt nicht#

Das menschliche Auge ist kein Scanner und die meisten Menschen können kaum den Unterschied zwischen einem auf 80 % komprimierten Bild und 100 % Qualität erkennen. Die Dateigröße kann jedoch bis zum Doppelten variieren. Experimentieren Sie mit den Qualitätseinstellungen, bis Sie das ideale Verhältnis zwischen Aussehen und Größe finden.

Für einfache Tests können Sie das Tool Squoosh verwenden, das den Vergleich verschiedener Kompressionsstufen in Echtzeit ermöglicht.

Das Squoosh-Tool ist das Schweizer Taschenmesser der Bildoptimierer.

3. Lazy Loading: warum laden, was nicht zu sehen ist?#

Warum sollte ein Besucher Bilder aus dem Footer herunterladen, wenn er sie noch nicht einmal gesehen hat? Das Prinzip des Lazy Loading stellt sicher, dass Bilder erst geladen werden, wenn der Nutzer beim Scrollen in ihre Nähe kommt.

Die Implementierung ist einfacher als sich eine PIN zu merken:

<img src="bild.webp" alt="Wird geladen, wenn nötig" loading="lazy" />

4. Passende Dimensionen: manchmal zählt die Größe#

4K-Bilder für Miniaturansichten in Briefmarkengröße hochzuladen, ist wie mit einem LKW Brötchen zu holen.

Der Browser verkleinert das Bild brav, aber der Nutzer hat bereits alle unnötigen Daten heruntergeladen. Überprüfen Sie vor dem Hochladen jedes Bildes, in welchen Dimensionen es tatsächlich angezeigt wird.

5. Automatische Optimierung: weniger Daten, gleicher Eindruck#

Neben dem Format und den Dimensionen können Sie die Dateigröße weiter mit spezialisierten Tools reduzieren.

Dienste wie Cloudflare oder Cloudinary können all Ihre Bilder automatisch optimieren. Für Open-Source-Enthusiasten gibt es zum Beispiel MozJPEG, das mit JPEG-Dateien wahre Wunder vollbringen kann.

Wenn es Ihnen um einzelne Bilder geht, liefern TinyPNG/TinyJPG oder die hervorragende MacOS-App OptImage gute Ergebnisse.

6. Vermeiden Sie Layoutverschiebungen: Bilddimensionen sind nicht optional#

Wenn der Browser die Dimensionen eines Bildes nicht kennt, kann es beim Laden zu einer Verschiebung des Inhalts kommen. Dieses Phänomen (Cumulative Layout Shift, oder CLS) wird von Google nicht nur ungern gesehen, sondern direkt in die Bewertung der Nutzererfahrung einbezogen. Die Lösung ist einfach: immer die Attribute width und height angeben:

Alternativ können Sie das Seitenverhältnis mit CSS definieren, damit das Layout nicht wie ein Kartenhaus zusammenbricht.

Es ist immer gut, weitere Tricks zur Optimierung von CLS in der Hinterhand zu haben.

<img src="bild.jpg" alt="Stabiles Bild" width="600" height="400" />

7. CDN: liefern Sie Bilder von der nächsten Haltestelle#

Content Delivery Networks (CDN) sind wie Verteilzentren für Ihre Bilder, die über die ganze Welt verteilt sind. Ein Besucher aus Prag erhält die Dateien aus Mitteleuropa, während ein Nutzer aus Tokio sie vom asiatischen Server erhält. Das Ergebnis? Schnellere Ladezeiten für alle.

Bilder mögen keine langen Reisen. Deshalb gibt es CDN.

Warum sich überhaupt mit der Bildoptimierung beschäftigen?#

Die Geschwindigkeit einer Website ist nicht nur ein technisches Detail für Enthusiasten. Sie ist ein entscheidender Faktor, der die Geschäftsergebnisse beeinflusst:

• Schnellere Website = bessere Positionen in Suchmaschinen
• Schnellere Website = höhere Konversionsrate
• Schnellere Website = zufriedenere Besucher

Bei PageSpeed.ONE helfen wir unseren Kunden, beeindruckende Ergebnisse zu erzielen. Zum Beispiel hat Livesport durch die Optimierung des ersten Seitenaufbaus sein Speed Score in Google Ads von einem katastrophalen 1-2/10 auf perfekte 10/10 verbessert.

Unser PageSpeed PLUS-Monitoring ermöglicht es Ihnen, die Geschwindigkeit Ihrer Website kontinuierlich zu überwachen und Probleme mit Bildern sowie andere Schwierigkeiten, einschließlich des Datenvolumens von Bildern, rechtzeitig zu erkennen:

Ein paar Zeilen Code mehr, 1 MB weniger. Diese Diät tut Bildern besser als Keto den Menschen.

Gleichzeitig misst das Monitoring Ihre Website bei realen Nutzern und warnt Sie, wenn es zu einer Verlangsamung kommt.

Die Bildoptimierung ist eine Investition, die sich in Form von zufriedeneren Nutzern und besseren Geschäftsergebnissen auszahlt. Jedes eingesparte Kilobyte zählt.