Vor dem Launch einer Website ist die Bildkomprimierung ein entscheidender Schritt zur Verbesserung der Ladegeschwindigkeit und Benutzererfahrung. Unkomprimierte Bilder können zu Seitenverzögerungen, erhöhten Absprungraten und sogar negativen Auswirkungen auf die Suchmaschinenbewertung führen. Diese Checkliste fasst die wichtigsten Prüfpunkte zur Bildkomprimierung zusammen, damit Sie vor dem Launch jeden Punkt überprüfen und sicherstellen können, dass jedes Bild „leicht“ geladen wird.
1. Prüfen, ob das Bildformat angemessen ist
Verschiedene Bildformate eignen sich für unterschiedliche Szenarien. In der Regel werden für Fotos und komplexe Farbverläufe JPEG verwendet, für Symbole, Logos und einfache Grafiken PNG-8 oder SVG, und für Animationen oder transparente Hintergründe bei kleiner Dateigröße WebP. Vermeiden Sie unkomprimierte Formate wie BMP oder TIFF. Prüfpunkte:
- Wurden Fotos in JPEG oder WebP konvertiert?
- Wurden Symbole und dekorative Elemente als SVG (skalierbare Vektorgrafiken) verwendet?
- Wurde die Farbtiefe von PNG-Bildern überprüft (8 Bit / 24 Bit)?
- Wurde die Verwendung des WebP-Formats (von modernen Browsern unterstützt) in Betracht gezogen?
2. Kontrolle der ursprünglichen Bildgröße
Die hochgeladene Bildgröße sollte mit der tatsächlichen Anzeigegröße übereinstimmen, nicht durch HTML oder CSS verkleinert werden. Wenn die Anzeigebreite beispielsweise 800px beträgt, muss kein 4000px breites Bild hochgeladen werden. Prüfpunkte:
- Überschreitet die maximale Breite jedes Bildes nicht die Breite des Layoutcontainers?
- Ist die Bildhöhe entweder automatisch angepasst oder festgelegt, um Verzerrungen zu vermeiden?
- Wurden responsive Bilder (srcset-Attribut) verwendet, um für verschiedene Geräte geeignete Größen bereitzustellen?
3. Auswahl geeigneter Komprimierungstools
Komprimierungstools werden in verlustbehaftete und verlustfreie unterteilt. Verlustbehaftete Komprimierung (z. B. TinyPNG) kann die Dateigröße erheblich reduzieren, wobei der Unterschied mit bloßem Auge kaum sichtbar ist; verlustfreie Komprimierung (z. B. ImageOptim) beeinträchtigt die Bildqualität nicht, hat aber eine geringere Komprimierungsrate. Es wird empfohlen, zuerst eine verlustbehaftete Komprimierung mit 75 %–85 % Qualität zu versuchen und bei unbefriedigendem Ergebnis zu wechseln. Häufig verwendete Tools:
- Online-Tools: TinyPNG, Compressor.io, Squoosh
- Lokale Software: ImageOptim, RIOT, Photoshop „Für Web speichern“
- Build-Tools: imagemin (in Kombination mit Webpack usw.)
4. Balance zwischen Bildqualität und Dateigröße
Übermäßige Komprimierung kann zu Artefakten, Farbblöcken oder Unschärfe führen und das Markenimage beeinträchtigen. Es wird empfohlen, nach der Komprimierung das Original- und das komprimierte Bild zu vergleichen, wobei besonders auf Text, Kanten und Farbverläufe zu achten ist. In der Regel sollte die JPEG-Qualität zwischen 70 % und 85 % liegen, die WebP-Qualität bei etwa 80 % und PNG-8 innerhalb von 256 Farben bleiben. Prüfpunkte:
- Wurden wichtige Bilder (z. B. Produkt-Hauptbilder) separat auf Qualität geprüft?
- Liegt die Dateigröße nach der Komprimierung in einem angemessenen Bereich (in der Regel unter 200 KB, bei dekorativen Bildern kleiner)?
- Gibt es sichtbare Komprimierungsartefakte?
5. Stapelverarbeitung und Namenskonventionen
Wenn die Website viele Bilder enthält, sollten Sie nicht jedes Bild manuell komprimieren, sondern Stapelverarbeitungsfunktionen oder Automatisierungsskripte verwenden. Gleichzeitig sollten Bilddateinamen beschreibende Schlüsselwörter enthalten (z. B. „blue-tshirt-front.jpg“) und nicht „IMG_001.jpg“. Dies hilft Suchmaschinen, den Bildinhalt zu verstehen. Prüfpunkte:
- Wurde eine Stapelkomprimierung verwendet (z. B. gleichzeitiges Hochladen mehrerer Bilder bei TinyPNG)?
- Sind die Bilddateinamen einheitlich (Kleinbuchstaben, Bindestriche, Schlüsselwörter)?
- Wurden alternative Bilder in verschiedenen Auflösungen (für Retina-Bildschirme) erstellt?
6. Überprüfung der Ladegeschwindigkeit nach der Komprimierung
Nach Abschluss der Komprimierung wird empfohlen, in der Testumgebung Tools wie Google PageSpeed Insights oder GTmetrix zu verwenden, um die Bildladung zu überprüfen. Achten Sie besonders auf Empfehlungen wie „Vermeiden Sie unkomprimierte Bilder“ und „Verwenden Sie das richtige Bildformat“. Prüfpunkte:
- Ist der Anteil der Bilder an der gesamten Seitengröße zu hoch?
- Wurde für Bilder Lazy Loading (verzögertes Laden) aktiviert?
- Sind die Bildgrößen für mobile Geräte angepasst?
Hinweis: Bildkomprimierung ist ein iterativer Prozess. Streben Sie nicht nach extrem kleinen Größen auf Kosten der Qualität. Auch nach dem Launch sollten Sie regelmäßig prüfen und zu große Bilder erneut komprimieren. Mit dieser Checkliste wird Ihre Website Besucher mit höherer Geschwindigkeit begrüßen.
