Bilder für eine schnelle Website vorbereiten: die Checkliste in Reihenfolge der Wirkung

Wenn eine Website langsam lädt, liegt der erste Verdacht meist beim Hosting, beim Code oder bei einem schwergewichtigen Plugin — und manchmal liegt das Problem tatsächlich dort. Aber in der überwiegenden Mehrheit der realen Fälle sind die Bilder der Hauptschuldige: Ein paar unoptimierte Fotos können mehr wiegen als der gesamte Rest der Seite zusammen. Bevor du den Server wechselst oder Code anfasst, lohnt sich ein Blick auf diese Checkliste.

Warum Bilder fast immer der Flaschenhals sind

HTML, CSS und JavaScript einer normalen Seite wiegen zusammen bei den meisten Websites nur wenige Hundert Kilobyte. Bilder dagegen übersteigen leicht mehrere Megabyte, wenn sie nicht optimiert wurden — ein einziges unkomprimiertes Hero-Bild kann mehr wiegen als der gesamte Rest der Seite. Deshalb bringt die Bildoptimierung meist die größte Geschwindigkeitsverbesserung für den geringsten Aufwand, verglichen mit Code-Optimierungen, die viel mehr Arbeit für eine kleinere Ersparnis erfordern.

Die Checkliste, nach Wirkung sortiert

1) Das richtige Format. WebP oder AVIF statt standardmäßig JPG oder PNG — bei vergleichbarer visueller Qualität wiegen sie meist deutlich weniger. Wir behandeln das ausführlich imFormate-Guide.

2) Pixelgröße an den tatsächlichen Platz angepasst. Wird das Bild mit 800 Pixeln Breite angezeigt, ergibt es keinen Sinn, eine 4000-Pixel-Datei auszuliefern — der Browser muss diesen ganzen Datenüberschuss herunterladen und verarbeiten, nur um ihn danach visuell wieder zu verkleinern.

3) Kompression im richtigen Maß. Weder unkomprimiert (unnötiges Gewicht) noch überkomprimiert (sichtbare Artefakte) — der Qualitätsbereich, der das beste Gleichgewicht bietet, wird im Artikel über wie man das Gewicht eines JPGs reduziert, ohne Qualität zu verlieren behandelt.

4) Lazy Loading. Das native HTML-Attribut loading="lazy" verhindert, dass der Browser Bilder lädt, die der Nutzer nie zu Gesicht bekommt — ganz ohne externe Bibliothek, nur indem man dieses Attribut zu Bildern hinzufügt, die außerhalb des anfänglichen Sichtbereichs liegen.

5) Im HTML deklarierte Abmessungen. Die Angabe von width undheight im Bild-Tag erlaubt dem Browser, den genauen Platz zu reservieren, bevor das Bild fertig geladen ist, und verhindert so, dass der restliche Inhalt „springt" — ein Faktor, den Google gezielt als CLS (Cumulative Layout Shift) misst, eine weitere der Core-Web-Vitals-Kennzahlen.

Wie man das alles auf einmal umsetzt

Die Punkte 1, 2 und 3 lassen sich in einem einzigen Schritt mitdem Kompressor von SMALLIMG lösen: Du lädst den Bilder-Stapel deiner Website hoch, wählst Ausgabeformat, maximale Breite und Qualität, und lädst alles fertig zum Hochladen herunter. Die Punkte 4 und 5 sind Änderungen, die du direkt im HTML oder im Template deiner Website vornimmst — die meisten modernen Content-Management-Systeme (WordPress eingeschlossen, seit Version 5.5) aktivieren Lazy Loading bereits standardmäßig, sodass manchmal nur eine Kontrolle nötig ist, ob es nicht deaktiviert wurde.