Einleitung

Die größte Last bei der Website-Performance sind in der Regel Bilder. Die meisten Seiten sind langsam, weil:

• Bilder groß sind
• Nicht optimiert sind
• Im falschen Format vorliegen
• Falsch ausgeliefert werden

Doch es gibt eine entscheidende Wahrheit:

Bildoptimierung ist nicht nur eine Aufgabe für das Frontend oder ein Plugin.
Die Serverebene macht hier einen enormen Unterschied.

In diesem Artikel erklären wir vollständig und technisch:

• Wie wird Bildoptimierung auf der Serverseite durchgeführt?
• Was bietet Hosting in diesem Bereich?
• Welche Technologien machen wirklich einen Unterschied?
• Wie wirkt sich das auf Performance-Metriken aus?
• Wann ist es notwendig und was sollten Sie tun?

---

1. Das Kernproblem: Große Dateien

Eine typische Seite:

Inhalt	Durchschnittliche Größe
HTML	50 KB
CSS	150 KB
JS	300 KB
Bilder	2–5 MB

Bilder machen typischerweise:

70–90 % der gesamten Seitengröße aus

Deshalb gilt:

Eine Seite kann ohne optimierte Bilder nicht schnell sein

---

2. Was ist serverseitige Bildoptimierung?

Es ist der Prozess, bei dem die folgenden Operationen serverseitig durchgeführt werden, bevor die Bilder den Browser erreichen:

• Komprimierung
• Größenanpassung
• Formatkonvertierung
• Caching

Das heißt:

Originalbild → Server optimiert → Benutzer erhält die leichtgewichtige Version

---

3. Bildformatkonvertierung (AM KRITISCHSTEN)

Der größte Gewinn liegt hier:

Format	Größe	Qualität
JPEG	Mittel	Gut
PNG	Groß	Sehr gut
WebP	Klein	Sehr gut
AVIF	Sehr klein	Sehr gut

Was serverseitig möglich ist:

JPEG/PNG → WebP oder AVIF

Gewinn:

Format	Größenreduzierung
WebP	25–50 %
AVIF	40–70 %

---

4. On-the-Fly-Bildoptimierung

Eine der leistungsstärksten Techniken:

On-the-fly optimization

Das bedeutet:

• Das Bild wird bei der ersten Anfrage optimiert
• Es wird gecacht
• An nachfolgende Benutzer direkt ausgeliefert

Vorteil:

• Kein manueller Eingriff erforderlich
• Alle Bilder werden automatisch optimiert

---

5. Bildgrößenanpassung (Resizing)

Einer der größten Fehler:

Ein 2000-px-Bild in einem 400-px-Bereich anzeigen

Was serverseitig möglich ist:

Responsive image generation

Beispielgrößen:

• 320 px (Mobilgerät)
• 768 px (Tablet)
• 1200 px (Desktop)

Der Server liefert die richtige Größe.

Das:

• Reduziert die Bandbreite
• Beschleunigt LCP

---

6. Lazy Load + LQIP

Der Server:

• Generiert Platzhalter
• Generiert LQIP (Low Quality Image Placeholder)

Dadurch:

• Beschleunigt sich das erste Rendering
• Sinkt CLS
• Erhöht sich die wahrgenommene Geschwindigkeit

---

7. Bildoptimierung über CDN

CDNs erledigen das sehr gut:

Funktion	CDN
Formatkonvertierung	✅
Resize	✅
Komprimierung	✅
Edge-Cache	✅

Der wichtigste Vorteil:

Das optimierte Bild wird vom dem Benutzer nächstgelegenen Punkt geliefert

---

8. Komprimierung

Serverseitig:

• Verlustbehaftete Komprimierung (Lossy compression)
• Verlustfreie Komprimierung (Lossless compression)

Die richtige Einstellung:

Qualität 70–85 % → Bestes Qualitäts-/Größenverhältnis

---

9. Cache-Strategie

Caching ist für Bilder entscheidend:

Cache-Control: public, max-age=31536000

Dadurch:

• Wird dasselbe Bild nicht erneut geladen
• Sinkt die Serverlast
• Beschleunigt sich die Website

---

10. Auswirkungen auf Core Web Vitals

Metrik	Auswirkung der Bilder
LCP	Sehr hoch
CLS	Mittel
INP	Niedrig
TTFB	Indirekt

Insbesondere:

70 % des LCP ist in der Regel das Hero-Bild

Deshalb gilt: Bildoptimierung = SEO-Performance.

---

11. Welche Technologien sollte Hosting bieten?

Bei der Hosting-Auswahl achten Sie auf:

Funktion	Warum
WebP/AVIF-Unterstützung	Reduziert Dateigröße
Bildoptimierungs-Engine	Automatisierung
CDN-Integration	Globale Geschwindigkeit
Cache-System	Kein wiederholtes Laden
HTTP/3	Schnelle Übertragung
LiteSpeed Image Optimization	Automatische Optimierung

---

12. Realer Performance-Unterschied

Situation	Seitengröße	LCP
Keine Optimierung	4 MB	3,5 s
WebP	2,5 MB	2,5 s
WebP + Resize	1,5 MB	1,9 s
CDN + Volloptimierung	900 KB	1,4 s

---

13. Beste Architektur

Upload → Server optimiert → CDN-Cache → Schnelle Auslieferung vom dem Benutzer nächstgelegenen Punkt

Technischer Stack:

Image Optimization + Resize + WebP/AVIF + CDN + Cache + HTTP/3

---

14. Fragen an Ihren Hosting-Anbieter (WICHTIG)

Bei der Hosting-Auswahl fragen Sie:

• Gibt es automatische WebP/AVIF-Konvertierung?
• Gibt es On-the-fly-Bildoptimierung?
• Gibt es Bildgrößenanpassung?
• Ist CDN inklusive?
• Gibt es Edge-Cache?
• Wird HTTP/3 unterstützt?
• Verwalten Sie Cache-Header selbst?
• Gibt es LiteSpeed Image Optimization?

Wenn die meisten davon nicht vorhanden sind, wird es sehr schwer, die Website zu beschleunigen.

---

15. Technische Kontrollcheckliste

Prüfpunkt	Ziel
Sind Bilder im WebP-Format?	Ja
Ist AVIF aktiv?	Bevorzugt
Gibt es responsive Bilder?	Ja
Ist Lazy Load aktiviert?	Ja
Gibt es ein CDN?	Ja
Sind Cache-Header korrekt?	Ja
Ist das LCP-Bild optimiert?	Ja
Werden Bilder vom CDN geliefert?	Ja

---

16. Test-Tools

Tool	Was es misst
PageSpeed	LCP
GTmetrix	Waterfall
WebPageTest	Bildladen
Chrome DevTools	Dateigröße

Die wichtigste zu prüfende Metrik:

Largest Contentful Paint (LCP)

---

17. Häufigste Fehler

Fehler	Folge
Originale große Bilder	Langsame Website
Verwendung von PNG	Unnötig große Datei
Kein Resizing	Bandbreitenverschwendung
Kein Cache	Wiederholtes Laden
Kein CDN	Hohe Latenz
Kein WebP	Große Datei
Hero-Bild nicht optimiert	Schlechter LCP-Wert

---

18. Zusammenfassung

Technik	Auswirkung
WebP/AVIF	Sehr hoch
Resize	Sehr hoch
Komprimierung	Hoch
CDN	Sehr hoch
Cache	Hoch
HTTP/3	Mittel

---