Warum Ihre Website langsam ist – Eine Checkliste zur Bildoptimierung für 2026
Betreiben Sie Ihre Website jetzt über Google PageSpeed Insights. Machen Sie weiter, öffnen Sie einen neuen Tab und machen Sie es. Wenn Ihr Leistungswert unter 80 liegt, ist die Wahrscheinlichkeit groß, dass es sich bei der Top-Empfehlung um Bilder handelt. Nicht optimierte Bilder tragen am meisten zu langsamen Websites bei – sie machen durchweg mehr Seitengewicht aus als JavaScript, CSS, Schriftarten und HTML zusammen. Die gute Nachricht ist, dass die Bildoptimierung auch die einfachste Lösung für die Leistung ist. Keine Codeänderungen, keine Neukonfiguration des Servers, kein Debuggen. Einfach intelligentere Bilder.
Bilder sind das Problem Nr. 1 beim Seitengewicht
Laut Daten des HTTP-Archivs machen Bilder etwa 42 % des Gesamtgewichts einer durchschnittlichen Webseite aus. Die mittlere Webseite ist etwa 2,3 MB groß und etwa 1 MB davon sind Bilder. Aber das ist der Mittelwert – schlecht optimierte Websites stellen routinemäßig 5–15 MB Bilder pro Seite bereit. Jedes zusätzliche Megabyte verlängert die Ladezeit bei einer typischen Mobilfunkverbindung um etwa 1–2 Sekunden. Bei 4G dauert es 8–12 Sekunden, bis eine 10-MB-Seite vollständig geladen ist, und die meisten Besucher brechen nach 3 Sekunden ab.
Das Problem ist fast immer eines von zwei Dingen: Bilder, die zu groß dimensioniert sind (ein 4000-Pixel-Bild wird in einem 800-Pixel-Container bereitgestellt) oder Bilder, die nicht ausreichend komprimiert sind (Speicherung bei 100 % Qualität, wenn 80 % optisch identisch sind). Oft ist es beides.
Checklistenpunkt 1 – Stellen Sie Bilder in der richtigen Größe bereit
Dies ist die Optimierung mit der höchsten Auswirkung. Wenn Ihr CSS ein Bild mit einer Breite von 800 Pixeln anzeigt, sollte die Bilddatei etwa 800 Pixel breit sein – nicht 4000 Pixel. Durch die Bereitstellung übergroßer Bilder wird Bandbreite für Pixel verschwendet, die vom Browser weggeworfen werden. Öffnen Sie die Entwicklertools Ihres Browsers, überprüfen Sie Ihre Bilder und vergleichen Sie die angezeigte Größe mit der natürlichen (Datei-)Größe. Wenn die natürliche Größe mehr als das Zweifache der angezeigten Größe beträgt, verschwenden Sie Daten.
Für responsive Designs, bei denen das Bild auf verschiedenen Bildschirmen möglicherweise in unterschiedlichen Größen angezeigt wird, verwenden Sie das srcset-Attribut, um mehrere Bildgrößen bereitzustellen. Der Browser wählt das beste für den Bildschirm des Besuchers aus. Ein gängiger Ansatz: Stellen Sie Bilder mit einer Breite von 400 Pixel, 800 Pixel, 1200 Pixel und 1600 Pixel bereit. Erstellen Sie diese Größenvarianten von Ihrem Original und überlassen Sie die Auswahl dem Browser.
Checklistenpunkt 2 – Verwenden Sie Formate der nächsten Generation
Wenn Sie im Jahr 2026 immer noch nur JPEG- und PNG-Dateien bereitstellen, bleiben 25–50 % der potenziellen Einsparungen bei der Dateigröße ungewiss. WebP verfügt über eine nahezu universelle Browserunterstützung (über 97 % weltweit) und erzeugt Dateien, die bei gleicher Qualität 25–35 % kleiner als JPEG sind. AVIF erreicht eine noch bessere Komprimierung – etwa 50 % kleiner als JPEG – und die Browserunterstützung liegt jetzt bei über 92 %.
Die Umsetzung ist unkompliziert: Konvertieren Sie Ihre Bilder in WebP (oder AVIF, wenn Ihre Plattform dies unterstützt). Für maximale Kompatibilität verwenden Sie das HTML-Bildelement, um AVIF an Browser bereitzustellen, die es unterstützen, WebP als Fallback und JPEG als endgültigen Fallback. Die meisten modernen CMS-Plattformen und statischen Site-Generatoren verfügen über Plugins oder integrierte Funktionen, um dies automatisch zu erledigen.
Checklistenpunkt 3 – Lazy Loading implementieren
Lazy Loading verzögert das Laden von Bildern, die sich unterhalb des sichtbaren Ansichtsfensters befinden. Der Browser des Besuchers lädt Bilder nur herunter, wenn er in deren Nähe scrollt, anstatt alle Bilder auf der Seite auf einmal zu laden. Dies verkürzt die anfängliche Ladezeit der Seite erheblich, insbesondere auf Seiten mit vielen Bildern wie Portfolios, Galerien oder langen Blogbeiträgen. In HTML ist es so einfach wie das Hinzufügen wird geladen="faul" zu Ihren IMG-Tags. Die meisten CMS-Plattformen tun dies mittlerweile standardmäßig.
Wichtiger Vorbehalt: Laden Sie keine Bilder verzögert, die im ursprünglichen Ansichtsfenster (above thefold) sichtbar sind. Ihr Heldenbild, Ihr Logo und alle Bilder, die ohne Scrollen sichtbar sind, sollten sofort geladen werden. Das verzögerte Laden dieser Inhalte schadet tatsächlich Ihrem LCP-Score, da es die Darstellung der wichtigsten visuellen Inhalte verzögert.
Checklistenpunkt 4 – Komprimieren Sie mit der richtigen Qualitätsstufe
Die meisten Bilder im Internet können ohne spürbaren Verlust auf eine Qualität von 75–85 % komprimiert werden. Der Unterschied zwischen 100 % und 85 % Qualität in einem JPEG ist normalerweise für das menschliche Auge unsichtbar, aber der Dateigrößenunterschied beträgt 2-3x. Lassen Sie Ihre Bilder durch einen Kompressor laufen und vergleichen Sie das Vorher und Nachher. Sie werden überrascht sein, wie viel kleiner Sie sie ohne sichtbare Verschlechterung machen können.
Testtools für die Bildleistung
Google PageSpeed Insights: identifiziert bestimmte Bilder, die optimiert werden müssen, und schätzt Einsparungen. GTmetrix: zeigt Wasserfalldiagramme an, sodass Sie genau sehen können, welche Bilder die Geschwindigkeit verlangsamen. Webseitentest: Bietet Filmstreifenansichten, um zu sehen, wann Bilder während des Ladens erscheinen. Chrome DevTools: Auf der Registerkarte „Netzwerk“ können Sie Anfragen nach Größe sortieren, um die größten Täter zu finden.
Checklistenpunkt 5 – Erwägen Sie ein CDN für Bilder
Ein Content Delivery Network speichert Kopien Ihrer Bilder auf Servern auf der ganzen Welt, sodass Besucher Bilder von einem Server in ihrer Nähe herunterladen und nicht von Ihrem Ursprungsserver am anderen Ende der Welt. Bei Websites mit einem globalen Publikum kann ein CDN die Ladezeiten von Bildern um 40–60 % reduzieren. Viele CDN-Anbieter bieten auch eine automatische Bildoptimierung an – sie passen die Größe an, komprimieren und konvertieren Formate im Handumdrehen, basierend auf dem Gerät und dem Browser des Besuchers.
Cloudflare (kostenloses Kontingent verfügbar), BunnyCDN und Amazon CloudFront sind beliebte Optionen. Wenn Sie WordPress verwenden, kann allein der kostenlose Plan von Cloudflare einen spürbaren Unterschied machen. Für statische Websites auf Plattformen wie Netlify oder Vercel ist die CDN-Bereitstellung integriert.
Die vollständige Checkliste in der Reihenfolge ihrer Auswirkung: (1) Bilder auf Anzeigegröße anpassen, (2) mit 75–85 % Qualität komprimieren, (3) in WebP oder AVIF konvertieren, (4) Lazy Loading für Below-Fold-Bilder implementieren, (5) responsives srcset für mehrere Bildschirmgrößen verwenden, (6) über ein CDN bereitstellen, (7) geeignete Cache-Header festlegen, damit wiederkehrende Besucher Bilder nicht erneut herunterladen. Arbeiten Sie diese Liste durch und führen Sie nach jedem Schritt PageSpeed Insights aus. Die meisten Websites verzeichnen allein durch die Schritte 1 bis 3 die größte Verbesserung.
