🎨
Squoosh
Open-Source-Tool von Google. Volle Kontrolle über alle Einstellungen mit Live-Vorschau. Läuft direkt im Browser, keine Installation nötig.
Zu Squoosh →
Performance-Ratgeber
Bis zu 80% kleinere Dateien ohne sichtbaren Qualitätsverlust
Bilder machen oft 50-90% der Größe einer Webseite aus. Mit den richtigen Techniken und Tools reduzieren Sie die Dateigröße drastisch – und Ihre Website lädt deutlich schneller. In diesem Leitfaden zeigen wir Ihnen, wie das geht.
Die richtigen Bildformate wählen
Nicht jedes Bildformat eignet sich für jeden Zweck. Die Wahl des richtigen Formats ist der erste Schritt zu kleineren Dateien und damit schnelleren Ladezeiten.
WebP ist der moderne Standard und sollte Ihre erste Wahl sein. Es ist etwa 30% kleiner als JPEG bei gleicher Qualität und unterstützt auch Transparenz. Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen WebP seit 2020.
JPEG bleibt der Klassiker für Fotos. Es funktioniert in allen Browsern und bietet gute Komprimierung für fotografische Inhalte. Nutzen Sie es als Fallback für ältere Browser oder wenn maximale Kompatibilität wichtig ist.
💡 Praxis-Tipp: WebP + JPEG Fallback
Bieten Sie WebP als Hauptformat an und JPEG als Fallback für ältere Browser. WordPress-Plugins wie "WebP Converter" oder "ShortPixel" können das automatisch für Sie erledigen – Sie laden ein JPEG hoch, und das Plugin erstellt automatisch eine WebP-Version.
PNG sollten Sie nur verwenden, wenn Sie Transparenz benötigen – etwa für Logos oder Grafiken mit durchsichtigem Hintergrund. Für Fotos ist PNG deutlich größer als JPEG oder WebP.
SVG ist perfekt für Logos, Icons und einfache Grafiken. Als Vektorgrafik ist es verlustfrei skalierbar und die Dateien sind winzig klein.
Intelligente Komprimierung nutzen
Komprimierung ist der wichtigste Schritt zur Optimierung. Moderne Algorithmen entfernen überflüssige Daten aus Bilddateien, ohne dass Sie den Unterschied sehen. Ein Bild kann so von 2 MB auf 200 KB schrumpfen.
- Verlustfreie Komprimierung entfernt nur Metadaten wie Kamera-Informationen und GPS-Daten. Das Bild bleibt pixelgenau identisch. Einsparung: 10-20%.
- Verlustbehaftete Komprimierung reduziert die Bildqualität minimal – so wenig, dass Sie es kaum bemerken. Bei Qualität 80-85% schrumpft die Datei um 50-80%.
- Sweet Spot: Qualitätseinstellung 80-85% bietet das beste Verhältnis aus Dateigröße und visueller Qualität.
📊 Beispielrechnung: Was bringt Komprimierung wirklich?
Vorher: Foto vom Smartphone, 4000 x 3000 Pixel, JPEG 100% Qualität = 2,4 MB
Nachher: Auf 1200px skaliert, WebP mit 82% Qualität = 185 KB
Ergebnis: 92% Einsparung bei visuell identischer Qualität!
Nachher: Auf 1200px skaliert, WebP mit 82% Qualität = 185 KB
Ergebnis: 92% Einsparung bei visuell identischer Qualität!
Die besten kostenlosen Tools
Sie brauchen keine teure Software. Diese kostenlosen Tools liefern professionelle Ergebnisse:
🍎
ImageOptim
Open-Source Desktop-App für macOS. Perfekt für Stapelverarbeitung – ganze Ordner reinziehen. Unbegrenzte Anzahl Bilder, keine Upload-Limits.
Zu ImageOptim →🪟
FileOptimizer
Open-Source Desktop-App für Windows. Unterstützt 80+ Formate, Batch-Verarbeitung und aggressive Komprimierung. Vollständig portabel.
Zu FileOptimizer →🐧
Trimage
Open-Source GUI-Tool für Linux. Nutzt optipng, pngcrush und jpegoptim im Hintergrund. Einfaches Drag & Drop, verlustfreie Komprimierung.
Zu Trimage →
Bilder auf die richtige Größe skalieren
Ein häufiger Fehler: Bilder werden in voller Auflösung hochgeladen, obwohl sie auf der Website viel kleiner dargestellt werden. Ihr Smartphone macht Fotos mit 4000 x 3000 Pixeln. Auf Ihrer Website wird das Bild aber nur 800 Pixel breit angezeigt. Trotzdem laden Besucher die volle 4000-Pixel-Version herunter – völlig unnötig.
Die Lösung: Skalieren Sie Bilder vor dem Upload auf die tatsächlich benötigte Größe.
- Hero-Bilder (Vollbild): maximal 1920 x 1080 Pixel
- Inhaltbilder: 800 x 600 Pixel reichen meist
- Vorschaubilder: 400 x 300 Pixel
- Thumbnails: 150 x 150 Pixel
⚡ Schnell-Check: Ist Ihr Bild zu groß?
Rechtsklick auf das Bild → "Element untersuchen" → Im Developer-Tool sehen Sie die tatsächliche Anzeigegröße (z.B. "800 x 600"). Wenn die Datei selbst viel größer ist (z.B. 3000 x 2250), verschenken Sie Performance. Für Retina-Displays reicht das 1,5- bis 2-fache der Anzeigegröße.
Lazy Loading & moderne Techniken
Lazy Loading lädt Bilder erst, wenn sie im sichtbaren Bereich auftauchen. Bilder am Ende der Seite werden also nicht sofort beim Seitenaufruf geladen – das spart Ladezeit und Datenvolumen.
Die Umsetzung ist denkbar einfach – ein einzelnes HTML-Attribut genügt: loading="lazy"
Responsive Images mit dem srcset-Attribut ermöglichen es, dem Browser mehrere Bildversionen anzubieten. Er lädt dann automatisch die passende Größe – auf dem Smartphone die 400px-Version, auf dem Desktop die 1200px-Version.
Alt-Texte nicht vergessen: Sie helfen nicht nur sehbehinderten Nutzern, sondern auch Google zu verstehen, was auf dem Bild zu sehen ist. Guter Alt-Text: "Moderne Küche mit weißen Fronten und Holzarbeitsplatte". Schlechter Alt-Text: "Bild1.jpg".
✓ Checkliste: Ist Ihr Bild perfekt optimiert?
→ Richtiges Format gewählt (WebP bevorzugt)?
→ Auf benötigte Größe skaliert?
→ Komprimiert mit Qualität 80-85%?
→ Sprechender Dateiname (z.B. moderne-kueche.webp)?
→ Alt-Text vorhanden?
→ Lazy Loading aktiviert (loading="lazy")?
→ Auf benötigte Größe skaliert?
→ Komprimiert mit Qualität 80-85%?
→ Sprechender Dateiname (z.B. moderne-kueche.webp)?
→ Alt-Text vorhanden?
→ Lazy Loading aktiviert (loading="lazy")?
Häufig gestellte Fragen
Alles, was Sie wissen müssen
Bei verlustbehafteter Komprimierung (JPEG, WebP) ist eine Qualitätseinstellung von 80-85% optimal. Damit erreichen Sie 50-70% kleinere Dateien bei praktisch unsichtbaren Qualitätsverlusten. Für verlustfreie Komprimierung (PNG) können Sie 10-20% Einsparung erwarten.
WebP ist technisch überlegen – es ist etwa 30% kleiner als JPEG bei gleicher Qualität. Alle modernen Browser unterstützen WebP seit 2020. Idealerweise bieten Sie WebP als Hauptformat an und JPEG als Fallback für ältere Browser.
TinyPNG ist perfekt für Einsteiger. Einfach Bilder per Drag & Drop hochladen, automatische Komprimierung, fertig. Keine Einstellungen nötig, hervorragende Ergebnisse. Kostenlos bis 20 Bilder gleichzeitig.
Ja, definitiv! Desktop-Tools wie ImageOptim (Mac), FileOptimizer (Windows) oder Trimage (Linux) können ganze Ordner auf einmal verarbeiten. Für WordPress gibt es Plugins wie ShortPixel, die auch bereits hochgeladene Bilder automatisch optimieren. Das lohnt sich besonders bei älteren Websites.
Ja, das ist sehr empfehlenswert. Ein Smartphone braucht kein 2000 Pixel breites Bild. Mit dem HTML-Attribut "srcset" können Sie dem Browser mehrere Größen anbieten – er wählt dann automatisch die passende. Das spart Ladezeit und Datenvolumen.
⚡
Website professionell optimieren lassen?
Ich analysiere Ihre Website, optimiere alle Bilder und sorge dafür, dass auch zukünftig alles automatisch läuft – für dauerhaft schnelle Ladezeiten.