Deine Bilder sind wahrscheinlich zu groß (So behebst du es)
Die meisten Websites laden langsam wegen nicht optimierter Bilder. Ein paar Minuten Kompression können deine Ladezeit halbieren.
Letzte Woche habe ich ein Website-Audit für das Fotografie-Portfolio eines Freundes durchgeführt. Wunderschöne Bilder. Großartige Arbeit.
Die Startseite brauchte 12 Sekunden zum Laden.
Der Übeltäter? Ein einzelnes Hero-Bild mit 8MB. Bei einer Handyverbindung waren die Besucher weg, bevor sie irgendetwas sahen.
Das passiert öfter, als du denkst. Also lass uns darüber reden, wie man es behebt.
Das Problem, das niemand bemerkt
Wenn du ein Bild aus Photoshop oder von deinem Handy exportierst, ist es normalerweise viel größer als nötig. Ein 4000x3000-Foto direkt von einer Kamera könnte 15MB haben.
Für eine Website brauchst du selten mehr als 200KB – manchmal weniger.
Der Unterschied ist wichtig:
| Bildgröße | Ladezeit (3G) | Ladezeit (4G) | |-----------|---------------|---------------| | 5MB | 40+ Sekunden | 8 Sekunden | | 500KB | 4 Sekunden | unter 1 Sek. | | 100KB | unter 1 Sek. | sofort |
Dieses 5MB-Bild ist nicht nur langsam – es frisst auch das Datenvolumen deiner Besucher.
Schritt 1: Zuerst verkleinern
Bevor du irgendetwas komprimierst, überprüfe die Abmessungen.
Wenn deine Website ein Bild mit 800 Pixeln Breite anzeigt, macht es keinen Sinn, ein 4000-Pixel-Original hochzuladen. Du sendest 5x mehr Daten als nötig.
Finde heraus, in welcher maximalen Größe dein Bild angezeigt wird (prüfe auf Desktop – normalerweise am größten), und verkleinere dann auf diese Breite. Füge vielleicht 20% Puffer für Retina-Displays hinzu, wenn du willst.
Schritt 2: Komprimiere es
Jetzt, wo dein Bild die richtige Größe hat, komprimiere es.
Moderne Kompressionsalgorithmen sind überraschend gut. Du kannst oft die Dateigröße um 60-80% reduzieren ohne sichtbaren Qualitätsverlust. Wirklich – leg Vorher und Nachher nebeneinander und versuche, den Unterschied zu erkennen.
Ein paar Dinge, die du wissen solltest:
JPEG-Qualität 80-85 ist normalerweise der Sweet Spot. Unter 70 siehst du Artefakte. Über 90 verschwendest du Bytes für unsichtbare Verbesserungen.
PNG ist verlustfrei, komprimiert also weniger. Aber es lohnt sich trotzdem, es durch einen Kompressor laufen zu lassen, um Metadaten zu entfernen und die Kodierung zu optimieren.
WebP gibt dir das Beste aus beiden Welten – kleinere Dateien als JPEG mit Transparenzunterstützung wie PNG. Die meisten Browser unterstützen es jetzt.
Schritt 3: Wähle das richtige Format
Das ist wichtiger, als die Leute denken.
Verwende JPEG für:
- Fotos
- Bilder mit vielen Farben und Verläufen
- Hintergründe
Verwende PNG für:
- Logos
- Icons
- Screenshots
- Alles, was Transparenz braucht
Verwende WebP für:
- Alles, wenn deine Zielgruppe moderne Browser nutzt
- Fallback zu JPEG/PNG für ältere Browser
Verwende SVG für:
- Einfache Grafiken
- Icons
- Logos (wenn du die Vektordatei hast)
- Alles, was unendlich skalieren muss
Echte Zahlen
Hier ist, was passierte, als ich das Portfolio meines Freundes optimierte:
| Vorher | Nachher | |--------|---------| | Hero-Bild: 8MB | Hero-Bild: 180KB | | Thumbnail-Raster: 12MB gesamt | Thumbnail-Raster: 400KB gesamt | | Seitenladezeit: 12 Sekunden | Seitenladezeit: 1,8 Sekunden |
Dieselben Bilder. Dieselbe visuelle Qualität. Nur richtig optimiert.
Der faule Weg
Wenn du zu WordPress, Squarespace oder ähnlichen Plattformen hochlädst, komprimieren sie Bilder oft automatisch. Aber „oft" ist nicht „immer", und ihre Kompression ist nicht immer aggressiv genug.
Besserer Ansatz: Optimiere vor dem Hochladen. Du kontrollierst die Qualität und bist nicht darauf angewiesen, was auch immer die Plattform entscheidet zu tun.
Dauert 2 Minuten pro Bild. Deine Besucher werden dir danken – auch wenn sie nie wissen, warum sich deine Seite schnell anfühlt.
Schnelle Checkliste
Vor dem Hochladen eines Bildes:
- Ist es die richtige Größe? Lade keine 4000px hoch, wenn du 800px brauchst
- Ist es komprimiert? Lass es durch einen Kompressor laufen
- Ist es das richtige Format? JPEG für Fotos, PNG für Grafiken, WebP wenn möglich
- Hast du es getestet? Schau dir die finale Version an. Wenn es schlecht aussieht, reduziere die Kompression
Website-Geschwindigkeit dreht sich hauptsächlich um Bilder. Behebe deine Bilder, und du hast die Hälfte deiner Performance-Probleme behoben. Alles andere ist Optimierung am Rande.
Beginne mit deinen größten Bildern zuerst. Normalerweise sind das Hero-Banner und Vollbreiten-Fotos. Die geben dir die größten Gewinne für den geringsten Aufwand.